/* Tokens de diseño — derivados de DESIGN.md (validado: 0 errores, contraste WCAG AA) */
/* Archivo Narrow — SIL OFL, autoalojada (sin llamadas a terceros). */
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ArchivoNarrow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ArchivoNarrow-700.woff2") format("woff2");
}

:root{
  /* ---- Color ---- */
  --cb-paper:#FBFBF9;        /* neutral */
  --cb-ink:#111111;          /* primary  18,23:1 sobre papel */
  --cb-accent:#D21E1E;       /* tertiary 5,14:1 sobre papel */
  --cb-muted:#6E6E6E;        /* secondary: 4,92:1 sobre PAPEL */
  --cb-muted-dark:#999999;   /* muted sobre SUPERFICIE OSCURA: 6,35:1 */
  --cb-accent-dark:#FF6B6B;  /* acento sobre OSCURO: 6,52:1 (el #D21E1E solo da 3,40) */
  --cb-border:#E6E5E1;       /* decorativo */
  --cb-tag-teal:#007070;     /* etiquetas */
  --cb-tag-ochre:#907030;    /* etiquetas */
  --cb-surface-dark:#161616; /* barra y reproductor */
  --cb-on-dark:#FFFFFF;

  /* ---- Tipografía: roles, no tamaños sueltos -------------------------------
     Regla del sistema: el CUERPO manda. Se dimensiona primero para leer y la
     escala crece alrededor; nunca se encoge el cuerpo para que luzcan los
     titulares. Cada rol lleva su tamaño, interlineado y tracking.
     Mínimo práctico del sitio: 14px (caption); 13px solo en versalitas. */
  --cb-text-display: clamp(2rem, 1.6rem + 2vw, 3rem);
  --cb-text-h1:      clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --cb-text-h2:      clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --cb-text-h3:      clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --cb-text-body-lg: 1.125rem;   /* 18px — texto de lectura largo */
  --cb-text-body:    1.0625rem;  /* 17px — cuerpo */
  --cb-text-sm:      0.9375rem;  /* 15px — secundario */
  --cb-text-caption: 0.875rem;   /* 14px — metadatos (suelo) */
  --cb-text-overline:0.8125rem;  /* 13px — versalitas con tracking */

  --cb-lh-display:1.05; --cb-lh-heading:1.15; --cb-lh-body:1.65; --cb-lh-tight:1.3;
  --cb-track-display:-0.02em; --cb-track-heading:-0.01em; --cb-track-overline:0.06em;

  --cb-font-display:"Archivo Narrow","Arial Narrow",sans-serif;
  --cb-font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --cb-measure:68ch;         /* longitud de línea legible (65-75ch) */

  /* ---- Espaciado / formas ---- */
  --cb-space-1:8px; --cb-space-2:16px; --cb-space-3:24px; --cb-space-4:40px;
  --cb-radius-sm:2px; --cb-radius-md:4px; --cb-radius-lg:8px;
  --cb-accent-rule:3px;
}