/* ==========================================================
   PlayTV Live — Design Tokens
   ========================================================== */

:root {
  /* Brand gradient */
  --grad-brand: linear-gradient(90deg, #e50914 0%, #8b2fc9 50%, #2563eb 100%);

  /* Dark theme (default) */
  --bg-base: #0a0a0f;
  --bg-elevated: #13131c;
  --bg-card: #1a1a24;
  --bg-card-hover: #22222f;
  --bg-glass: rgba(20, 20, 30, 0.65);
  --bg-glass-strong: rgba(15, 15, 22, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary: #f5f5f7;
  --text-secondary: #a1a1b0;
  --text-tertiary: #6b6b7a;

  --accent-red: #e50914;
  --accent-purple: #8b2fc9;
  --accent-blue: #2563eb;
  --accent-gold: #f5c518;
  --accent-green: #22c55e;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.48);
  --shadow-glow-red: 0 0 24px rgba(229, 9, 20, 0.35);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
  --dur-slow: 480ms;

  --header-h: 72px;
  --container-max: 1400px;

  color-scheme: dark;
}

[data-theme='light'] {
  --bg-base: #f4f4f7;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f5;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-strong: rgba(255, 255, 255, 0.9);
  --border-subtle: rgba(10, 10, 20, 0.08);
  --border-strong: rgba(10, 10, 20, 0.14);

  --text-primary: #14141c;
  --text-secondary: #55555f;
  --text-tertiary: #8a8a94;

  --shadow-sm: 0 2px 8px rgba(20, 20, 30, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 20, 30, 0.1);
  --shadow-lg: 0 16px 48px rgba(20, 20, 30, 0.14);

  color-scheme: light;
}