/* ============================================================
   Design Tokens — Premium dark streaming UI
   Cyberpunk dark interface · Manrope typography · JetBrains Mono
   Accent: Neon green with cyan accents for sport/stream aesthetic.
   ============================================================ */

:root {
  /* Surfaces — full dark glassmorphism foundation */
  --bg:            #000000;
  --bg-elev-1:     #050505;
  --bg-elev-2:     #0f0f0f;
  --card:          rgba(17, 17, 17, 0.95);
  --card-2:        rgba(24, 24, 24, 0.95);
  --card-3:        rgba(32, 32, 32, 0.95);
  --card-hover:    rgba(28, 28, 28, 0.95);
  
  /* Glass effects */
  --glass:         rgba(255, 255, 255, 0.015);
  --glass-strong:  rgba(255, 255, 255, 0.035);
  --glass-line:    rgba(255, 255, 255, 0.06);

  /* Borders — ultra-thin, semi-transparent */
  --border:        rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-faint:  rgba(255, 255, 255, 0.03);

  /* Accents — vibrant neon green and cyber gradients */
  --accent:        #2eff2e;
  --accent-press:  #00e500;
  --accent-soft:   rgba(46, 255, 46, 0.08);
  --accent-glow:   rgba(46, 255, 46, 0.25);
  --accent-cyan:   #00f5ff;
  
  /* Live broadcast red */
  --live:          #ff3b30;
  --live-soft:     rgba(255, 59, 48, 0.08);
  --live-glow:     rgba(255, 59, 48, 0.3);

  /* Semantics */
  --danger:        #ff453a;
  --warn:          #ff9f0a;
  --info:          #0a84ff;

  /* Typography offsets for visual hierarchy */
  --text:          #f2f2f7;
  --text-muted:    #a2a2ad;
  --text-faint:    #63636e;

  /* Typography Fonts */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", var(--font-display), monospace;
  --font-sans:    var(--font-display);

  /* Typography Font Sizes */
  --fs-xs:  .75rem;     /* 12px */
  --fs-sm:  .825rem;    /* 13px */
  --fs-md:  .95rem;     /* 15px */
  --fs-lg:  1.125rem;   /* 18px */
  --fs-xl:  1.5rem;     /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-3xl: 2.75rem;    /* 44px */

  --tracking-tight: -0.025em;
  --tracking-mono:  0.06em;

  /* Spacings (4pt grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Border Radii */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* Shadow - dynamic glow depth */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.6);
  --shadow:    0 12px 40px rgba(0,0,0,0.7);
  --shadow-lg: 0 24px 80px rgba(0,0,0,0.85);
  --ring:      0 0 0 3px rgba(83, 252, 24, 0.15);

  /* Gradient templates */
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-cyan) 100%);
  --grad-hero:   radial-gradient(100% 100% at 50% 0%, rgba(83, 252, 24, 0.08) 0%, transparent 80%),
                 linear-gradient(180deg, var(--card-2), var(--card));
  --grad-card:   linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
  --grad-scrim:  linear-gradient(180deg, transparent 0%, rgba(4, 4, 6, 0.95) 100%);

  /* Layout Constants */
  --container:  1280px;
  --header-h:   72px;
  --bottomnav-h:64px;

  /* Layers */
  --z-header:   100;
  --z-dropdown: 200;
  --z-overlay:  900;
  --z-toast:    1000;

  /* Motion */
  --ease:     cubic-bezier(.16, 1, .3, 1); /* Ultra smooth ease-out */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur:      300ms;
  --dur-slow: 450ms;
}