/* ===================================================================
   Randall Chacón — tokens tipográficos
   Se carga ANTES de style.css en todas las páginas. Única fuente de
   familias, pesos, tamaños, interlineados y tracking del sitio.

   Fuentes de marca (decisión de Randall, 2026-10-18): solo Manrope y
   Source Code Pro, autoalojadas en /assets/fonts/ (Fontsource 5.3.0,
   subset latino, archivos sin modificar; licencia SIL OFL 1.1 junto a
   cada archivo). Reglas vigentes:
   SSOT/20_Operations/Infrastructure/Sitio_Web_Sistema_Visual_y_CSS.md
   (historia del proyecto: SSOT/90_Archive/Sitio_Web_Tipografia_2026-10/)

   REGLAS
   · Los componentes usan solo la capa 2 (semánticos); la capa 1 existe
     para construir la 2, no para consumirla directamente.
   · Nada de px en tipografía: tamaños en rem, para respetar el tamaño
     de letra que el visitante configure en su navegador.
   · Si un diseño no encaja en la escala, se ajusta el diseño; no se
     crea un token nuevo. Nuevas familias o pesos: solo con decisión
     explícita de Randall.
   · Sin cursivas: Manrope no tiene cursiva real. El énfasis se marca
     con peso o color.
   · Antes de subir (debe salir vacío al terminar la migración):
     grep -rnE "font-size: *[0-9.]+px|font-family: *[^v ]" assets/css --exclude=tokens.css
   =================================================================== */

/* ── FUENTES ──
   Al actualizar una fuente, cambiar la versión en el nombre del
   archivo: .htaccess cachea woff2 un año y la URL nueva invalida la
   caché. El preload de Manrope en includes/head.php debe apuntar al
   mismo archivo. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-v5.3.0-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-code-pro-v5.3.0-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Respaldos con métricas ajustadas: mientras carga la fuente real, la
   del sistema ocupa el mismo espacio y el texto no salta (CLS).
   Valores calculados con las métricas de @capsizecss/metrics 4.3.0
   (ancho medio, ascendente y descendente). */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.18%;
  ascent-override: 103.31%;
  descent-override: 29.08%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Source Code Pro Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 99.98%;
  ascent-override: 98.42%;
  descent-override: 27.30%;
  line-gap-override: 0%;
}

:root {
  /* ── CAPA 1: PRIMITIVOS ── */
  --font-manrope: "Manrope", "Manrope Fallback", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-source-code-pro: "Source Code Pro", "Source Code Pro Fallback", ui-monospace, Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Escala base 16px. Mínimo absoluto: 0.75rem (12px). */
  --size-75: 0.75rem;      /* 12px */
  --size-81: 0.8125rem;    /* 13px */
  --size-88: 0.875rem;     /* 14px */
  --size-100: 1rem;        /* 16px */
  --size-113: 1.125rem;    /* 18px */
  --size-125: 1.25rem;     /* 20px */

  /* Fluidos: mínimo a 375px de ancho, máximo a 1440px, lineal entre ambos. */
  --size-fluid-h2: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);         /* 24–32px */
  --size-fluid-h1: clamp(1.875rem, 1.567rem + 1.315vw, 2.75rem);    /* 30–44px */
  --size-fluid-display: clamp(2rem, 1.604rem + 1.69vw, 3.125rem);   /* 32–50px */

  --leading-none: 1.1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-caption: 1.5;
  --leading-normal: 1.6;
  --leading-reading: 1.7;

  --tracking-tighter: -0.02em;
  --tracking-tight: -0.015em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;

  /* Ancho de línea de textos: los anchos de titulares (16–26ch) son
     decisiones de composición de cada bloque y no usan estos tokens. */
  --measure-narrow: 56ch;  /* entradillas y descripciones breves */
  --measure: 65ch;         /* párrafos generales */
  --measure-reading: 68ch; /* lectura larga: artículos */

  /* ── CAPA 2: SEMÁNTICOS ── */
  --font-heading: var(--font-manrope);
  --font-body: var(--font-manrope);
  --font-code: var(--font-source-code-pro);

  --text-label: var(--size-75);       /* mínimo: etiquetas mono en mayúsculas, notas mínimas */
  --text-caption: var(--size-81);     /* notas, metadatos, pies */
  --text-body-sm: var(--size-88);     /* texto secundario de tarjetas */
  --text-body: var(--size-100);       /* texto general */
  --text-lead: var(--size-113);       /* entradillas */
  --text-h3: var(--size-125);
  --text-h2: var(--size-fluid-h2);
  --text-h1: var(--size-fluid-h1);
  --text-display: var(--size-fluid-display);

  --leading-heading-xl: var(--leading-none);   /* display, h1 */
  --leading-heading-lg: var(--leading-tight);  /* h2 */
  --leading-heading-md: var(--leading-snug);   /* h3 */
  --leading-small: var(--leading-caption);     /* etiquetas, notas y texto pequeño */
  --leading-body: var(--leading-normal);
  --leading-article: var(--leading-reading);

  --tracking-heading-xl: var(--tracking-tighter);
  --tracking-heading-lg: var(--tracking-tight);
  --tracking-heading-md: var(--tracking-snug);
  --tracking-body: var(--tracking-normal);
  --tracking-eyebrow: var(--tracking-label);

  --weight-body: var(--weight-regular);
  --weight-nav: var(--weight-medium);
  --weight-heading-sm: var(--weight-semibold); /* h3 */
  --weight-heading: var(--weight-bold);        /* display, h1, h2 */
  --weight-control: var(--weight-semibold);    /* botones */
  --weight-strong: var(--weight-semibold);
  --weight-emphasis: var(--weight-medium);     /* sustituye a la cursiva: em, citas */
  --weight-eyebrow: var(--weight-semibold);
}