/* tokens.css — Matera Marketing (web nueva, Sistema AUGE). Único origen de verdad.
   Extraído de la maqueta aprobada 2026-09-13-auge/estilos.css. Se enlaza ANTES que cualquier otra hoja. */
@font-face{font-family:"Bricolage";src:url("fonts/bricolage-latin.ad33cbc6d232.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Instrument";src:url("fonts/instrument-latin.fa41c43a3d8e.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  /* Paleta semántica (8). El celeste es el del logo LOGO_MM.jpeg. */
  --c-primario:#1F5FA8;        /* azul: enlaces, énfasis, AUGE CRM */
  --c-primario-osc:#0B2D4F;    /* azul marino: acciones principales, AUGE AI, fondos oscuros */
  --c-acento:#03A9F5;          /* celeste del logo: AUGE Web, detalles, cejillas */
  --c-tinta:#0B1F33;           /* texto */
  --c-texto-suave:#4B5D70;
  --c-fondo:#F3F6F9;           /* niebla azulada */
  --c-superficie:#FFFFFF;
  --c-borde:#D6DEE6;
  /* Tintes claros de los tres niveles (para fondos de tarjeta y chips) */
  --c-acento-claro:#DDF2FD;
  --c-primario-claro:#DCE6F4;
  --c-primario-osc-claro:#D9E1EA;
  /* Estados */
  --c-ok:#1E9E5A; --c-error:#C43D2E; --c-aviso:#D9822B;

  /* Tipografía: dos familias. */
  --f-disp:"Bricolage",system-ui,sans-serif;
  --f-texto:"Instrument",system-ui,sans-serif;

  /* Escala tipográfica fluida. Max = maqueta a 1440; min = maqueta a 390. */
  --t-h1:clamp(2.2rem,5.2vw,4.4rem);
  --t-h2:clamp(1.8rem,3.6vw,2.9rem);
  --t-h3:clamp(1.2rem,2vw,1.5rem);
  --t-h4:clamp(1.05rem,1.4vw,1.15rem);
  --t-cuerpo:clamp(1rem,1.05vw,1.0625rem);     /* 16 → 17 px */
  --t-entradilla:clamp(1.05rem,1.5vw,1.3rem);
  --t-small:.9rem;
  --t-cejilla:.85rem;

  /* 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(3.5rem,8vw,7rem);
  --aire:clamp(16px,2.2vw,28px);

  /* Superficies */
  --radio:14px; --radio-chico:8px; --radio-grande:24px; --radio-pastilla:999px;
  --sombra:0 1px 2px rgba(11,31,51,.06),0 12px 32px -16px rgba(11,31,51,.18);
  --ancho-max:1180px;
  --tactil:44px;

  /* Breakpoints canónicos (documentales; en CSS se escriben a mano): 640 · 860 (hamburguesa) · 980 */
}