/* tokens.css — robertomatera.com. Único origen de verdad del sitio público.
   Rediseño del 14/09/2026: la marca personal adopta la capa base de
   materamarketing.com (decisión de Roberto del 13/09/2026), para que las dos
   marcas se lean como la misma casa. Paleta, familias, escala, espaciados,
   radios y sombra son LOS MISMOS que los de Matera: si allí cambia un valor,
   aquí cambia igual. Lo propio de este sitio (tienda, agenda, libro, blog)
   se construye ENCIMA, nunca redefiniendo estos números.
   Se enlaza ANTES que cualquier otra hoja.

   El panel (/admin/) queda fuera del rediseño y no carga este fichero. */

@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 + tintes + estados) ──
     Regla de contraste heredada del sitio viejo y que sigue en pie: el celeste
     de marca (--c-acento) sobre blanco da 2,7 y NO vale como color de texto ni
     de enlace — solo fondo, borde grueso, icono grande o adorno. El texto en
     azul va siempre en --c-primario (6,0 sobre blanco). Uso nuevo: si se lee,
     --c-primario; si se mira, --c-acento. */
  --c-primario:#1F5FA8;        /* azul: enlaces, énfasis, texto destacado */
  --c-primario-osc:#0B2D4F;    /* azul marino: acciones principales, fondos oscuros */
  --c-acento:#03A9F5;          /* celeste del logo: detalles, cejillas, adornos */
  --c-tinta:#0B1F33;           /* texto */
  --c-texto-suave:#4B5D70;
  --c-fondo:#F3F6F9;           /* niebla azulada */
  --c-superficie:#FFFFFF;
  --c-borde:#D6DEE6;
  /* Tintes claros (fondos de tarjeta, chips, estados de foco) */
  --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, ni una más ──
     Sustituyen a Poppins (títulos) y Montserrat (texto) del sitio viejo. */
  --f-disp:"Bricolage",system-ui,sans-serif;   /* títulos */
  --f-texto:"Instrument",system-ui,sans-serif; /* todo lo demás */

  /* ── Escala tipográfica fluida ──
     Max = maqueta a 1440; min = maqueta a 390. Sustituye a los 233 font-size
     sueltos en px del main.css viejo: ningún componente vuelve a fijar el suyo. */
  --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, no números mágicos ── */
  --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 vertical entre secciones */
  --aire:clamp(16px,2.2vw,28px);    /* aire lateral de página */

  /* ── 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;               /* el viejo eran 1200 */
  --tactil:44px;

  /* ── Breakpoints canónicos: 640 · 860 · 980, más 1200 para el menú ──
     El 1200 es propio de este sitio y está medido: con diez enlaces, el
     carrito y el botón de la sesión, la barra no cabe en una fila por debajo
     de ahí. Vive en sitio.css, junto a la cabecera.
     Son TRES y se escriben a mano en el @media. El sitio viejo tenía diez
     cortes distintos (560, 600, 768, 900, 1024, 1200, mezclando min y max);
     ninguno de ellos sobrevive al rediseño. Un corte nuevo inventado en una
     pantalla es un defecto. */
}