/* ==========================================================================
   Shaday TV — Design tokens
   Paleta tomada del banner del canal: negro profundo, verde azulado (teal),
   dorado del logo y las barras de color de ajuste de TV.
   ========================================================================== */

:root {
  /* Superficies */
  --bg: #050708;
  --surface: #0b1517;
  --surface-2: #10211f;
  --surface-3: #16302e;
  --teal: #0d4a4c;
  --teal-glow: #1a7f7c;
  --border: rgba(227, 176, 88, 0.16);
  --border-strong: rgba(227, 176, 88, 0.38);

  /* Texto */
  --text: #f6f1e7;
  --text-muted: #b3bfbd;   /* 8.9:1 sobre --surface */
  --text-dim: #8b9896;     /* 5.6:1 sobre --surface, solo metadatos */

  /* Marca: dorado del logo */
  --gold-100: #fbe3a6;
  --gold-300: #f2c46a;
  --gold-500: #e0a13b;
  --gold-700: #b8691e;
  --gold-gradient: linear-gradient(135deg, #fbe3a6 0%, #f2c46a 30%, #e0a13b 60%, #b8691e 100%);
  --on-gold: #1a0f02;

  /* En vivo */
  --live: #ef2b3f;
  --live-soft: rgba(239, 43, 63, 0.14);

  /* Barras de color (señal de ajuste) */
  --bar-white: #f2f2f2;
  --bar-yellow: #f5e400;
  --bar-cyan: #00c8e6;
  --bar-green: #19c20f;
  --bar-magenta: #e0249a;
  --bar-red: #e81123;
  --bar-blue: #1447e6;
  --color-bars: linear-gradient(90deg,
    var(--bar-white) 0 14.28%, var(--bar-yellow) 0 28.56%, var(--bar-cyan) 0 42.84%,
    var(--bar-green) 0 57.12%, var(--bar-magenta) 0 71.4%, var(--bar-red) 0 85.68%,
    var(--bar-blue) 0 100%);

  /* Tipografía */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-3xl: clamp(2.2rem, 1.6rem + 3vw, 4rem);

  /* Espaciado y forma */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1200px;
  --header-h: 72px;

  /* Sombras */
  --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 8px 28px -8px rgba(224, 161, 59, 0.45);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 220ms;

  /* Capas (z-index) */
  --z-base: 1;
  --z-sticky: 10;
  --z-header: 30;
  --z-drawer: 40;
  --z-modal: 50;
}