/* ============================================
   SYNTHWAVE TYPER — Design Tokens & Variables
   Central source of truth for all colors,
   spacing, typography, and theme values
   ============================================ */

:root {
  /* ── Core Synthwave Palette ── */
  --neon-pink: #ff2d95;
  --neon-pink-glow: #ff2d9580;
  --neon-pink-soft: #ff6eb4;
  --neon-cyan: #00f0ff;
  --neon-cyan-glow: #00f0ff80;
  --neon-cyan-soft: #67f7ff;
  --neon-purple: #b94fff;
  --neon-purple-glow: #b94fff80;
  --neon-yellow: #ffe156;
  --neon-yellow-glow: #ffe15680;
  --neon-green: #39ff14;
  --neon-green-glow: #39ff1480;
  --neon-orange: #ff6b35;
  --neon-orange-glow: #ff6b3580;

  /* ── Background Layers ── */
  --bg-dark: #0a0a1a;
  --bg-darker: #050510;
  --bg-mid: #121228;
  --bg-surface: #1a1a3e;
  --bg-surface-light: #252560;
  --bg-overlay: rgba(10, 10, 26, 0.85);

  /* ── Sunset Gradient Colors ── */
  --sunset-top: #1a0533;
  --sunset-mid: #3d0f5c;
  --sunset-orange: #ff6b35;
  --sunset-pink: #ff2d95;
  --sunset-yellow: #ffe156;
  --sun-color: #ff6b35;

  /* ── Grid Colors ── */
  --grid-color: rgba(0, 240, 255, 0.15);
  --grid-color-bright: rgba(0, 240, 255, 0.35);
  --grid-line-width: 1px;

  /* ── Text Colors ── */
  --text-primary: #ffffff;
  --text-secondary: #a0a0cc;
  --text-muted: #666699;
  --text-glow: #ffffff;

  /* ── Finger Color Coding (for keyboard) ── */
  --finger-pinky-l: #ff2d95;
  --finger-ring-l: #ff6b35;
  --finger-middle-l: #ffe156;
  --finger-index-l: #39ff14;
  --finger-thumb: #b94fff;
  --finger-index-r: #00f0ff;
  --finger-middle-r: #ffe156;
  --finger-ring-r: #ff6b35;
  --finger-pinky-r: #ff2d95;

  /* ── Grade Level Colors ── */
  --grade-k: #39ff14;
  --grade-1: #00f0ff;
  --grade-2: #b94fff;
  --grade-3: #ff2d95;
  --grade-4: #ffe156;

  /* ── Typography ── */
  --font-display: 'Orbitron', 'Audiowide', sans-serif;
  --font-body: 'Rajdhani', 'Exo 2', sans-serif;
  --font-mono: 'Share Tech Mono', 'Fira Code', monospace;
  --font-pixel: 'Press Start 2P', monospace;

  --fs-xs: 0.7rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.8rem;
  --fs-2xl: 2.4rem;
  --fs-3xl: 3.2rem;
  --fs-4xl: 4.5rem;
  --fs-hero: 6rem;

  /* ── Spacing Scale ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ── Shadows & Glows ── */
  --glow-pink: 0 0 10px var(--neon-pink), 0 0 30px var(--neon-pink-glow), 0 0 60px rgba(255, 45, 149, 0.2);
  --glow-cyan: 0 0 10px var(--neon-cyan), 0 0 30px var(--neon-cyan-glow), 0 0 60px rgba(0, 240, 255, 0.2);
  --glow-purple: 0 0 10px var(--neon-purple), 0 0 30px var(--neon-purple-glow), 0 0 60px rgba(185, 79, 255, 0.2);
  --glow-yellow: 0 0 10px var(--neon-yellow), 0 0 30px var(--neon-yellow-glow);
  --glow-green: 0 0 10px var(--neon-green), 0 0 30px var(--neon-green-glow);
  --glow-text-pink: 0 0 7px var(--neon-pink), 0 0 20px var(--neon-pink-glow);
  --glow-text-cyan: 0 0 7px var(--neon-cyan), 0 0 20px var(--neon-cyan-glow);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ── */
  --z-bg: -1;
  --z-base: 1;
  --z-overlay: 10;
  --z-modal: 100;
  --z-toast: 200;
  --z-particles: 5;

  /* ── Game Constants ── */
  --road-perspective: 800px;
  --car-size: 60px;
  --keyboard-key-size: 44px;
  --hud-height: 60px;
}