/*
 * Tokens de marca HECHOS — fuente única para el chat y los informes del búnker.
 * Extraídos del CSS de https://hechosargentina.com.ar (Tailwind v4, 2026-09-11).
 * El sitio es "navy primero": fondo navy, marca en rosa, foco en amarillo.
 *
 * Tipografía: el sitio usa Acumin ExtraCondensed para TODO. En el chat se usa
 * para títulos, cifras, botones y etiquetas; el cuerpo de las respuestas va en
 * sans del sistema porque un párrafo largo en extra-condensada cuesta leerlo.
 * Acumin es una fuente comercial (Adobe): confirmar que la licencia web de la
 * campaña cubre el uso en el chat antes de publicarlo fuera de la red local.
 */

@font-face {
  font-family: "Acumin ExtraCondensed";
  src: url("../fuentes/acumin-extracondensed.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}

:root {
  /* Paleta del sitio */
  --hechos-navy: #1c243d;
  --hechos-navy-deep: #151a2e;
  --hechos-navy-soft: #2a3354;
  --hechos-pink: #f199be;
  --hechos-pink-strong: #e35c8d;
  --hechos-yellow: #ffc50b;
  --hechos-blue: #3659a7;
  --hechos-sky: #96c4e0;
  --hechos-bone: #eff0ee;
  --hechos-ash: #ababaa;
  --hechos-white: #fff;

  /* Tipografía */
  --fuente-marca: "Acumin ExtraCondensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --peso-marca: 800;
  --tracking-boton: 0.08em;

  /* Formas (del sitio: botones pill, inputs 2xl, tarjetas 2.5rem × escala .75) */
  --radio-boton: 9999px;
  --radio-input: 1rem;
  --radio-tarjeta: 1.875rem;
  --radio-tile: 1.125rem;
  --alto-tactil: 44px;

  /* Roles semánticos — tema claro (fondo bone) */
  --fondo: var(--hechos-bone);
  --superficie: var(--hechos-white);
  --texto: var(--hechos-navy);
  --texto-suave: #4a5068;
  --borde: #d6d8d4;
  --marca: var(--hechos-navy);
  --acento: var(--hechos-pink-strong);
  --foco: var(--hechos-yellow);
  --boton-fondo: var(--hechos-navy);
  --boton-fondo-hover: var(--hechos-navy-soft);
  --boton-texto: var(--hechos-pink);
  --burbuja-usuario: var(--hechos-navy);
  --burbuja-usuario-texto: var(--hechos-white);
}

/* Tema oscuro — el look principal del sitio */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: var(--hechos-navy);
    --superficie: var(--hechos-navy-deep);
    --texto: var(--hechos-white);
    --texto-suave: #c5c8d4;
    --borde: rgb(255 255 255 / 0.12);
    --marca: var(--hechos-pink);
    --acento: var(--hechos-pink);
    --boton-fondo: var(--hechos-pink);
    --boton-fondo-hover: var(--hechos-pink-strong);
    --boton-texto: var(--hechos-navy);
    --burbuja-usuario: var(--hechos-blue);
    --burbuja-usuario-texto: var(--hechos-white);
  }
}

:root[data-theme="dark"] {
  --fondo: var(--hechos-navy);
  --superficie: var(--hechos-navy-deep);
  --texto: var(--hechos-white);
  --texto-suave: #c5c8d4;
  --borde: rgb(255 255 255 / 0.12);
  --marca: var(--hechos-pink);
  --acento: var(--hechos-pink);
  --boton-fondo: var(--hechos-pink);
  --boton-fondo-hover: var(--hechos-pink-strong);
  --boton-texto: var(--hechos-navy);
  --burbuja-usuario: var(--hechos-blue);
  --burbuja-usuario-texto: var(--hechos-white);
}

/* Paleta de gráficos: orden fijo por serie, legible sobre bone y sobre navy. */
:root {
  --serie-1: var(--hechos-pink-strong);
  --serie-2: var(--hechos-blue);
  --serie-3: var(--hechos-yellow);
  --serie-4: var(--hechos-sky);
  --serie-5: var(--hechos-ash);
  /* Sentimiento: no se usa verde/rojo genérico, se usa la paleta de marca. */
  --sentimiento-positivo: var(--hechos-blue);
  --sentimiento-neutral: var(--hechos-ash);
  --sentimiento-negativo: var(--hechos-pink-strong);
}