/*
 * tokens.css — Identidad visual TV4 La Vall.
 * Modo claro: fondo blanco, nav en azul de marca #0c4386, amarillo dorado como
 * secundario (no es el amarillo exacto del logo, elegido para combinar bien con
 * el azul). Sin rojo: se eliminó por completo, incluido el indicador de "en
 * directo", que ahora usa el azul de marca.
 */
:root {
  /* Paleta de marca */
  --surface-base:   #000000;   /* negro — nav, header */
  --surface-raised: #0c4386;   /* azul — color de marca principal */
  --surface-strong: #f2a900;   /* amarillo dorado — secundario */

  --text-primary:   #ffffff;   /* blanco — sobre fondos oscuros */
  --text-secondary: #222222;   /* casi negro — cuerpo sobre blanco */
  --text-tertiary:  #4a4a4a;   /* gris medio — textos secundarios */
  --text-inverse:   #0c4386;   /* azul — enlaces */

  /* Aliases semánticos usados por los componentes */
  --accent:      #0c4386;   /* azul — CTAs, live, insignias, enlaces */
  --accent-soft: #14539f;   /* azul claro — variante para hover */
  --brand:       #f2a900;   /* amarillo — solo como fondo/borde, nunca como texto sobre claro */

  /* Página (modo claro) */
  --bg:      #ffffff;
  --surface: #f4f5f7;
  --text:    #222222;
  --muted:   #4a4a4a;
  --faint:   #888888;
  --line:    rgba(0, 0, 0, .1);

  /* Nav (azul de marca) */
  --nav-bg:   #0c4386;
  --nav-text: #ffffff;
  --nav-line: rgba(255, 255, 255, .14);

  --radius: 12px;
  --font:   'Plus Jakarta Sans', system-ui, sans-serif;
}