/* =====================================================================================================================
   TOKENS DE ODILO (revisión de Álvaro del 26-oct, §5, «Tokens propuestos»; docs/DISENO_ALVARO_2026-10.md)
   El único sitio donde se escriben la familia, los tamaños, los pesos, los colores, el espacio y los radios. Va la PRIMERA en
   todas las pantallas (la app, la consola y las páginas públicas); el resto de hojas usa estas variables y no escribe un tamaño,
   un peso, una familia ni un color de texto propios (tools/tokens_css.py las pasa; tests/test_tokens_diseno.py lo vigila).

   · Una familia de texto: la Schibsted Grotesk. Inter (las cifras de las tablas), Newsreader y Fraunces salen de las pantallas
     (siguen en los PDF, que llevan sus TTF). La Marcellus queda solo en el logotipo.
   · Cifras: tabulares en toda la interfaz. La Schibsted de la app (tools/fuente_cifras.py) solo hace tabulares los dígitos: la
     coma, el punto y el % conservan su ancho («1,59 %», no «1 , 59 %»), que era lo que obligaba a usar Inter.
   · Escala del rediseño de Álvaro del 29-oct (§3.1, que sustituye a la del 26-oct): 12 pies de gráfico y leyendas · 13 · 14
     secundario · 15 · 16 cuerpo · 22 título de bloque · 26 cifra secundaria · 32 H1 · 44 cifra protagonista · 56 la nota.
     Los colores, el espacio y los radios del §3.1 están aquí con sus nombres (--c-*, --s-*, --r-*): un solo sistema.
   · Color: tinta para el texto principal, --ink-2 para el secundario y --muted solo en leyendas de 13 px o más (nunca en
     párrafos). Semáforo: el «bien» es el petróleo de la paleta del fundador (nada de verde menta), con icono además del color.
   ===================================================================================================================== */
@font-face{font-family:"Schibsted Grotesk";src:url("/static/fonts/schibsted-grotesk-odilo-var.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/static/fonts/schibsted-grotesk-odilo-italic-var.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Marcellus";src:url("/static/fonts/marcellus-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* familias */
  --font-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-marca:"Marcellus",Georgia,serif;                  /* solo el logotipo ODILO */
  --font-num:tabular-nums lining-nums;                     /* font-variant-numeric de toda cifra */

  /* tamaños (px, como en la revisión) */
  --fs-xs:12px;    /* notas legales, fuentes, pies de gráfico */
  --fs-sm:14px;    /* texto secundario, etiquetas, celdas, botones */
  --fs-base:16px;  /* cuerpo */
  --fs-md:22px;    /* título de bloque (rediseño de Álvaro del 29-oct, §3.1: 22) */
  --fs-lg:26px;    /* cifra de un KPI secundario y título de tarjeta grande (§3.1: 26) */
  --fs-xl:32px;    /* H1 de la pantalla (§2.1: 32 px, peso 600) */
  --fs-kpi:44px;   /* cifra protagonista (§3.1: 44) */
  /* la escala completa del rediseño (§3.1): 12 (solo pies de gráfico y leyendas) · 13 · 14 · 15 · 16 · 22 · 26 · 32 · 44 · 56;
     ningún texto de lectura por debajo de 13 px. Los nombres numéricos son los de la especificación; los de arriba, los mismos
     valores con el nombre de siempre (un solo sistema) */
  --fs-12:var(--fs-xs); --fs-13:13px; --fs-14:var(--fs-sm); --fs-15:15px; --fs-16:var(--fs-base); --fs-22:var(--fs-md);
  --fs-26:var(--fs-lg); --fs-32:var(--fs-xl); --fs-44:var(--fs-kpi); --fs-56:56px;

  /* pesos (la Schibsted es variable: solo estos cuatro) */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-texto:1.5; --lh-titulo:1.2;

  /* color */
  --ink:#1c2333;      /* texto principal */
  --ink-2:#4c5568;    /* texto secundario */
  --muted:#5f687a;    /* solo leyendas de 13 px o más, nunca párrafos */
  --primary:#3b5a96;  /* botones y enlaces */
  --primary-2:#2f4b80;/* el primario al pasar por encima */
  --ok:#2d6b8a;       /* cumple (petróleo: la revisión dice verde #2D7A55; el fundador, sin verde) */
  --warn:#8a5a14;     /* al límite (§3.1 --c-warn) */
  --bad:#a3361f;      /* no cumple (§3.1 --c-bad) */
  --ok-fondo:rgba(45,107,138,.10); --warn-fondo:rgba(176,122,42,.12); --bad-fondo:rgba(168,73,60,.10);
  --linea:rgba(28,35,51,.10); --linea-2:rgba(28,35,51,.16);
  /* los colores del rediseño del 29-oct (§3.1), con sus nombres; los que ya existían apuntan a los de siempre. «Bien» en
     petróleo (decisión 23 del fundador: nada de verde; la especificación dice #2D6A48) */
  --c-ink:var(--ink); --c-ink-2:var(--ink-2); --c-accent:var(--primary); --c-accent-ink:#2c4577; --c-good:var(--ok);
  --c-warn:var(--warn); --c-bad:var(--bad);
  --c-line:#e3e6ec;       /* bordes de tarjeta */
  --c-line-2:#eef0f4;     /* separadores de fila */
  --c-ground:#f4f5f8;     /* fondo de página */
  --c-surface:#ffffff;    /* tarjetas */
  --c-hero:#1c2f57;       /* el bloque de la acción principal (HeroAction) */
  --c-muted-mark:#c3c8d2; /* barras de dato sin acento */

  /* espacio y radios */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --radius-control:10px; --radius-card:16px;     /* §3.1: radios de 6, 10, 14, 16 y píldora */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-28:28px; --s-32:32px; --s-48:48px; --s-64:64px;
  --r-6:6px; --r-10:var(--radius-control); --r-14:14px; --r-16:var(--radius-card); --r-pill:999px;

  /* bandas de la escala del banco (grados 1-2 A, 3-4 B, 5-6 C, 7-8 D): azules los buenos, arena y ladrillo los malos */
  --banda-a:#2f4c87; --banda-b:#4a65a0; --banda-c:#a8782c; --banda-d:#a3493b;
}