/* ============================================================
   INVA DESIGN SYSTEM — tokens.css (single source of truth)
   Themes: midnight-gold (default) / polaris / aurora
   See DESIGN_SYSTEM.md §2–§4. Loaded BEFORE all other CSS.
   ============================================================ */

/* ---------- THEME: midnight-gold (default, also bare :root) ---------- */
:root, :root[data-theme="midnight-gold"] {
  --surface-0: #07090d;
  --surface-1: #0d1016;
  --surface-2: #13171f;
  --surface-3: #1a1f2a;
  --ink-1: #eef0f4;
  --ink-2: #a9afba;
  --ink-3: #646c79;
  --accent: #e6b157;
  --accent-hi: #f5cd86;
  --accent-deep: #b9863a;
  --accent-ink: #1a1205;
  --accent-soft: rgba(230, 177, 87, 0.12);
  --accent-line: rgba(230, 177, 87, 0.28);
  --positive: #6fc28b;  --positive-soft: rgba(111, 194, 139, 0.12);
  --caution:  #e7c163;  --caution-soft:  rgba(231, 193, 99, 0.12);
  --negative: #e07b6e;  --negative-soft: rgba(224, 123, 110, 0.12);
  --info:     #7fa9dd;  --info-soft:     rgba(127, 169, 221, 0.12);
  --border-1: rgba(230, 177, 87, 0.10);
  --border-2: rgba(230, 177, 87, 0.22);
  --ring: rgba(230, 177, 87, 0.45);
  --glow-accent: 0 0 32px rgba(230, 177, 87, 0.18);
  --chart-1: #e6b157; --chart-2: #7fa9dd; --chart-3: #6fc28b;
  --chart-4: #c08bd9; --chart-5: #e07b6e;
  /* RGB channels for alpha tints: rgba(var(--accent-rgb), .14) */
  --accent-rgb: 230, 177, 87;
  --positive-rgb: 111, 194, 139;
  --caution-rgb: 231, 193, 99;
  --negative-rgb: 224, 123, 110;
  --info-rgb: 127, 169, 221;
  --ink-rgb: 238, 240, 244;
}

/* ---------- THEME: polaris ---------- */
:root[data-theme="polaris"] {
  --surface-0: #080a0f;
  --surface-1: #0e1219;
  --surface-2: #151a24;
  --surface-3: #1d2431;
  --ink-1: #edf1f7;
  --ink-2: #a4adbd;
  --ink-3: #5f6878;
  --accent: #82b8e8;
  --accent-hi: #b6d8f5;
  --accent-deep: #4f87b9;
  --accent-ink: #06121f;
  --accent-soft: rgba(130, 184, 232, 0.12);
  --accent-line: rgba(130, 184, 232, 0.28);
  --positive: #74c79a;  --positive-soft: rgba(116, 199, 154, 0.12);
  --caution:  #e3c272;  --caution-soft:  rgba(227, 194, 114, 0.12);
  --negative: #e2837a;  --negative-soft: rgba(226, 131, 122, 0.12);
  --info:     #9aa8e8;  --info-soft:     rgba(154, 168, 232, 0.12);
  --border-1: rgba(130, 184, 232, 0.10);
  --border-2: rgba(130, 184, 232, 0.22);
  --ring: rgba(130, 184, 232, 0.45);
  --glow-accent: 0 0 32px rgba(130, 184, 232, 0.18);
  --chart-1: #82b8e8; --chart-2: #74c79a; --chart-3: #e3c272;
  --chart-4: #c08bd9; --chart-5: #e2837a;
  --accent-rgb: 130, 184, 232;
  --positive-rgb: 116, 199, 154;
  --caution-rgb: 227, 194, 114;
  --negative-rgb: 226, 131, 122;
  --info-rgb: 154, 168, 232;
  --ink-rgb: 237, 241, 247;
}

/* ---------- THEME: aurora ---------- */
:root[data-theme="aurora"] {
  --surface-0: #06100f;
  --surface-1: #0a1719;
  --surface-2: #0f1f23;
  --surface-3: #15292e;
  --ink-1: #ecf3f1;
  --ink-2: #9fb0ac;
  --ink-3: #5c6c69;
  --accent: #4fd6ae;
  --accent-hi: #8ceecf;
  --accent-deep: #2da381;
  --accent-ink: #04150f;
  --accent-soft: rgba(79, 214, 174, 0.12);
  --accent-line: rgba(79, 214, 174, 0.28);
  --positive: #6fcf8e;  --positive-soft: rgba(111, 207, 142, 0.12);
  --caution:  #e5c46a;  --caution-soft:  rgba(229, 196, 106, 0.12);
  --negative: #e57f73;  --negative-soft: rgba(229, 127, 115, 0.12);
  --info:     #6ec3e8;  --info-soft:     rgba(110, 195, 232, 0.12);
  --border-1: rgba(79, 214, 174, 0.10);
  --border-2: rgba(79, 214, 174, 0.22);
  --ring: rgba(79, 214, 174, 0.45);
  --glow-accent: 0 0 32px rgba(79, 214, 174, 0.18);
  --chart-1: #4fd6ae; --chart-2: #6ec3e8; --chart-3: #e5c46a;
  --chart-4: #b591e3; --chart-5: #e57f73;
  --accent-rgb: 79, 214, 174;
  --positive-rgb: 111, 207, 142;
  --caution-rgb: 229, 196, 106;
  --negative-rgb: 229, 127, 115;
  --info-rgb: 110, 195, 232;
  --ink-rgb: 236, 243, 241;
}

/* ---------- THEME: obsidian-platinum (PREMIUM) ---------- */
:root[data-theme="obsidian-platinum"] {
  --surface-0: #04050a;
  --surface-1: #0a0b12;
  --surface-2: #101220;
  --surface-3: #161a28;
  --ink-1: #e8ecf5;
  --ink-2: #b0b6c7;
  --ink-3: #6f7889;
  --accent: #d4d9e6;
  --accent-hi: #f0f3fa;
  --accent-deep: #8a8fa0;
  --accent-ink: #050608;
  --accent-soft: rgba(212, 217, 230, 0.12);
  --accent-line: rgba(212, 217, 230, 0.28);
  --positive: #7dd4a8;  --positive-soft: rgba(125, 212, 168, 0.12);
  --caution:  #f0d97d;  --caution-soft:  rgba(240, 217, 125, 0.12);
  --negative: #f09080;  --negative-soft: rgba(240, 144, 128, 0.12);
  --info:     #8fbfef;  --info-soft:     rgba(143, 191, 239, 0.12);
  --border-1: rgba(212, 217, 230, 0.10);
  --border-2: rgba(212, 217, 230, 0.22);
  --ring: rgba(212, 217, 230, 0.45);
  --glow-accent: 0 0 32px rgba(212, 217, 230, 0.18);
  --chart-1: #d4d9e6; --chart-2: #8fbfef; --chart-3: #7dd4a8;
  --chart-4: #d4a8e8; --chart-5: #f09080;
  --accent-rgb: 212, 217, 230;
  --positive-rgb: 125, 212, 168;
  --caution-rgb: 240, 217, 125;
  --negative-rgb: 240, 144, 128;
  --info-rgb: 143, 191, 239;
  --ink-rgb: 232, 236, 245;
}

/* ---------- THEME: quantum-gold (PREMIUM) ---------- */
:root[data-theme="quantum-gold"] {
  --surface-0: #060710;
  --surface-1: #0c1219;
  --surface-2: #121a28;
  --surface-3: #1a2334;
  --ink-1: #f5f7fb;
  --ink-2: #c4d0e8;
  --ink-3: #748099;
  --accent: #ffd700;
  --accent-hi: #ffeb3b;
  --accent-deep: #ccaa00;
  --accent-ink: #1a1400;
  --accent-soft: rgba(255, 215, 0, 0.12);
  --accent-line: rgba(255, 215, 0, 0.28);
  --positive: #8ef48f;  --positive-soft: rgba(142, 244, 143, 0.12);
  --caution:  #ffd700;  --caution-soft:  rgba(255, 215, 0, 0.12);
  --negative: #ff8a6e;  --negative-soft: rgba(255, 138, 110, 0.12);
  --info:     #5eb3ff;  --info-soft:     rgba(94, 179, 255, 0.12);
  --border-1: rgba(255, 215, 0, 0.10);
  --border-2: rgba(255, 215, 0, 0.22);
  --ring: rgba(255, 215, 0, 0.45);
  --glow-accent: 0 0 32px rgba(255, 215, 0, 0.18);
  --chart-1: #ffd700; --chart-2: #5eb3ff; --chart-3: #8ef48f;
  --chart-4: #ff8f3e; --chart-5: #ff8a6e;
  --accent-rgb: 255, 215, 0;
  --positive-rgb: 142, 244, 143;
  --caution-rgb: 255, 215, 0;
  --negative-rgb: 255, 138, 110;
  --info-rgb: 94, 179, 255;
  --ink-rgb: 245, 247, 251;
}

/* ---------- THEME: void-cyan (PREMIUM) ---------- */
:root[data-theme="void-cyan"] {
  --surface-0: #050d12;
  --surface-1: #0a1520;
  --surface-2: #101b2a;
  --surface-3: #162a38;
  --ink-1: #e6f3f9;
  --ink-2: #a0c5dd;
  --ink-3: #5a7a94;
  --accent: #00d9ff;
  --accent-hi: #1effff;
  --accent-deep: #00a8cc;
  --accent-ink: #051f2a;
  --accent-soft: rgba(0, 217, 255, 0.12);
  --accent-line: rgba(0, 217, 255, 0.28);
  --positive: #6fe3c3;  --positive-soft: rgba(111, 227, 195, 0.12);
  --caution:  #f5d361;  --caution-soft:  rgba(245, 211, 97, 0.12);
  --negative: #ff7f73;  --negative-soft: rgba(255, 127, 115, 0.12);
  --info:     #00d9ff;  --info-soft:     rgba(0, 217, 255, 0.12);
  --border-1: rgba(0, 217, 255, 0.10);
  --border-2: rgba(0, 217, 255, 0.22);
  --ring: rgba(0, 217, 255, 0.45);
  --glow-accent: 0 0 32px rgba(0, 217, 255, 0.18);
  --chart-1: #00d9ff; --chart-2: #6fe3c3; --chart-3: #f5d361;
  --chart-4: #ff7f73; --chart-5: #00d9ff;
  --accent-rgb: 0, 217, 255;
  --positive-rgb: 111, 227, 195;
  --caution-rgb: 245, 211, 97;
  --negative-rgb: 255, 127, 115;
  --info-rgb: 0, 217, 255;
  --ink-rgb: 230, 243, 249;
}

/* ---------- FOUNDATIONS (shared across themes) ---------- */
:root {
  /* Spacing — 4/8-pt scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* Typography */
  --font-display: 'Manrope', 'Inter', sans-serif;
  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px;
  --fs-lg: 16px;  --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.3);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55), 0 32px 80px rgba(0,0,0,0.4);

  /* Motion */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-index scale — rvfs 99990 < logbook 99999 is load-bearing */
  --z-nav: 1000;
  --z-dropdown: 1100;
  --z-toast: 9000;
  --z-modal: 99000;
  --z-review: 99990;
  --z-logbook: 99999;

  /* Theme-picker swatch dots (fixed per theme, not theme-reactive) */
  --swatch-midnight-gold: #e6b157;
  --swatch-polaris: #82b8e8;
  --swatch-aurora: #4fd6ae;
  --swatch-obsidian-platinum: #d4d9e6;
  --swatch-quantum-gold: #ffd700;
  --swatch-void-cyan: #00d9ff;

  /* Medal colors — theme-independent (leaderboard gold/silver/bronze) */
  --db-gold:   #e6c46a;
  --db-silver: #c9ccd1;
  --db-bronze: #c79363;
}

/* Legacy alias shim removed in Phase 5 — all CSS/JS/HTML consume the
   semantic tokens above directly. Do not reintroduce old token names. */