/* ================================================================
   STYLE.CSS — Single Source of Truth for ALL CSS Custom Properties
   ================================================================
   Every :root / theme-variable declaration for the entire app lives
   HERE and only here. No other CSS file or HTML page should declare
   `:root { --x: ... }`, `body.theme-light { --x: ... }`, etc.

   This file must be linked FIRST in <head>, before every other
   stylesheet, on every page of the app.

   Structure:
     1. GLOBAL — dark default (:root)
     2. GLOBAL — light theme (manual toggle + OS preference)
     3. GLOBAL — dark theme (explicit manual toggle)
     4. GLOBAL — responsive / conditional overrides
     5. PAGE-SCOPED overrides (only where the same variable name
        legitimately needs a different value on a different page)
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   1. GLOBAL DEFAULT (dark) — :root
   Merged from: tokens.css, index.html inline, unified-platform.css,
   pakixto-theme.css, unified-nav.css, swapdex-redesign.css,
   swap-elite-v16.css, claude-style.css, reward.html, tokens.html
   ──────────────────────────────────────────────────────────────── */
:root {
  /* ── Core token system (tokens.css / index.html) ── */
/* ══════════════════════════════════════════════════════════
     CANONICAL TEXT COLOR SYSTEM — exactly 3 tiers + sky blue.
     Every text-color variable in the app resolves to one of these
     four values. Do not add new hardcoded text colors anywhere;
     alias to one of these instead.
     ══════════════════════════════════════════════════════════ */
  --text-normal-tier: #f0f0f5;  /* Normal — bright off-white (dark mode) */
  --text-muted-tier: rgba(255, 255, 255, .85);  /* Muted  — soft slate gray  (dark mode) */
  --text-dim-tier:    rgba(255, 255, 255, .85);  /* Dim    — deep low-contrast gray (dark mode) */
  --text-sky: #808000;  /* default accent color, both modes — Olive (first pill of the sidebar picker) */
  --accent-sky-rgb: 128,128,0;  /* R,G,B triplet form of --text-sky, for rgba()/gradients that need a custom alpha not covered by --accent-sky-a* */

  /* ── unified-platform.css design system ── */
  --border: var(--bb-border);
  --border-glow: var(--bb-border);
  --border-card: var(--bb-border);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 14px;

--font-display: "Montserrat", sans-serif; 
  /* --font-mono for the gidoverse/tradefi shell differs from the index-app value above;
     see PAGE-SCOPED section for body.page-index's override back to Montserrat */
     
  --font-mono: 'Inter', system-ui, -apple-system, sans-serif;

  --sidebar-w: 240px;
  --header-h: 60px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);

--fg-muted: var(--text-muted);
  --green: var(--accent-green);
  --red: var(--accent-red);
  --bg-secondary: var(--bg-elevated);
  --radius: var(--radius-md);

  /* ── pakixto-theme.css shared border tokens ── */
  
  
  --bb-border: #000000;
  --bb-border2: rgba(255,255,255,.12);

  /* ── unified-nav.css sidebar tokens ── */
  
  --side-w: 120px;
  --side-gap: 8px;
  --side-gap-top: 8px;
  --side-gap-left: 8px;
  --side-gap-bottom: 8px;
  --sg: #ff0000;
  --sg-dim: rgba(255,255,255,0.07);
  --sg-border: transparent;
  --sg-hover: rgba(255,255,255,0.07);
  --sg-muted: var(--text-muted-tier);
--sb-muted: var(--text-muted-tier);
  --side-w-full: 120px;
  --side-w-icons: 52px;

  /* ── swapdex-redesign.css (sdv5 shell) — colors ── */
  --sdv5-bg: #000000;
  --sdv5-bg-1: #2f2f2f;
  --sdv5-bg-2: #000000;
  --sdv5-bg-card: #2f2f2f;
  --sdv5-bg-hero: #000000;
--sdv5-border: var(--bb-border);
  --sdv5-border-mid: var(--bb-border);
  --sdv5-border-bold: var(--bb-border);

  --sdv5-accent: #ffffff;
--sdv5-accent-soft: rgba(255,255,255,0.06);
  --sdv5-accent-glow: rgba(255,255,255,0.45);
  --sdv5-accent-ink: #000000;

--sdv5-red: #FF5555;
--sdv5-text: var(--text-normal-tier);
  --sdv5-muted: var(--text-muted-tier);
  --sdv5-muted-2: var(--text-muted-tier);

--sdv5-radius: 12px;
  --sdv5-radius-lg: 14px;
  --sdv5-radius-xl: 14px;

/* ── swapdex-redesign.css — fluid type scale + spacing ── */
--sdv5-text-xs: clamp(10px, 2vw + 7px, 12px);
--sdv5-text-base: clamp(13px, 2.4vw + 9px, 15px);
--sdv5-text-2xl: clamp(22px, 4vw + 14px, 30px);
  --sdv5-text-3xl: clamp(26px, 5vw + 16px, 38px);

/* ── claude-style.css — Claude AI design scale ── */
  --ff-base: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 16px;
  --fs-2xl: 18px;
  --fs-3xl: 22px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
--lh-normal: 1.5;
--ls-tight: -0.02em;
  --ls-normal: -0.01em;
  --ls-wide: 0.02em;
  --ls-wider: 0.05em;

  --radius-xs: 4px;
  /* --radius-sm/md/lg/xl already defined above (unified-platform); claude-style used
     identical names with a matching scale, so they are unified here rather than duplicated */
--radius-full: 9999px;

--space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
--space-10: 40px;

  --border-subtle: 1px solid var(--bb-border);
  --border-default: 1px solid var(--bb-border);
  --border-strong: 1px solid var(--bb-border);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* ── reward.html popup shell ── */
  --btn-bg: #131412;
  --btn-clr: #dddddd;
}

/* Backward-compat aliases for existing --r / --ri (claude-style.css) */ 
:root {
  --r: var(--radius-xl);
  --ri: var(--radius-lg);
}


/* ────────────────────────────────────────────────────────────────
   2. GLOBAL LIGHT THEME
   Applies on manual toggle (body.theme-light / html[data-theme="light"])
   AND on OS-level light preference where the original files honored it.
   ──────────────────────────────────────────────────────────────── */
body.theme-light,
html[data-theme="light"] {
  /* ── canonical text tiers — light mode ── */
  --text-normal-tier: #0f0f1a !important;
  --text-muted-tier: rgba(0,0,0,0.75) !important;
  --text-dim-tier: pink !important;

  /* ── tokens.css / index.html core tokens ── */
  --bg: #FFFFFF !important; --card: #ffffff !important; --card2: #f7f7fc !important; --input: #f7f7fc !important;
  --bb-surface: #f7f7fc !important; --rz-avatar-chip-bg: rgba(0,0,0,0.05) !important;
  --text: var(--text-normal-tier) !important; --muted: var(--text-muted-tier) !important; --muted2: var(--text-muted-tier) !important; --muted3: #d0d0dc !important;
  --bdr: rgba(0,0,0,0.10) !important; --bdr2: rgba(0,0,0,0.06) !important;
  --gold: #FFFFFF !important; --gold2: #FFFFFF !important;
  --gold-dim: rgba(249,185,28,0.10) !important;
  --gold-b: rgba(249,185,28,0.10) !important; --gold-bb: rgba(249,185,28,0.10) !important;

  /* ── unified-platform.css ── */
  --bg-base: #ffffff !important;
  --bg-panel: #ffffff !important;
  --bg-card: #ffffff !important;
  --bg-elevated: #f7f7fc !important;
  --bg-hover: #ededf5 !important;
  --bg-input: #f7f7fc !important;
  --text-primary: var(--text-normal-tier) !important;
  --text-secondary: var(--text-muted-tier) !important;
  --text-muted: var(--text-muted-tier) !important;
  --text-dim: var(--text-dim-tier) !important;
  --text-accent: var(--text-normal-tier) !important;
  --border: var(--bb-border) !important;
  --border-glow: var(--bb-border) !important;
  --border-card: var(--bb-border) !important;
  --primary: #ffffff !important;
  --primary-glow: rgba(255,255,255,0.2) !important;
  --secondary: #ffffff !important;
/* ── pakixto-theme.css ── */
  --bb-border: #FFFFFF !important;
  --bb-border2: rgba(0,0,0,.12) !important;

  /* ── unified-nav.css ── */
  --sg-muted: var(--text-muted-tier) !important;
  --sb-muted: var(--text-muted-tier) !important;
/* ── swap-elite-v16.css / swapdex-redesign.css (sdv5 shell) ── */
  --sdv5-bg: #ffffff !important;
  --sdv5-bg-1: #ffffff !important;
  --sdv5-bg-2: #ffffff !important;
  --sdv5-bg-card: #ffffff !important;
  --sdv5-bg-hero: #e8e8e8 !important;
--sdv5-border: var(--bb-border) !important;
  --sdv5-border-mid: var(--bb-border) !important;
  --sdv5-border-bold: var(--bb-border) !important;
  --sdv5-text: var(--text-normal-tier) !important;
  --sdv5-muted: var(--text-muted-tier) !important;
  --sdv5-muted-2: var(--text-muted-tier) !important;
  --sdv5-accent: #111111 !important;
--sdv5-accent-soft: rgba(0,0,0,0.05) !important;
/* ── reward.html popup shell ── */
  --btn-bg: #ffffff !important;
  --btn-clr: #000000 !important;
}

/* OS-level light preference — only for the files that originally honored it
   (tokens.css, unified-platform.css, pakixto-theme.css). Kept separate from the
   manual-toggle block above because @media cannot be merged into a selector list. */
@media (prefers-color-scheme: light) {
  :root {
    --text-normal-tier: #0f0f1a;
    --text-muted-tier:  rgba(255, 255, 255, .85);
    --text-dim-tier:    rgba(255, 255, 255, .85);

    --bg: #FFFFFF; --card: #ffffff; --card2: #f7f7fc; --input: #f7f7fc;
    --text: var(--text-normal-tier); --muted: var(--text-muted-tier); --muted2: var(--text-muted-tier); --muted3: #d0d0dc;
    --bdr: rgba(0,0,0,0.10); --bdr2: rgba(0,0,0,0.06);
    --gold: #808000; --gold2: #808000; --gold-dim: rgba(249,185,28,0.10);
    --gold-b: rgba(249,185,28,0.10); --gold-bb: rgba(249,185,28,0.10);

    --bg-base: #FFFFFF;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #f7f7fc;
    --bg-hover: #ededf5;
    --bg-input: #f7f7fc;
    --text-primary: var(--text-normal-tier);
    --text-secondary: var(--text-muted-tier);
    --text-muted: var(--text-muted-tier);
    --text-dim: var(--text-dim-tier);
    --text-accent: var(--text-normal-tier);
    --border: var(--bb-border);
    --border-glow: var(--bb-border);
    --border-card: var(--bb-border);
    --primary: #ffffff;
    --primary-glow: rgba(255,255,255,0.2);
    --secondary: #ffffff;
--bb-border: #FFFFFF;
    --bb-border2: rgba(0,0,0,.12);
  }
}


/* ────────────────────────────────────────────────────────────────
   3. GLOBAL DARK THEME (explicit manual toggle)
   Restates the dark defaults for pages/components that toggle an
   explicit body.theme-dark class rather than relying on the base
   :root values.
   ──────────────────────────────────────────────────────────────── */
body.theme-dark {
  --text-normal-tier: #f0f0f5 !important;
  --text-muted-tier:  rgba(255, 255, 255, .85) !important;
  --text-dim-tier:    rgba(255, 255, 255, .85) !important;

  --bg: #000000 !important; --card: #2f2f2f !important; --card2: #252525 !important; --input: #2f2f2f !important;
  --text: var(--text-normal-tier) !important; --muted: var(--text-muted-tier) !important; --muted2: var(--text-muted-tier) !important; --muted3: #333 !important;
  --bdr: rgba(208,208,208,.15) !important; --bdr2: rgba(208,208,208,.08) !important;
  --gold: #ffffff !important; --gold2: #ffffff !important;
  --gold-dim: rgba(255,255,255,0.10) !important;
  --gold-b: rgba(255,255,255,0.10) !important; --gold-bb: rgba(255,255,255,0.10) !important;

  --bg-base: #000000 !important;
  --bg-panel: #2f2f2f !important;
  --bg-card: #2f2f2f !important;
  --bg-elevated: #15151c !important;
  --bg-hover: #1a1a22 !important;
  --bg-input: #2f2f2f !important;
  --text-primary: var(--text-normal-tier) !important;
  --text-secondary: var(--text-muted-tier) !important;
  --text-muted: var(--text-muted-tier) !important;
  --text-dim: var(--text-dim-tier) !important;
  --text-accent: var(--text-normal-tier) !important;
  --border: var(--bb-border) !important;
  --border-glow: var(--bb-border) !important;
  --border-card: var(--bb-border) !important;
  --primary: #D0D0D0 !important;
  --primary-glow: rgba(208,208,208,0.35) !important;
  --secondary: #E5E5E5 !important;
--bb-border: #000000 !important;
  --bb-border2: rgba(255,255,255,.12) !important;
}


/* ────────────────────────────────────────────────────────────────
   4. RESPONSIVE / CONDITIONAL OVERRIDES
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --TOP: 96px; --SIDE: 0px; }
}
@media (max-width: 950px) {
  :root { --SIDE: 0px; }
}
@media (max-width: 600px) {
  :root { --side-w: var(--side-w-icons, 52px) !important; }
}

/* tokens.html embedded-in-iframe mode */
body.in-iframe-mode { --TOP: 0px !important; }


/* ────────────────────────────────────────────────────────────────
   5. PAGE-SCOPED OVERRIDES
   Only used where the SAME variable name legitimately carries a
   different value on a different page (both values are real,
   intentional, pre-existing differences — kept exactly as they were,
   just relocated and made explicit via a body class instead of
   depending on which stylesheet happened to load last).
   ──────────────────────────────────────────────────────────────── */

/* rizq-matrix.html loads rizq-base.css AFTER unified-platform.css, so
   gidoverse-base's --text-primary / --text-muted previously won by load
   order. Made explicit here instead. */
/* body.page-gidoverse-matrix variable blocks migrated to rizq-matrix.html
   (note: pre-existing bug — <body> never actually receives this class in
   rizq-matrix.html, only a child <div>, so this rule was already inert) */

/* tradefi-bot.html shares unified-platform.css's global --font-mono
   (Inter) — no override needed, it uses the global default above. */

/* index.html's own inline tokens used Montserrat for --font-mono
   instead of unified-platform's Inter. It also defines its own
   --r / --ri / --pad, which load AFTER claude-style.css on that page
   and so win there — everywhere else, claude-style.css's --r/--ri
   (aliased to --radius-xl/--radius-lg) apply instead. */
body.page-index {
  --font-mono: 'Montserrat', sans-serif;
  --r: 16px;
  --ri: 12px;
}

/* ────────────────────────────────────────────────────────────────
   AUTO-GENERATED COLOR TOKENS
   Every literal `color: #hex / rgb() / rgba()` value found across the
   app's CSS/HTML/JS was extracted into a variable here so all text/icon
   color declarations use var(--...). Values are unchanged from source
   — no visual difference. Named by role/usage (not by raw hex) and
   grouped below; grep the codebase for a name if you want to confirm
   its exact usage sites. Near-duplicate alpha-notation values (e.g.
   rgba(...,.7) vs rgba(...,0.70)) were merged into a single variable.
   ──────────────────────────────────────────────────────────────── */
:root {
  /* ── Text — white opacity scale (text on dark surfaces) — 12 steps ── */
  --text-white-a30: rgba(255,255,255,.30);
  --text-white-a35: rgba(255,255,255,.35);
  --text-white-a38: rgba(255,255,255,.38);
  --text-white-a40: rgba(255,255,255,.40);
  --text-white-a50: rgba(255,255,255,.50);
  --text-white-a55: rgba(255,255,255,.55);
  --text-white-a60: rgba(255,255,255,.60);
  --text-white-a70: rgba(255,255,255,.70);
  --text-white-a80: rgba(255,255,255,.80);
  --text-white-a85: rgba(255,255,255,.85);
  --text-white-a90: rgba(255,255,255,.90);
  --text-white-a95: rgba(255,255,255,.95);

  /* ── Text — black opacity scale (text on light surfaces, theme-light overrides) — 12 steps ── */
  --text-black-a35: rgba(0,0,0,.35);
  --text-black-a40: rgba(0,0,0,.40);
  --text-black-a45: rgba(0,0,0,.45);
  --text-black-a50: rgba(0,0,0,.50);
  --text-black-a55: rgba(0,0,0,.55);
  --text-black-a60: rgba(0,0,0,.60);
  --text-black-a65: rgba(0,0,0,.65);
  --text-black-a70: rgba(0,0,0,.70);
  --text-black-a75: rgba(0,0,0,.75);
  --text-black-a80: rgba(0,0,0,.80);
  --text-black-a85: rgba(0,0,0,.85);
  --text-black-a90: rgba(0,0,0,.90);

  /* ── Text — primary-gray opacity scale (agent.css icon/button text, based on --primary #d0d0d0) ── */
  --text-primary-a50: rgba(208,208,208,.50);
  --text-primary-a70: rgba(208,208,208,.70);
  --text-primary-a85: rgba(208,208,208,.85);
  --text-primary-a90: rgba(208,208,208,.90);
  --text-primary-alt: #f4f4f0;

  /* ── Text — solid grayscale (muted/secondary text, various components) ── */
  --text-gray-55: #555555;
  --text-gray-60: #606070;
  --text-gray-66: #666666;
  --text-gray-88: #888888;
  --text-gray-8f: #8f8f8f;
  --text-gray-aa: #aaaaaa;
  --text-gray-slate: #94a3b8;  /* distinct blue-gray hue, left out of the neutral ramp */

  /* ── Text — "ink" (dark text sitting on bright/accent-colored buttons & badges) ── */
  --text-ink: #0d0d14;  /* covers former text-ink-alt / -create / -swap-tab — indistinguishable near-blacks */
  --text-on-accent: #ffffff;  /* text/icon color for buttons & cards filled with the accent color; overridden per data-accent below where dark text doesn't read well */
  --text-ink-icon: #001a08;      /* dark green tint — genuinely distinct, kept */
  --text-ink-nav-hero: #001a06;  /* dark green tint — genuinely distinct, kept */
  --text-ink-rose: #3a0000;      /* dark red tint — genuinely distinct, kept */
  --text-ink-tan: #1a1306;       /* dark brown tint — genuinely distinct, kept */
  --text-taupe: #706e6a;         /* warm mid gray — genuinely distinct, kept */

  /* ── Brand — AI model provider accent colors ── */
  --brand-across: #ff8a6e;
  --brand-aerodrome: #22d3ee;
  --brand-base-token: #4f8cf7;
  --brand-cohere: #ee7752;
  --brand-cohere-light: #c04a24;
  --brand-dexscreener: #00c8b4;
  --brand-gemini: #d946ef;
  --brand-gemini-light: #a020b8;
  --brand-github: #8b949e;
  --brand-github-light: #444d56;
  --brand-groq: #58a6ff;
  --brand-groq-light: #1a6fd4;
  --brand-kyber: #31c48d;
  --brand-mistral: #ff7000;
  --brand-mistral-light: #c45500;
  --brand-paraswap: #e879f9;
  --brand-sushiswap: #f97316;

  /* ── Chain / token accent colors ── */
  --chain-base: #5b9dff;
  --chain-polygon: #c084fc;
  --chain-sky-light: rgba(14,165,233,0.95);
  --chain-solana: #9945ff;
  --chain-solana-light: #c280ff;
  --chain-ton: #0088cc;
  --chain-ton-light: #50caff;

  /* ── Links ── */
  --link-blue: var(--text-sky);
  --link-blue-hover: var(--text-sky);
  --link-blue-light: var(--text-sky);

  /* ── Tier badges (unified-platform .tier-0..8 categorical scale) ── */
  --tier-0: #8b8ba7;
  --tier-2: #c4b5fd;
  --tier-3: #808000;
  --tier-4: #67e8f9;
  --tier-5: #6ee7b7;
  --tier-7: #fdba74;
  --tier-8: #fca5a5;

  /* ── State — success / gain / ok ── */
  --state-gain: #5fff9a;
  --state-gain-alt: #b8ff3a;
  --state-gain-soft: rgba(74,222,128,.9);
  --state-ok: #10b981;
  --state-ok-save: rgba(34,197,94,1);
  --state-success: #4ade80;

  /* ── State — danger / error / loss ── */
  --state-danger: #ff5050;  /* covers former state-danger-alt / state-error — near-identical reds */
  --state-danger-badge: #ff8484;
  --state-danger-clear: rgba(220,38,38,0.85);  /* covers former state-danger-light */
  --state-danger-clear-active: rgba(255,100,100,1);
  --state-danger-clear-hover: rgba(220,80,80,.8);  /* covers former state-danger-hover */
  --state-danger-loading-text: rgba(255,100,100,.6);
  --state-danger-soft: #ff6b6b;
  --state-danger-soft-bg-text: rgba(255,100,100,0.85);

  /* ── State — warning ── */
  --state-warning-active-light: #b07800;
  --state-warning-badge: rgba(255,200,0,.75);
  --state-warning-icon: #d97706;
  --state-warning-label-light: rgba(180,130,0,0.8);
  --state-warning-text: rgba(251,191,36,0.85);
  --state-warning-text-light: rgba(180,100,0,0.90);

  /* ── Rate-limit counter (agent.css) ── */
  --rate-limit-badge: rgba(250,204,21,.95);
  --rate-limit-danger-a85: rgba(239,68,68,.85);
  --rate-limit-danger-a90: rgba(239,68,68,0.90);
  --rate-limit-warn-a50: rgba(250,204,21,0.50);
  --rate-limit-warn-a70: rgba(250,204,21,.7);
  --rate-limit-warn-a75: rgba(250,204,21,0.75);

  /* ── Referral tag colors (rz-ref-tag) ── */
  --ref-tag-err: #f87171;
  --ref-tag-warn: #fbbf24;

  /* ── rz-notice pale text colors ── */
  --notice-err-text: #ffc8c8;
  --notice-info-text: #c8e8ff;
  --notice-ok-text: #b8f5d0;
  --notice-warn-text: #ffe5a3;

  /* ── Sky accent opacity scale (canonical app accent — default #808000 olive) ── */
  --accent-sky-a100: rgba(128,128,0,1.0);
  --accent-sky-a65: rgba(128,128,0,.65);
  --accent-sky-a70: rgba(128,128,0,0.70);
  --accent-sky-a80: rgba(128,128,0,.8);
  --accent-sky-a90: rgba(128,128,0,0.90);
  --accent-sky-a95: rgba(128,128,0,0.95);
  --accent-sky-light: #808000;
  --accent-sky-light-rgb: 128,128,0;
  --accent-sky-light-a100: rgba(128,128,0,1.0);
  --accent-sky-light-a80: rgba(128,128,0,0.80);
  --accent-sky-light-a85: rgba(128,128,0,0.85);

  /* ── Misc one-off accents ── */
  --accent-amber-badge-light: rgba(113,63,18,1);
  --accent-blue-soft: #60a5fa;
  --accent-cyan-launches: var(--text-sky);
  --accent-gas-icon: #f4c430;
  --accent-indigo: #818cf8;
  --accent-indigo-soft: rgba(165,168,255,0.95);
  --accent-lime: #32cd32;
  --accent-lime-soft: #d8ff7f;
  --accent-sun: #f5a623;

  /* ── Uncategorized ── */
  --debug-console-cyan: #00ffff;
}

/* ────────────────────────────────────────────────────────────────
   GIDO brand-mark badge — same logic as .sidebar-logo-icon in the
   sidebar block in index.html: accent-colored box (var(--text-sky)) behind a
   white logo mark, so the icon obeys html[data-accent="..."].
   Apply to any wrapper around the GIDO logo.svg / X-mark icon.
   ──────────────────────────────────────────────────────────────── */
.gido-brand-badge {
  background: var(--text-sky) !important;
}
.gido-brand-badge img,
.gido-brand-badge svg {
  filter: brightness(0) invert(1);
}

/* ────────────────────────────────────────────────────────────────
   Primary accent color toggle (sidebar pill: blue / clay / pink / gold)
   Overrides --text-sky and its derived --accent-sky-* opacity scale.
   Applied via html[data-accent="..."], set by the sidebar JS inline in index.html.
   Default (no attribute) = olive (#808000), the original values above.
   ──────────────────────────────────────────────────────────────── */
html[data-accent="clay"],
html[data-accent="olive"] {
  --text-on-accent: #ffffff;
  --text-sky: #808000;
  --accent-sky-rgb: 128,128,0;
  --accent-sky-a100: rgba(128,128,0,1.0);
  --accent-sky-a95: rgba(128,128,0,0.95);
  --accent-sky-a90: rgba(128,128,0,0.90);
  --accent-sky-a80: rgba(128,128,0,.8);
  --accent-sky-a70: rgba(128,128,0,0.70);
  --accent-sky-a65: rgba(128,128,0,.65);
  --accent-sky-light: #808000;
  --accent-sky-light-rgb: 128,128,0;
  --accent-sky-light-a100: rgba(128,128,0,1.0);
  --accent-sky-light-a80: rgba(128,128,0,0.80);
  --accent-sky-light-a85: rgba(128,128,0,0.85);
}

/* Sidebar accent picker — olive (default, :root) / sky / orange / gold. */
html[data-accent="sky"] {
  --text-on-accent: #ffffff;
  --text-sky: #38BDF8;
  --accent-sky-rgb: 56,189,248;
  --accent-sky-a100: rgba(56,189,248,1.0);
  --accent-sky-a95: rgba(56,189,248,0.95);
  --accent-sky-a90: rgba(56,189,248,0.90);
  --accent-sky-a80: rgba(56,189,248,.8);
  --accent-sky-a70: rgba(56,189,248,0.70);
  --accent-sky-a65: rgba(56,189,248,.65);
  --accent-sky-light: #0EA5E9;
  --accent-sky-light-rgb: 14,165,233;
  --accent-sky-light-a100: rgba(14,165,233,1.0);
  --accent-sky-light-a80: rgba(14,165,233,0.80);
  --accent-sky-light-a85: rgba(14,165,233,0.85);
}

html[data-accent="orange"] {
  --text-on-accent: #ffffff;
  --text-sky: #D97757;
  --accent-sky-rgb: 217,119,87;
  --accent-sky-a100: rgba(217,119,87,1.0);
  --accent-sky-a95: rgba(217,119,87,0.95);
  --accent-sky-a90: rgba(217,119,87,0.90);
  --accent-sky-a80: rgba(217,119,87,.8);
  --accent-sky-a70: rgba(217,119,87,0.70);
  --accent-sky-a65: rgba(217,119,87,.65);
  --accent-sky-light: #C15F3C;
  --accent-sky-light-rgb: 193,95,60;
  --accent-sky-light-a100: rgba(193,95,60,1.0);
  --accent-sky-light-a80: rgba(193,95,60,0.80);
  --accent-sky-light-a85: rgba(193,95,60,0.85);
}

/* Brand logo mark (.sb-logo-img-light) sits on the accent-colored
   sidebar square; its SVG is hardcoded near-black (#0d0d14), which
   reads fine on the brighter default accents but is illegible on
   clay. Force it white only for clay via filter, same scoping as
   --text-on-accent above. */
.sb-logo-img-light {
  filter: brightness(0) invert(1);
}

html[data-accent="pink"] {
  --text-sky: #808000;
  --accent-sky-rgb: 128,128,0;
  --accent-sky-a100: rgba(128,128,0,1.0);
  --accent-sky-a95: rgba(128,128,0,0.95);
  --accent-sky-a90: rgba(128,128,0,0.90);
  --accent-sky-a80: rgba(128,128,0,.8);
  --accent-sky-a70: rgba(128,128,0,0.70);
  --accent-sky-a65: rgba(128,128,0,.65);
  --accent-sky-light: #808000;
  --accent-sky-light-rgb: 128,128,0;
  --accent-sky-light-a100: rgba(128,128,0,1.0);
  --accent-sky-light-a80: rgba(128,128,0,0.80);
  --accent-sky-light-a85: rgba(128,128,0,0.85);
}

html[data-accent="gold"] {
  --text-on-accent: #ffffff;
  --text-sky: #F9B91C;
  --accent-sky-rgb: 249,185,28;
  --accent-sky-a100: rgba(249,185,28,1.0);
  --accent-sky-a95: rgba(249,185,28,0.95);
  --accent-sky-a90: rgba(249,185,28,0.90);
  --accent-sky-a80: rgba(249,185,28,.8);
  --accent-sky-a70: rgba(249,185,28,0.70);
  --accent-sky-a65: rgba(249,185,28,.65);
  --accent-sky-light: #c6900a;
  --accent-sky-light-rgb: 198,144,10;
  --accent-sky-light-a100: rgba(198,144,10,1.0);
  --accent-sky-light-a80: rgba(198,144,10,0.80);
  --accent-sky-light-a85: rgba(198,144,10,0.85);
}