/* =============================================================================
   ROLLER VS NYÚL — Design Tokens
   Values extracted from DoomHud.tsx / MenuScreen.tsx
   ============================================================================= */

:root {
  /* Core palette */
  --void-black:   #000000;
  --steel-dark:   #1a1a1a;
  --steel-darker: #0d0d0d;
  --steel-border: #5a2510;
  --hazard-amber: #fbbf24;
  --amber-deep:   #f59e0b;
  --amber-dim:    #e7c98a;
  --amber-pale:   #fde68a;
  --blood-orange: #f97316;
  --demon-red:    #ef4444;
  --toxic-green:  #00ff88;
  --bone-grey:    #d4d4d4;
  --bone-dim:     #d6d3d1;

  /* Glow shadows (exact from DoomHud.tsx) */
  --glow-amber:       0 0 8px rgba(255,200,0,0.35), 0 2px 0 rgba(0,0,0,0.8);
  --glow-amber-hot:   0 0 18px rgba(245,158,11,0.85), 0 2px 0 #000;
  --glow-orange:      0 0 8px rgba(249,115,22,0.8), 0 2px 0 #000;
  --glow-red:         0 0 12px rgba(239,68,68,0.9);
  --glow-green:       0 0 8px rgba(0,255,136,0.7);
  --glow-button-hover: drop-shadow(0 0 14px rgba(255,90,0,0.9));

  /* Typography */
  --font-hero:   'Rubik Mono One', 'Courier New', monospace;
  --font-hud:    'RussoOne', 'Arial Narrow', sans-serif;
  --font-label:  'TekoBold', 'Arial Narrow', sans-serif;
  --font-flavor: 'Special Elite', 'Courier New', monospace;
  --font-body:   'Teko', 'Arial Narrow', sans-serif;

  /* Spacing (8px grid) */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  48px;
  --sp-xl:  80px;
  --sp-2xl: 128px;

  /* Border / decoration */
  --panel-border:        2px solid var(--steel-border);
  --panel-border-active: 2px solid var(--amber-deep);
  --border-radius-panel: 2px;
  --border-radius-btn:   4px;
  --rivet-size:          8px;

  /* Overlay opacities */
  --scanline-opacity: 0.045;
  --grain-opacity:    0.04;

  /* Transitions */
  --t-fast: 120ms ease-out;
  --t-mid:  250ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-mid:  0ms;
  }
}