/* ==========================================================================
   Crowncade tokens, Direction B "Cabinet Row" (approved by Jared 2026-09-23)
   Canonical file: crowncade/static/css/tokens.css. Load it BEFORE crowncade.css.
   The dev-portal build copies it in (one source; agreed with Gilt).
   Values are OKLCH, with the sRGB hex in each comment. Contrast was checked with colorkit (APCA Lc):
     body text >= 75, meta text >= 60, marquee ink on marquee colors >= 60.
   Layers: 1 primitives -> 2 semantic -> 3 components (cabinet, marquee, tape) -> 4 legacy aliases.
   Rules: components use semantic/component tokens only, never primitives. Magenta means "in development".
   Gold means reward/CTA (coins, badges, XP). Cyan is the interactive/navigation color.
   ========================================================================== */

:root {
  /* ---------- 1. Primitives ---------- */
  /* Night: arcade-carpet purple-black (hue 301) */
  --night-950: oklch(0.119 0.022 301);   /* #07040c  screen bezels, cabinet feet */
  --night-900: oklch(0.153 0.034 301);   /* #0e0818  page background */
  --night-850: oklch(0.180 0.040 301);   /* #150d20 */
  --night-800: oklch(0.201 0.042 301);   /* #1a1126  cabinet body */
  --night-750: oklch(0.240 0.057 301);   /* #241836  cabinet top / raised */
  --night-700: oklch(0.290 0.060 301);   /* #312444  control-panel highlight, borders */
  --night-600: oklch(0.360 0.060 301);   /* #423558  strong borders */
  --night-500: oklch(0.460 0.050 301);   /* #5d5270  disabled */

  /* Ink: text on night (hue 303) */
  --ink-50:  oklch(0.958 0.020 303);     /* #f4eefd  Lc 98 on night-900 */
  --ink-200: oklch(0.860 0.030 303);     /* #d5cde2  Lc 78: body copy */
  --ink-300: oklch(0.769 0.043 303);     /* #b9aecb  Lc 61: meta only, never paragraphs */
  --ink-400: oklch(0.660 0.045 303);     /* #978ca9  Lc 43: placeholders, large text only */
  --ink-on-light: oklch(0.110 0.030 301);/* #0a0512  text on marquees, buttons, tape */

  /* Neon: full-strength for glows, rims, headlines, and fills behind dark ink */
  --neon-cyan-500:    oklch(0.837 0.137 204);  /* #27e3f2 */
  --neon-cyan-300:    oklch(0.880 0.100 204);  /* #80ebf6  cyan text on dark (Lc 85) */
  --neon-cyan-700:    oklch(0.580 0.100 204);  /* #008b95  pressed shadow */
  --neon-gold-500:    oklch(0.856 0.158 85);   /* #ffc63d */
  --neon-gold-700:    oklch(0.620 0.130 80);   /* #ae7c00  pressed shadow */
  --neon-magenta-500: oklch(0.697 0.225 354);  /* #ff4fa8  rims + large type only (Lc 46) */
  --neon-magenta-300: oklch(0.800 0.140 353);  /* #ff99c5  magenta text on dark (Lc 64) */
  --neon-violet-500:  oklch(0.611 0.229 291);  /* #8a5cff  rims/glows only */
  --neon-green-500:   oklch(0.793 0.180 154);  /* #3ddc84 */
  --neon-orange-500:  oklch(0.725 0.182 46);   /* #ff7a2f */
  --neon-red-500:     oklch(0.653 0.235 19);   /* #ff3355  coin-slot lamps, errors */

  /* Marquee fills: every one sits at L >= 0.77, so dark pixel text passes Lc >= 60 */
  --marquee-cyan:    oklch(0.837 0.137 204);   /* #27e3f2  Lc 78 */
  --marquee-gold:    oklch(0.856 0.158 85);    /* #ffc63d  Lc 77 */
  --marquee-magenta: oklch(0.770 0.158 353);   /* #ff86bd  Lc 60 */
  --marquee-violet:  oklch(0.770 0.127 291);   /* #b5a5ff  Lc 62 */
  --marquee-green:   oklch(0.793 0.180 154);   /* #3ddc84  Lc 69 */
  --marquee-orange:  oklch(0.770 0.145 46);    /* #ff9460  Lc 61 */
  --marquee-red:     oklch(0.770 0.137 18);    /* #ff8e93  Lc 61 */
  --marquee-blue:    oklch(0.770 0.119 255);   /* #7fb7ff  Lc 63 */
  --marquee-lime:    oklch(0.770 0.180 125);   /* #9ac72b  Lc 66 */
  --marquee-teal:    oklch(0.770 0.140 180);   /* #00d1b8  Lc 67 */

  /* ---------- 2. Semantic ---------- */
  --surface-page:    var(--night-900);
  --surface-sunken:  var(--night-950);
  --surface-raised:  var(--night-800);
  --surface-raised-2:var(--night-750);
  --surface-hover:   var(--night-700);
  --border-subtle:   var(--night-700);
  --border-strong:   var(--night-600);

  --text-strong:     var(--ink-50);
  --text-body:       var(--ink-200);
  --text-meta:       var(--ink-300);
  --text-faint:      var(--ink-400);
  --text-on-accent:  var(--ink-on-light);

  --accent-interactive: var(--neon-cyan-500);   /* nav, links, focus */
  --accent-link-text:   var(--neon-cyan-300);
  --accent-reward:      var(--neon-gold-500);   /* CTAs, coins, badges, XP */
  --accent-dev:         var(--neon-magenta-500);/* "in development" everywhere */
  --accent-dev-text:    var(--neon-magenta-300);
  --accent-danger:      var(--neon-red-500);
  --focus-ring: 0 0 0 3px var(--surface-page), 0 0 0 5px var(--neon-cyan-500);

  /* Game build status (Workshop). Stamp and tape copy come from games.json status. */
  --status-playable:  var(--neon-gold-500);   /* "PLAYABLE ALPHA": hazard tape */
  --status-prototype: var(--neon-gold-500);   /* "PROTOTYPE": hazard tape */
  --status-concept:   var(--night-500);       /* "CONCEPT ART": grey tape, cabinet unlit */

  /* Type */
  --font-display: 'Press Start 2P', monospace;   /* 9px minimum, and only in caps */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-marquee: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* text fallback ONLY: real marquees use the bespoke SVG logos in static/img/marquee/ (900 italic, uppercase) */
  --fs-marquee-sm: 0.5625rem;  /* 9px:  small cabinets */
  --fs-marquee:    0.625rem;   /* 10px */
  --fs-eyebrow:    0.6875rem;  /* 11px pixel eyebrows / nav */
  --fs-h2-pixel:   0.9375rem;  /* 15px section titles */
  --fs-hero-pixel: clamp(1.75rem, 1rem + 2.6vw, 2.75rem); /* 28 -> 44px */
  --fs-body-sm: 0.875rem;      /* 14px */
  --fs-body:    1rem;
  --fs-lead:    1.125rem;      /* 18px */
  --lh-body: 1.5;

  /* Space (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --gutter: clamp(16px, 2.5vw, 32px);

  --radius-sm: 4px;
  --radius: 8px;
  --radius-crt: 10px / 14px;     /* the curved CRT corner */
  --marquee-h: 100px;            /* floor cabinets; hero 140px, workshop 120px, phone grid 80px */
  --marquee-h-hero: 140px;
  --marquee-h-workshop: 120px;
  --marquee-h-phone: 80px;

  --glow-sm: 0 0 8px;            /* usage: box-shadow: var(--glow-sm) var(--c) */
  --glow-md: 0 0 22px;

  /* ---------- 3. Components ---------- */
  /* Cabinet. Set --c on each .cab from the genre map below. */
  --cab-body:      var(--night-800);
  --cab-top:       var(--night-750);
  --cab-bezel:     var(--night-950);
  --cab-panel-hi:  var(--night-700);
  --cab-panel-lo:  var(--night-750);
  --cab-rim:       6px;            /* T-molding side width (4px under 480px) */
  --cab-side-art:  repeating-linear-gradient(160deg, var(--c) 0 8px, transparent 8px 16px);
  --crt-scanlines: repeating-linear-gradient(0deg, color-mix(in oklch, black 33%, transparent) 0 1px, transparent 1px 3px);
  --crt-glare:     linear-gradient(125deg, color-mix(in oklch, white 12%, transparent) 0, transparent 30%);
  --coin-lamp:     var(--neon-red-500);
  --btn-coin-bg:   var(--neon-gold-500);
  --btn-coin-shadow: 0 5px 0 var(--neon-gold-700);

  /* Header marquee bulbs */
  --bulb-on:  var(--neon-gold-500);
  --bulb-off: oklch(0.400 0.070 80);   /* #5a4310 */
  --bulb-gap: 22px;

  /* Hazard tape */
  --tape-a: var(--neon-gold-500);
  --tape-b: oklch(0.180 0.030 80);     /* #1a1000 */
  --tape: repeating-linear-gradient(45deg, var(--tape-a) 0 16px, var(--tape-b) 16px 32px);

  /* Genre -> marquee color (game.json "genre" slug). Unknown genre falls back to cyan. */
  --genre-action: var(--marquee-red);
  --genre-puzzle: var(--marquee-violet);
  --genre-platformer: var(--marquee-green);
  --genre-shooter: var(--marquee-orange);
  --genre-racing: var(--marquee-cyan);
  --genre-sports: var(--marquee-lime);
  --genre-card: var(--marquee-teal);
  --genre-idle: var(--marquee-gold);
  --genre-tower-defense: var(--marquee-blue);
  --genre-retro: var(--marquee-magenta);
  --genre-roguelike: var(--marquee-violet);
  --genre-survival: var(--marquee-orange);
  --genre-rhythm: var(--marquee-magenta);
  --genre-word: var(--marquee-cyan);
  --genre-physics: var(--marquee-blue);
  --genre-sandbox: var(--marquee-lime);
  --genre-horror: var(--marquee-red);
  --genre-educational: var(--marquee-teal);
  --genre-default: var(--marquee-cyan);

  /* ---------- 4. Legacy aliases (crowncade.css names -> new tokens) ----------
     Gilt migrates rules to the semantic names above, then deletes this block.
     Values shift on purpose: the new night is the carpet purple-black, not blue-black. */
  --bg-dark: var(--surface-page);
  --bg-sidebar: var(--night-850);
  --bg-card: var(--surface-raised);
  --bg-card-hover: var(--surface-hover);
  --bg-input: var(--surface-sunken);
  --bg-surface: var(--night-850);
  --border-color: var(--border-subtle);
  --border-glow: var(--border-strong);
  --text-primary: var(--text-strong);
  --text-secondary: var(--text-body);
  --text-muted: var(--text-meta);
  --text-dim: var(--text-faint);
  --neon-cyan: var(--neon-cyan-500);
  --neon-magenta: var(--neon-magenta-500);
  --neon-gold: var(--neon-gold-500);
  --neon-green: var(--neon-green-500);
  --neon-purple: var(--neon-violet-500);
  --neon-orange: var(--neon-orange-500);
  --neon-red: var(--neon-red-500);
  --neon-cyan-tint-1: var(--neon-cyan-300);
  --neon-cyan-tint-2: oklch(0.920 0.070 204);
  --font-pixel: var(--font-display);
  /* unchanged, owned by crowncade.css: --tier-1..5, --medal-*, --brand-*, --bg-game-*, --sidebar-width, --header-height, --radius* */
}

@media (max-width: 480px) {
  :root { --cab-rim: 4px; --bulb-gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --bulb-chase: none; }  /* the bulb chaser animation must key off this */
}