/* ═══════════════════════════════════════════════════════════════
   NORSTREAM.TV · tokens (OT-03 §4.6 y §4.7)
   Un solo lugar para color, tipografía, espaciado y forma.
   Nada de esto se redefine en norstream.css: solo se usa.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Color ──────────────────────────────────────────────────
     Un acento: el cian de la Ficha de marca 2025. El rosa y el lima de la
     ficha viven solo dentro del logotipo. Cuerpo claro; oscuro únicamente en
     header, hero y footer (el lockup oficial está pensado para fondo oscuro). */
  --acento: #34BFEA;             /* rellenos: botones, subrayados, puntos */
  --acento-texto: #0A7EA6;       /* el mismo cian, oscurecido para leerse sobre claro (4.7:1) */
  --acento-hover: #5CCDF0;
  --acento-active: #2AA6CF;

  --bg: #F6F7F8;                 /* fondo del cuerpo, gris casi blanco con sesgo frío */
  --bg-panel: #FFFFFF;           /* campos de formulario, tarjetas */
  --bg-suave: #ECEFF1;           /* franjas y bloques tipográficos */
  --borde: #D9DEE2;

  --txt: #101012;
  --txt-suave: #5B6166;

  --oscuro: #101012;             /* header, hero, footer */
  --oscuro-2: #17171A;
  --oscuro-borde: #2A2A2E;
  --oscuro-txt: #F2F4F5;
  --oscuro-txt-suave: #A8ACAE;

  --vivo: #D62828;               /* estado en vivo, siempre rojo */
  --error: #B42318;

  /* ── Tipografía: dos familias, tres títulos, dos cuerpos ──── */
  --font-titulo: "Monument Extended", "Monument-fallback", "Arial Black", sans-serif;
  --font-texto: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --t1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);      /* h1 de portada */
  --t2: clamp(1.45rem, 1.2rem + 1.05vw, 2rem);      /* h1 interior, h2 */
  --t3: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);      /* h3 */
  --b1: clamp(1rem, .96rem + .2vw, 1.0625rem);      /* cuerpo, 17 px en escritorio */
  --b2: clamp(.875rem, .85rem + .15vw, .9375rem);   /* meta, epígrafes, formularios */
  --leading: 1.6;
  --ancho-texto: 68ch;                              /* ancho de lectura de una nota */
  --ancho-max: 72rem;

  /* ── Espaciado — múltiplos de 4 ──────────────────────────── */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --sp-9: 6rem; --sp-10: 8rem;

  /* ── Forma y movimiento ──────────────────────────────────── */
  --radio: 8px;                  /* único radio de borde del sitio */
  --dur: 200ms;                  /* única duración: reveal e interacción */
  --easing: cubic-bezier(.4, 0, .2, 1);
  --sombra-interactiva: 0 6px 20px rgba(16, 16, 18, .12);

  /* ── Alias de compatibilidad (no usar en código nuevo) ───── */
  --txt-xs: var(--b2); --txt-sm: var(--b2); --txt-base: var(--b1);
  --txt-lg: var(--t3); --txt-xl: var(--t3); --txt-2xl: var(--t2); --txt-3xl: var(--t1);
  --radio-sm: var(--radio); --radio-md: var(--radio); --radio-lg: var(--radio);
  --accion: var(--acento); --accion-hover: var(--acento-hover); --accion-active: var(--acento-active);
  --foco: var(--acento-texto); --dato: var(--acento-texto);
  --bg-card: var(--bg-panel); --bg-alt: var(--bg-suave);
  --txt-inv: var(--oscuro);
  --dur-rapida: var(--dur); --dur-normal: var(--dur);
}

/* Superficies oscuras: se redefinen los tokens de texto y borde dentro del
   ámbito, así cada componente lee los mismos nombres en cualquier fondo. */
.oscuro {
  background: var(--oscuro);
  color: var(--oscuro-txt);
  --txt: var(--oscuro-txt);
  --txt-suave: var(--oscuro-txt-suave);
  --borde: var(--oscuro-borde);
  --bg-panel: var(--oscuro-2);
  --bg-suave: var(--oscuro-2);
  --acento-texto: var(--acento);
  --txt-inv: var(--oscuro);
}