/* ═══════════════════════════════════════════════════════════════════
   muda-fonts-v1.1.css — MUDA · las cinco voces, cargadas de verdad
   ═══════════════════════════════════════════════════════════════════
   Design System MUDA · Koi Samsa
   Versión: 1.1 · 2026-07-14

   SINOPSIS
   Hasta hoy MUDA declaraba sus fuentes pero no las cargaba: los tokens
   nombraban Newsreader y Albert Sans, y el navegador pintaba Georgia y
   la sans del sistema. Este archivo es la fontanería que faltaba.

   GUÍA RÁPIDA
   Qué contiene: las reglas @font-face de las cinco voces firmadas en
                 !DECISIÓN — Sistema tipográfico MUDA (27-jun-2026).
   Cuándo se edita: solo si cambia una fuente (decisión de marca) o si
                 se añade un peso. Los tokens NO viven aquí: viven en
                 muda-tokens-v1.1.css.
   Qué NO tocar: el `font-style: normal` de las caras itálicas. No es
                 una errata — ver "La trampa de la cursiva", abajo.
   Dependencias: ./fonts/*.woff2 (ruta relativa a este archivo).

   ORQUESTADOR
   En Astro: importar este archivo ANTES que los tokens, y servir la
   carpeta ./fonts/ desde /public/fonts/. Ajustar entonces las rutas
   url() a /fonts/*.woff2 (absolutas desde la raíz del sitio).
   El Storybook NO usa este archivo: lleva las fuentes embebidas en
   base64, porque se abre con doble clic y no tiene servidor detrás.

   ═══ POR QUÉ ALOJADAS Y NO GOOGLE FONTS ══════════════════════════
   No es preferencia técnica: es protección de datos. Enlazar a
   fonts.gstatic.com hace que el navegador de cada visitante contacte
   con un servidor de Google, y eso transmite su IP sin consentimiento.
   Un tribunal alemán (LG München I, 20-ene-2022, 3 O 17493/20) condenó
   a un sitio por exactamente esto. Alojadas, el visitante solo habla
   con koisamsa.com. Doctrina MUDA, escrita desde el v0: "nunca Google
   Fonts".
   Los .woff2 se descargaron de Google Fonts una vez, y viven en el
   vault. Las cinco son de licencia libre (OFL / Apache 2.0).

   ═══ LA TRAMPA DE LA CURSIVA (leer antes de tocar nada) ══════════
   Las caras itálicas se declaran `font-style: normal` a propósito.

   Si se declaran `italic`, el navegador cree que debe inclinar una
   letra que YA viene inclinada, y le suma su propia cizalla sintética
   encima (+7,66° medidos en Chromium 149). Resultado: doble inclinación,
   renglón descuadrado, cara de marca rota. Es el "faux italic".

   Aquí se usa el MÉTODO B de cdc-codigo v1.4: cada itálica es una
   familia con nombre propio ("Newsreader Italic"), declarada normal,
   y se invoca por su nombre — nunca poniéndole font-style:italic encima.

   Test de los 2 segundos: mira una palabra en cursiva. La `a` de
   Newsreader itálica auténtica es de UN piso y casi vertical. Si la ves
   muy inclinada, o de dos pisos, es faux: algo le ha puesto italic encima.

   (`font-synthesis: none` NO arregla esto en Chromium. Está medido.
   No es la solución, no lo parece y no lo será.)
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1 · NEWSREADER — la voz serif ─────────────────────────────────
   Prosa, editorial, títulos de marca. Variable en dos ejes: opsz
   (tamaño óptico) y wght (peso). El eje opsz es diseño, no bug: la
   letra se afina sola según el cuerpo al que se use. No desactivarlo. */

@font-face {
  font-family: "Newsreader";
  src: url("./fonts/newsreader-roman-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* La itálica auténtica, con nombre propio y declarada NORMAL (Método B).
   Se invoca así:  font-family: "Newsreader Italic";
   NUNCA así:      font-family: "Newsreader"; font-style: italic;  ← faux */
@font-face {
  font-family: "Newsreader Italic";
  src: url("./fonts/newsreader-italic-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* ── 2 · ALBERT SANS — la voz de interfaz ──────────────────────────
   UI y señalética. Regla de marca (!DECISIÓN): el peso real se pide
   un escalón por encima del nominal — Albert pinta más ligero de lo
   que su número promete. */

@font-face {
  font-family: "Albert Sans";
  src: url("./fonts/albert-sans-roman-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans Italic";
  src: url("./fonts/albert-sans-italic-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ── 3 · FIRA SANS — labels, datos, técnico ────────────────────────
   No es variable: pesos estáticos. Se cargan los tres que el sistema
   usa (400 · 500 · 600) y dos itálicas. Si un día hace falta un peso
   más, se descarga y se añade aquí — no se sintetiza. */

@font-face {
  font-family: "Fira Sans";
  src: url("./fonts/fira-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("./fonts/fira-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("./fonts/fira-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans Italic";
  src: url("./fonts/fira-sans-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans Italic";
  src: url("./fonts/fira-sans-italic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ── 4 · FIRA CODE — la mono ───────────────────────────────────────
   Código y datos tabulares. Variable en peso. Trae ligaduras de
   programación; en MUDA no se usan (no hacen falta y confunden a quien
   lee un token), así que se apagan abajo, en la clase de uso. */

@font-face {
  font-family: "Fira Code";
  src: url("./fonts/fira-code-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}


/* ── 5 · MATERIAL SYMBOLS — la iconografía ─────────────────────────
   Firmada en !DECISIÓN por una razón formal, no de marca: es
   paramétrica (ejes opsz/wght/FILL/GRAD), así que el icono se afina
   al registro tipográfico en vez de imponer el suyo. Apache 2.0.

   ⚠ DEUDA DECLARADA (no es descuido, es una decisión aplazada):
   el archivo variable completo pesa 3,8 MB porque trae los ~3.000
   iconos del catálogo. Eso es insostenible en producción.
   Se subsetea —se recorta a los iconos que el sitio usa de verdad—
   el día que exista el inventario de iconos firmado. Hoy no existe:
   `KS-icon-inventory-completo.md` es un barrido de necesidades en SVG,
   no una lista de nombres de Material Symbols.
   Hasta entonces conviven dos archivos:
     · material-symbols-subset-24.woff2  (3,8 MB · completo · con ejes)
     · material-symbols-subset-24.woff2     (3,6 KB · 24 iconos · sin ejes)
   El Storybook usa el subset. Astro usará el completo hasta que se
   firme el inventario, y entonces el subset definitivo.
   → Pendiente: KS — Firmar el inventario de iconos Material Symbols. */

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("./fonts/material-symbols-subset-24.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: block; /* block, no swap: un icono a medio cargar es un cuadro negro
                          o un texto suelto ("search"), y eso sí se ve. */
}


/* ── Clases de uso de la iconografía ───────────────────────────────
   Los iconos se escriben por su nombre en ligadura: <span class="muda-icon">search</span>
   Es legible en el HTML sin diccionario de códigos — eso es Elocuencia. */

.muda-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Las cuatro perillas de Material Symbols, expuestas como modificadores.
   No son decoración: son los ejes que justifican haber elegido esta
   iconografía y no otra. */
.muda-icon--fill   { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0,   "opsz" 24; }
.muda-icon--light  { font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0,   "opsz" 24; }
.muda-icon--bold   { font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0,   "opsz" 24; }
.muda-icon--onDark { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" -25, "opsz" 24; }


/* ── Higiene de render ─────────────────────────────────────────────
   El tamaño óptico es diseño: se deja actuar. */
:root {
  font-optical-sizing: auto;
}

/* La mono sin ligaduras de programación: en MUDA se leen tokens, no se
   programa. `--muda-color-*` con la flecha de "->" convertida en glifo
   sería mentir sobre lo que pone el archivo. */
.muda-mono,
code, kbd, samp, pre {
  font-variant-ligatures: none;
}