/* ==========================================================================
   THEME BRIDGE — single source of truth for the 12 named themes.
   Loaded by BOTH index.html (landing) and Yocial.html (dashboard).
   Each html[data-theme="X"] sets:
     - landing tokens: --bg, --bg-1..3, --line, --line-2, --line-3, --fg..--fg-5, --accent, --accent-soft, --accent-glow
     - dashboard tokens: --background, --surface, --surface-hover, --card, --card-surface, --card-surface-hover,
       --card-border, --card-border-hover, --border, --border-strong, --foreground, --foreground-muted,
       --foreground-subtle, --card-shadow, --card-shadow-hover, --accent-color
   ========================================================================== */

/* ---------- Defaults (dark family — used when no theme specified) ---------- */
html {
  /* landing */
  --bg: #000;
  --bg-1: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.16);
  --line-3: rgba(255,255,255,0.28);
  --fg: #fafafa;
  --fg-2: #e4e4e4;
  --fg-3: #b8b8b8;
  --fg-4: #888;
  --fg-5: #555;
  --accent: oklch(89% 0.20 110);
  --accent-soft: oklch(89% 0.20 110 / 0.18);
  --accent-glow: oklch(89% 0.20 110 / 0.45);
  /* dashboard */
  --background: #0a0a0b;
  --surface: #111113;
  --surface-hover: #17171a;
  --card: #111113;
  --card-surface: #0f0f11;
  --card-surface-hover: #15151a;
  --card-border: rgba(255,255,255,0.07);
  --card-border-hover: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --foreground: #ededee;
  --foreground-muted: rgba(237,237,238,0.62);
  --foreground-subtle: rgba(237,237,238,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --accent-color: #fff;
}

/* ---------- DARK family ---------- */
html[data-theme="onyx"] {
  --bg: #000; --bg-1: #0a0a0a; --bg-2: #121212; --bg-3: #1a1a1a;
  --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.16); --line-3: rgba(255,255,255,0.28);
  --fg: #fafafa; --fg-2: #e4e4e4; --fg-3: #b8b8b8; --fg-4: #888; --fg-5: #555;
  --accent: oklch(89% 0.20 110); --accent-soft: oklch(89% 0.20 110 / 0.18); --accent-glow: oklch(89% 0.20 110 / 0.45);
  --background: #000; --surface: #0a0a0a; --surface-hover: #121212;
  --card: #0a0a0a; --card-surface: #0a0a0a; --card-surface-hover: #121212;
  --card-border: rgba(255,255,255,0.07); --card-border-hover: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16);
  --foreground: #fafafa; --foreground-muted: rgba(250,250,250,0.62); --foreground-subtle: rgba(250,250,250,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --accent-color: oklch(89% 0.20 110);
}
html[data-theme="graphite"] {
  --bg: #18191c; --bg-1: #1f2024; --bg-2: #25262b; --bg-3: #2c2d33;
  --line: #2e2f36; --line-2: #3a3b43; --line-3: #50515b;
  --fg: #e8e8e8; --fg-2: #d4d4d4; --fg-3: #a8a8a8; --fg-4: #7a7a7a; --fg-5: #4d4d4d;
  --accent: oklch(92% 0.04 250); --accent-soft: oklch(92% 0.04 250 / 0.18); --accent-glow: oklch(92% 0.04 250 / 0.45);
  --background: #18191c; --surface: #1f2024; --surface-hover: #25262b;
  --card: #1f2024; --card-surface: #1f2024; --card-surface-hover: #25262b;
  --card-border: #2e2f36; --card-border-hover: #3a3b43;
  --border: #2e2f36; --border-strong: #3a3b43;
  --foreground: #e8e8e8; --foreground-muted: rgba(232,232,232,0.62); --foreground-subtle: rgba(232,232,232,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --accent-color: oklch(92% 0.04 250);
}
html[data-theme="midnight"] {
  --bg: #0a0d14; --bg-1: #0f131c; --bg-2: #141926; --bg-3: #1a2030;
  --line: #1c2334; --line-2: #2a3349; --line-3: #3d4763;
  --fg: #dde4f4; --fg-2: #c4ccdd; --fg-3: #97a0b5; --fg-4: #6a7388; --fg-5: #424b5d;
  --accent: oklch(78% 0.18 240); --accent-soft: oklch(78% 0.18 240 / 0.18); --accent-glow: oklch(78% 0.18 240 / 0.45);
  --background: #0a0d14; --surface: #0f131c; --surface-hover: #141926;
  --card: #0f131c; --card-surface: #0f131c; --card-surface-hover: #141926;
  --card-border: #1c2334; --card-border-hover: #2a3349;
  --border: #1c2334; --border-strong: #2a3349;
  --foreground: #dde4f4; --foreground-muted: rgba(221,228,244,0.62); --foreground-subtle: rgba(221,228,244,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  --card-shadow-hover: 0 10px 28px rgba(0,4,20,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --accent-color: oklch(78% 0.18 240);
}
html[data-theme="cobalt"] {
  --bg: #08091a; --bg-1: #0d0f24; --bg-2: #11142e; --bg-3: #181c3d;
  --line: #1c2244; --line-2: #2a325d; --line-3: #404a82;
  --fg: #cfd6ff; --fg-2: #b0bbf0; --fg-3: #8290cc; --fg-4: #5963a0; --fg-5: #353c6a;
  --accent: oklch(78% 0.20 260); --accent-soft: oklch(78% 0.20 260 / 0.18); --accent-glow: oklch(78% 0.20 260 / 0.45);
  --background: #08091a; --surface: #0d0f24; --surface-hover: #11142e;
  --card: #0d0f24; --card-surface: #0d0f24; --card-surface-hover: #11142e;
  --card-border: #1c2244; --card-border-hover: #2a325d;
  --border: #1c2244; --border-strong: #2a325d;
  --foreground: #cfd6ff; --foreground-muted: rgba(207,214,255,0.62); --foreground-subtle: rgba(207,214,255,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
  --card-shadow-hover: 0 10px 30px rgba(2,4,30,0.7), 0 1px 0 rgba(255,255,255,0.05) inset;
  --accent-color: oklch(78% 0.20 260);
}
html[data-theme="forest"] {
  --bg: #0a100c; --bg-1: #0e1612; --bg-2: #131c17; --bg-3: #18241d;
  --line: #1c2922; --line-2: #2a3a30; --line-3: #3e5446;
  --fg: #d8e6dc; --fg-2: #becdc1; --fg-3: #92a298; --fg-4: #677570; --fg-5: #424d48;
  --accent: oklch(85% 0.18 145); --accent-soft: oklch(85% 0.18 145 / 0.18); --accent-glow: oklch(85% 0.18 145 / 0.45);
  --background: #0a100c; --surface: #0e1612; --surface-hover: #131c17;
  --card: #0e1612; --card-surface: #0e1612; --card-surface-hover: #131c17;
  --card-border: #1c2922; --card-border-hover: #2a3a30;
  --border: #1c2922; --border-strong: #2a3a30;
  --foreground: #d8e6dc; --foreground-muted: rgba(216,230,220,0.62); --foreground-subtle: rgba(216,230,220,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  --card-shadow-hover: 0 8px 24px rgba(0,12,4,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --accent-color: oklch(85% 0.18 145);
}
html[data-theme="rosewood"] {
  --bg: #0e0a0a; --bg-1: #160f0f; --bg-2: #1d1414; --bg-3: #261919;
  --line: #2a1d1d; --line-2: #3b2929; --line-3: #553c3c;
  --fg: #e8d6d6; --fg-2: #cfbbbb; --fg-3: #a48d8d; --fg-4: #786666; --fg-5: #4d4040;
  --accent: oklch(78% 0.16 20); --accent-soft: oklch(78% 0.16 20 / 0.18); --accent-glow: oklch(78% 0.16 20 / 0.45);
  --background: #0e0a0a; --surface: #160f0f; --surface-hover: #1d1414;
  --card: #160f0f; --card-surface: #160f0f; --card-surface-hover: #1d1414;
  --card-border: #2a1d1d; --card-border-hover: #3b2929;
  --border: #2a1d1d; --border-strong: #3b2929;
  --foreground: #e8d6d6; --foreground-muted: rgba(232,214,214,0.62); --foreground-subtle: rgba(232,214,214,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  --card-shadow-hover: 0 8px 24px rgba(20,4,4,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --accent-color: oklch(78% 0.16 20);
}
html[data-theme="sand"] {
  --bg: #181612; --bg-1: #1f1c17; --bg-2: #25221c; --bg-3: #2c2820;
  --line: #2e2a22; --line-2: #3d3729; --line-3: #57503a;
  --fg: #e6dcc4; --fg-2: #cfc6b0; --fg-3: #a39c89; --fg-4: #777161; --fg-5: #4d493e;
  --accent: oklch(85% 0.16 75); --accent-soft: oklch(85% 0.16 75 / 0.18); --accent-glow: oklch(85% 0.16 75 / 0.45);
  --background: #181612; --surface: #1f1c17; --surface-hover: #25221c;
  --card: #1f1c17; --card-surface: #1f1c17; --card-surface-hover: #25221c;
  --card-border: #2e2a22; --card-border-hover: #3d3729;
  --border: #2e2a22; --border-strong: #3d3729;
  --foreground: #e6dcc4; --foreground-muted: rgba(230,220,196,0.62); --foreground-subtle: rgba(230,220,196,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  --card-shadow-hover: 0 8px 24px rgba(20,16,4,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --accent-color: oklch(85% 0.16 75);
}
html[data-theme="chrome"] {
  --bg: #1a1a1a; --bg-1: #222; --bg-2: #2a2a2a; --bg-3: #333;
  --line: #383838; --line-2: #484848; --line-3: #5e5e5e;
  --fg: #fafafa; --fg-2: #e0e0e0; --fg-3: #b0b0b0; --fg-4: #808080; --fg-5: #555;
  --accent: oklch(95% 0.02 250); --accent-soft: oklch(95% 0.02 250 / 0.18); --accent-glow: oklch(95% 0.02 250 / 0.45);
  --background: #1a1a1a; --surface: #222; --surface-hover: #2a2a2a;
  --card: #222; --card-surface: #222; --card-surface-hover: #2a2a2a;
  --card-border: #383838; --card-border-hover: #484848;
  --border: #383838; --border-strong: #484848;
  --foreground: #fafafa; --foreground-muted: rgba(250,250,250,0.62); --foreground-subtle: rgba(250,250,250,0.42);
  --card-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  --card-shadow-hover: 0 10px 30px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.06) inset;
  --accent-color: oklch(95% 0.02 250);
}

/* ---------- LIGHT family ---------- */
html[data-theme="ivory"] {
  --bg: #f7f5f0; --bg-1: #efece5; --bg-2: #e8e4dc; --bg-3: #ddd8cd;
  --line: #d4cfc2; --line-2: #b9b2a1; --line-3: #948c79;
  --fg: #0e0e0e; --fg-2: #1a1a1a; --fg-3: #4a4a4a; --fg-4: #6a6a6a; --fg-5: #b0a99a;
  --accent: oklch(52% 0.18 25); --accent-soft: oklch(52% 0.18 25 / 0.18); --accent-glow: oklch(52% 0.18 25 / 0.45);
  --background: #f7f5f0; --surface: #efece5; --surface-hover: #e8e4dc;
  --card: #ffffff; --card-surface: #ffffff; --card-surface-hover: #fafaf6;
  --card-border: #d4cfc2; --card-border-hover: #b9b2a1;
  --border: #d4cfc2; --border-strong: #b9b2a1;
  --foreground: #0e0e0e; --foreground-muted: rgba(14,14,14,0.62); --foreground-subtle: rgba(14,14,14,0.42);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 8px 20px rgba(0,0,0,0.08);
  --accent-color: oklch(52% 0.18 25);
}
html[data-theme="bone"] {
  --bg: #ffffff; --bg-1: #f5f5f5; --bg-2: #ececec; --bg-3: #e0e0e0;
  --line: #d8d8d8; --line-2: #b8b8b8; --line-3: #8a8a8a;
  --fg: #050505; --fg-2: #161616; --fg-3: #404040; --fg-4: #6a6a6a; --fg-5: #aaaaaa;
  --accent: oklch(50% 0.20 280); --accent-soft: oklch(50% 0.20 280 / 0.18); --accent-glow: oklch(50% 0.20 280 / 0.45);
  --background: #ffffff; --surface: #f5f5f5; --surface-hover: #ececec;
  --card: #ffffff; --card-surface: #ffffff; --card-surface-hover: #f7f7f7;
  --card-border: #d8d8d8; --card-border-hover: #b8b8b8;
  --border: #d8d8d8; --border-strong: #b8b8b8;
  --foreground: #050505; --foreground-muted: rgba(5,5,5,0.62); --foreground-subtle: rgba(5,5,5,0.42);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 8px 20px rgba(0,0,0,0.08);
  --accent-color: oklch(50% 0.20 280);
}
html[data-theme="pearl"] {
  --bg: #fafaf9; --bg-1: #f0eff0; --bg-2: #e6e6e7; --bg-3: #d8d9da;
  --line: #d2d3d5; --line-2: #b2b4b8; --line-3: #80838a;
  --fg: #0c0d10; --fg-2: #1a1c20; --fg-3: #44464d; --fg-4: #6a6c73; --fg-5: #adb0b6;
  --accent: oklch(55% 0.16 195); --accent-soft: oklch(55% 0.16 195 / 0.18); --accent-glow: oklch(55% 0.16 195 / 0.45);
  --background: #fafaf9; --surface: #f0eff0; --surface-hover: #e6e6e7;
  --card: #ffffff; --card-surface: #ffffff; --card-surface-hover: #f7f7f7;
  --card-border: #d2d3d5; --card-border-hover: #b2b4b8;
  --border: #d2d3d5; --border-strong: #b2b4b8;
  --foreground: #0c0d10; --foreground-muted: rgba(12,13,16,0.62); --foreground-subtle: rgba(12,13,16,0.42);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 8px 20px rgba(0,0,0,0.08);
  --accent-color: oklch(55% 0.16 195);
}
html[data-theme="parchment"] {
  --bg: #f3eddf; --bg-1: #ebe4d2; --bg-2: #e2dac5; --bg-3: #d6cdb4;
  --line: #c8be9f; --line-2: #a89d80; --line-3: #756c54;
  --fg: #1a160e; --fg-2: #2a241a; --fg-3: #524938; --fg-4: #75694f; --fg-5: #9b8e6e;
  --accent: oklch(48% 0.18 35); --accent-soft: oklch(48% 0.18 35 / 0.18); --accent-glow: oklch(48% 0.18 35 / 0.45);
  --background: #f3eddf; --surface: #ebe4d2; --surface-hover: #e2dac5;
  --card: #faf5e8; --card-surface: #faf5e8; --card-surface-hover: #f3ecd9;
  --card-border: #c8be9f; --card-border-hover: #a89d80;
  --border: #c8be9f; --border-strong: #a89d80;
  --foreground: #1a160e; --foreground-muted: rgba(26,22,14,0.62); --foreground-subtle: rgba(26,22,14,0.42);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.05);
  --card-shadow-hover: 0 8px 20px rgba(60,40,10,0.10);
  --accent-color: oklch(48% 0.18 35);
}

/* Light themes need light scrollbar treatment for dashboard webkit scroll */
html[data-theme="ivory"] ::-webkit-scrollbar-thumb,
html[data-theme="bone"]  ::-webkit-scrollbar-thumb,
html[data-theme="pearl"] ::-webkit-scrollbar-thumb,
html[data-theme="parchment"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); }
html[data-theme="ivory"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="bone"]  ::-webkit-scrollbar-thumb:hover,
html[data-theme="pearl"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="parchment"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.20); }