/* tokens.css — capa base del sitio público, común con robertomatera.com salvo
   la ruta de las fuentes. Único origen de verdad de los valores del sitio
   público. Se enlaza ANTES que cualquier otra hoja. */

@font-face{font-family:"Archivo";src:url("fonts/archivo-500.562c73adab45.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-600.7ab89eedd1b0.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-700.8574a5d7eebc.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/plexmono-400.5d6f52ed08df.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/plexmono-700.f904081c0f95.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* ── Paleta semántica ──
     Contraste: el azul claro (--c-acento) sobre blanco da 2,6 y NO vale como
     color de texto ni de enlace — solo fondo de botón, subrayado, borde o
     adorno. Si se lee, --c-primario; si se mira, --c-acento.
     El coral (--c-senal) es SOLO para el «caos»: piezas del tablero, lo que
     falla. Nunca para una acción ni para un precio. */
  --c-primario:#123A63;        /* azul tinta: enlaces, énfasis */
  --c-primario-osc:#0B2D4F;    /* marino: acciones, secciones fuertes, marca */
  --c-acento:#69A4F9;          /* azul claro: botón principal, subrayados, foco */
  --c-senal:#E8604C;           /* coral: el caos. Solo adorno y etiqueta */
  --c-tinta:#0B1F33;           /* texto */
  --c-texto-suave:#4A5B6E;
  --c-fondo:#FFFFFF;           /* fondo de página */
  --c-fondo-alt:#F3F6F9;       /* niebla: secciones alternas, cabeceras de tabla */
  --c-superficie:#FFFFFF;
  --c-borde:#D9E1EA;
  /* Tintes claros */
  --c-acento-claro:#E3EEFE;
  --c-primario-claro:#DCE6F2;
  --c-primario-osc-claro:#D9E1EA;
  --c-senal-claro:#FDE7E3;
  /* Sobre marino */
  --c-sobre-oscuro:#C6D4E4;    /* texto de cuerpo sobre --c-primario-osc */
  /* Estados */
  --c-ok:#1E9E5A; --c-error:#C43D2E; --c-aviso:#D9822B;

  /* ── Tipografía ──
     Archivo para títulos, Manrope para el texto. Plex Mono es la TERCERA y
     solo para datos: etiquetas, precios, cifras de los casos, migas; no se
     usa para frases. */
  --f-disp:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-texto:"Manrope",system-ui,sans-serif;
  --f-datos:"Plex Mono",ui-monospace,monospace;

  /* ── Escala tipográfica fluida (max a 1440 de ancho; min a 390) ── */
  --t-h1:clamp(2.3rem,1.4rem + 3.6vw,4.4rem);
  --t-h2:clamp(1.8rem,1.3rem + 1.9vw,2.9rem);
  --t-h3:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  --t-h4:clamp(1.02rem,1rem + .2vw,1.12rem);
  --t-cuerpo:clamp(1rem,.96rem + .2vw,1.08rem);
  --t-entradilla:clamp(1.05rem,1rem + .45vw,1.25rem);
  --t-small:.86rem;
  --t-cejilla:.74rem;          /* etiqueta mono en mayúsculas */

  /* ── Espaciado en escala ── */
  --e-1:4px; --e-2:8px; --e-3:16px; --e-4:24px; --e-5:32px; --e-6:48px; --e-7:64px;
  --sec-y:clamp(4rem,8vw,7rem);        /* aire vertical entre secciones */
  --aire:clamp(1.1rem,4vw,2.5rem);     /* aire lateral de página */

  /* ── Superficies ── */
  --radio:10px; --radio-chico:6px; --radio-grande:16px; --radio-pastilla:999px;
  --sombra:0 1px 2px rgba(11,31,51,.06),0 8px 24px rgba(11,31,51,.08);
  --ancho-max:1200px;
  --tactil:44px;
  --t-rapida:.2s ease;

  /* ── Breakpoints canónicos: 640 · 860 · 980, y 1200 para el menú ──
     Se escriben a mano en el @media. 1200 solo para la cabecera: con el menú
     (seis entradas y el botón) la barra no cabe en una fila por debajo. */
}