/* ===========================================================================
   TOKENS — the single source of truth for the whole site
   Values carried over unchanged from the original design system; everything
   that used to be a hardcoded hex somewhere now has a name here.
   =========================================================================== */

:root {
  /* --- Surfaces & text (light) --- */
  --bg-primary: #FAFBFE;
  --bg-secondary: #F0F4F8;
  --bg-tertiary: #E8EDF3;
  --text-primary: #1A1D2E;
  --text-secondary: #5A6178;
  --text-tertiary: #8B92A8;

  /* --- Accent --- */
  --accent: #5BA4E6;
  --accent-hover: #4A93D5;
  --accent-glow: rgba(91, 164, 230, 0.15);
  --accent-subtle: rgba(91, 164, 230, 0.08);
  --accent-contrast: #fff;

  /* --- Glass / cards --- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(91, 164, 230, 0.18);
  --card-bg: rgba(255, 255, 255, 0.6);
  --card-border: rgba(91, 164, 230, 0.12);
  --card-shadow: 0 4px 24px rgba(91, 164, 230, 0.08);
  --card-hover-shadow: 0 8px 40px rgba(91, 164, 230, 0.16);
  --divider: rgba(91, 164, 230, 0.1);
  --selection-bg: #C5DEF5;
  --toggle-color: #5A6178;

  /* --- Semantic status colours ---
     These were previously scattered as #4caf50 / #ef5350 / #E6A34D literals
     across five games and two inline styles. */
  --success: #2E9E63;
  --success-soft: rgba(46, 158, 99, 0.16);
  --danger: #E05252;
  --danger-soft: rgba(224, 82, 82, 0.16);
  --warning: #D9922E;
  --warning-soft: rgba(217, 146, 46, 0.16);

  /* --- Per-game accents (also drive the card gradients) --- */
  --game-reaction: #5BA4E6;
  --game-keyboard: #E667A0;
  --game-trading: #6BC4A6;
  --game-typing: #E6A34D;
  --game-rhythm: #9B6BE6;
  --game-aim: #E85D9C;
  --game-platformer: #4EB58F;
  --game-bughunt: #6C8BEA;

  /* Default accent for any game surface; each view overrides it. */
  --game-accent: var(--accent);
  --game-accent-soft: rgba(91, 164, 230, 0.16);

  /* --- Arena surface ---
     One "inside a game" surface instead of five different blacks. It is a
     panel on the page, not a hole punched through it: in light mode it is a
     light card that belongs beside the game cards, in dark mode it deepens.
     Every game reads its ink from here so nothing assumes a dark background. */
  --arena-bg: #EEF3FA;
  --arena-bg-alt: #F8FAFD;
  --arena-grid: rgba(26, 29, 46, 0.06);
  --arena-ink: #1A1D2E;
  --arena-ink-dim: #5A6178;
  --arena-line: rgba(26, 29, 46, 0.1);
  --arena-chip: rgba(255, 255, 255, 0.75);
  --arena-chip-alt: rgba(26, 29, 46, 0.05);
  --arena-border: var(--card-border);
  --arena-shadow: var(--card-shadow);
  --hud-bg: rgba(255, 255, 255, 0.66);
  --hud-ink: #5A6178;
  --scrim: rgba(240, 244, 248, 0.82);

  /* --- Syntax tinting (Bug Hunt) --- */
  --syn-kw: #8E3FBE;
  --syn-str: #2C7A46;
  --syn-num: #B4531B;
  --syn-fn: #1F5FA9;
  --syn-com: #8B92A8;

  /* --- Signal colours (reaction game traffic light) --- */
  --signal-off: #232838;
  --signal-red: #FF3B30;
  --signal-yellow: #FFCC00;
  --signal-green: #34E37B;

  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', ui-monospace, monospace;

  /* --- Spacing / layout --- */
  --section-padding: 120px 24px;
  --container-max: 1080px;
  --nav-height: 64px;

  /* --- Motion --- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Radii --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* --- Z-index scale (was ad-hoc: 5, 10, 99, 100, 101, 1000, 10000) --- */
  --z-arena: 1;
  --z-arena-ui: 5;
  --z-overlay: 40;
  --z-chrome: 100;
  --z-nav: 1000;
  --z-toast: 1200;
  --z-exit: 1400;
}

[data-theme="dark"] {
  --bg-primary: #0F1117;
  --bg-secondary: #1A1D27;
  --bg-tertiary: #242836;
  --text-primary: #E8ECF4;
  --text-secondary: #8B92A8;
  --text-tertiary: #5A6178;

  --accent: #6BB3F0;
  --accent-hover: #7EC0F7;
  --accent-glow: rgba(107, 179, 240, 0.12);
  --accent-subtle: rgba(107, 179, 240, 0.06);

  --glass-bg: rgba(15, 17, 23, 0.78);
  --glass-border: rgba(107, 179, 240, 0.12);
  --card-bg: rgba(26, 29, 39, 0.6);
  --card-border: rgba(107, 179, 240, 0.1);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 8px 40px rgba(107, 179, 240, 0.12);
  --divider: rgba(107, 179, 240, 0.08);
  --selection-bg: #2A3A50;
  --toggle-color: #8B92A8;

  --success: #46C783;
  --success-soft: rgba(70, 199, 131, 0.18);
  --danger: #FF6B6B;
  --danger-soft: rgba(255, 107, 107, 0.18);
  --warning: #F0B44C;
  --warning-soft: rgba(240, 180, 76, 0.18);

  --game-reaction: #6BB3F0;
  --game-aim: #F07AB0;
  --game-platformer: #5FCCA2;
  --game-bughunt: #8AA5F5;

  --arena-bg: #10141F;
  --arena-bg-alt: #171D2C;
  --arena-grid: rgba(255, 255, 255, 0.05);
  --arena-ink: #E8ECF4;
  --arena-ink-dim: #8B92A8;
  --arena-line: rgba(255, 255, 255, 0.1);
  --arena-chip: rgba(255, 255, 255, 0.06);
  --arena-chip-alt: rgba(255, 255, 255, 0.12);
  --arena-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  --hud-bg: rgba(10, 13, 22, 0.66);
  --hud-ink: #8B92A8;
  --scrim: rgba(10, 13, 22, 0.8);

  --syn-kw: #C792EA;
  --syn-str: #C3E88D;
  --syn-num: #F78C6C;
  --syn-fn: #82AAFF;
  --syn-com: #5A6178;

  --signal-off: #14161F;
}

/* --- Per-view accent binding ---------------------------------------------
   One rule per game. Everything downstream (card gradient, arena glow, HUD
   rule, note colours, leaderboard tab, focus rings) reads --game-accent, so a
   game has exactly one colour identity across the entire site. */
[data-game="reaction"]   { --game-accent: var(--game-reaction); }
[data-game="keyboard"]   { --game-accent: var(--game-keyboard); }
[data-game="trading"]    { --game-accent: var(--game-trading); }
[data-game="typing"]     { --game-accent: var(--game-typing); }
[data-game="rhythm"]     { --game-accent: var(--game-rhythm); }
[data-game="aim"]        { --game-accent: var(--game-aim); }
[data-game="platformer"] { --game-accent: var(--game-platformer); }
[data-game="bughunt"]    { --game-accent: var(--game-bughunt); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
  }
}