/* ═══════════════════════════════════════════════════════════════════════════
   OVERDRIVE HORIZON — Design Tokens
   VoidPulse | Cyberpunk Nu-Gaze Aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     COLOR PALETTE — Cyberpunk Night Drive
     ───────────────────────────────────────────────────────────────────────── */
  --color-deep-black: #0F0F1A;
  --color-dark-purple: #1E0033;
  --color-neon-red: #FF0033;
  --color-electric-cyan: #00FFFF;
  --color-burning-orange: #FF6600;
  --color-pure-white: #FFFFFF;
  
  /* Derived colors */
  --color-neon-red-glow: rgba(255, 0, 51, 0.6);
  --color-cyan-glow: rgba(0, 255, 255, 0.5);
  --color-orange-glow: rgba(255, 102, 0, 0.5);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-dim: rgba(255, 255, 255, 0.3);
  
  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Speed & Impact
     ───────────────────────────────────────────────────────────────────────── */
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 5rem;
  
  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;
  
  /* ─────────────────────────────────────────────────────────────────────────
     SPACING — Rhythm Grid
     ───────────────────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  
  /* ─────────────────────────────────────────────────────────────────────────
     EFFECTS — Neon Glow & Motion
     ───────────────────────────────────────────────────────────────────────── */
  
  /* Glow shadows */
  --glow-red: 0 0 20px var(--color-neon-red-glow), 
              0 0 40px var(--color-neon-red-glow),
              0 0 60px rgba(255, 0, 51, 0.3);
  --glow-cyan: 0 0 20px var(--color-cyan-glow), 
               0 0 40px var(--color-cyan-glow);
  --glow-orange: 0 0 15px var(--color-orange-glow), 
                 0 0 30px var(--color-orange-glow);
  --glow-text: 0 0 10px currentColor, 0 0 20px currentColor;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* ─────────────────────────────────────────────────────────────────────────
     ANIMATION — Kinetic Energy
     ───────────────────────────────────────────────────────────────────────── */
  
  /* Timing functions - aggressive for high-energy feel */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  
  /* Beat sync - based on 80 BPM = 750ms per beat */
  --beat-duration: 750ms;
  --half-beat: 375ms;
  --quarter-beat: 187.5ms;
  
  /* ─────────────────────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────────────────────── */
  --max-width: 1200px;
  --content-width: 800px;
  --header-height: 80px;
  
  /* Z-index layers */
  --z-background: -1;
  --z-base: 0;
  --z-content: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-particles: 5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-6xl: 3.5rem;
    --space-16: 3rem;
    --space-20: 4rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-4xl: 2rem;
    --text-5xl: 2rem;
    --text-6xl: 2.5rem;
  }
}