/* ============================================================
   Design Tokens — Premium dark streaming UI
   Matte Black & Emerald Green Aesthetic
   ============================================================ */

:root {
  /* Surfaces — Pure Black & Sleek Dark Gray */
  --bg:            #050505;
  --bg-elev-1:     #0D0D0D;
  --bg-elev-2:     #141414;
  --card:          #0D0D0D;
  --card-2:        #141414;
  --card-3:        #1A1A1A;
  --card-hover:    #1F1F1F;
  
  /* Borders — ultra-thin, low opacity */
  --border:        #222222;
  --border-strong: #333333;
  --border-faint:  #111111;

  /* Accents — Neon Green */
  --accent:        #00FF66;
  --accent-press:  #00E55C;
  --accent-soft:   rgba(0, 255, 102, 0.07);
  --accent-glow:   rgba(0, 255, 102, 0.20);
  
  /* Live broadcast red */
  --live:          #ef4444;
  --live-soft:     rgba(239, 68, 68, 0.08);
  --live-glow:     rgba(239, 68, 68, 0.15);

  /* Semantics */
  --danger:        #f87171;
  --warn:          #fbbf24;
  --info:          #60a5fa;

  /* Typography */
  --text:          #f4f4f5;
  --text-muted:    #a1a1aa;
  --text-faint:    #71717a;

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

  /* Font Sizes */
  --fs-xs:  .75rem;     /* 12px */
  --fs-sm:  .8125rem;   /* 13px */
  --fs-md:  .9375rem;   /* 15px */
  --fs-lg:  1.0625rem;  /* 17px */
  --fs-xl:  1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */

  --tracking-tight: -0.02em;
  --tracking-mono:  0.03em;

  /* Spacing System (8px 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;

  /* Radii — clean, low radius */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 9999px;

  /* Shadows — extremely subtle */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.5);
  --ring:      0 0 0 2px rgba(0, 255, 102, 0.2);

  /* Layout Constants */
  --container:  1200px;
  --header-h:   56px;
  --bottomnav-h:56px;

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

  /* Motion */
  --ease:     cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 180ms;
  --dur:      240ms;
  --dur-slow: 300ms;
}