/* ============================================================
   SYSTEM RDM — Design Tokens
   Midnight Broadcast / Cinematic Neon Studio
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-0: #07060C;
  --bg-1: #0E0B16;
  --bg-2: #161221;
  --bg-3: #1E1830;
  --glass: rgba(22, 18, 36, 0.62);
  --glass-strong: rgba(22, 18, 36, 0.85);
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-strong: rgba(255, 214, 122, 0.28);
  --stroke-light: rgba(255, 255, 255, 0.04);

  /* Accents */
  --gold: #F3C56B;
  --gold-2: #FFD991;
  --amber: #FFB23B;
  --neon-magenta: #FF2D95;
  --neon-cyan: #3CE7FF;
  --violet: #7A5CFF;
  --live-red: #FF3B4A;

  /* Text */
  --text: #F6F1E8;
  --text-dim: #B7AFA0;
  --text-mute: #7C7468;
  --success: #3DDC97;
  --danger: #FF5C7A;

  /* Gradients */
  --grad-hero: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(243, 197, 107, 0.18) 0%, transparent 50%),
               radial-gradient(ellipse 60% 50% at 15% 60%, rgba(255, 45, 149, 0.10) 0%, transparent 50%),
               radial-gradient(ellipse 50% 40% at 50% 100%, rgba(60, 231, 255, 0.08) 0%, transparent 50%);
  --grad-card: linear-gradient(135deg, transparent 0%, rgba(243, 197, 107, 0.06) 100%);
  --grad-gold: linear-gradient(135deg, #F3C56B 0%, #FFD991 50%, #FFB23B 100%);
  --grad-live: conic-gradient(from 0deg, #FF2D95, #3CE7FF, #FF2D95);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 30px rgba(243, 197, 107, 0.25);
  --shadow-neon: 0 0 40px rgba(255, 45, 149, 0.3);

  /* Typography */
  --font-display: 'Syne', 'Bebas Neue', system-ui, sans-serif;
  --font-body: 'Manrope', 'Sora', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

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

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration: 300ms;
  --duration-slow: 500ms;

  /* Layout */
  --container: 1200px;
  --nav-height: 72px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}