/* Inessentia — Typography tokens
   Bitter (serif) for screen and section titles and for people's names;
   Outfit (display) for controls, buttons, figures, dates and nav; Mulish
   (sans) for legibility in body copy, details and eyebrows. Fluid sizing via
   clamp(). Las tres son auto-hospedadas (tokens/fonts.css); Zilla Slab is
   deprecated. */
:root {
  /* --- Families --- */
  /* `--font-serif` (Bitter) es la cara de TÍTULOS Y NOMBRES desde el pase de
     agosto 2026: títulos de pantalla y de sección, el nombre de la persona
     (bandeja, personas), la fecha grande del sábado, el saludo «Hola, X» de
     la paciente. Revierte la decisión anterior de «todo Outfit» — Bitter SÍ
     se sirve, auto-hospedada (tokens/fonts.css). Nunca en un botón ni en una
     cifra: eso sigue siendo Outfit. */
  --font-serif:   'Bitter', Georgia, 'Times New Roman', serif;      /* títulos y nombres */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;   /* títulos, cifras, fechas, botones, navegación */
  --font-sans:    'Mulish', system-ui, -apple-system, sans-serif;   /* cuerpo, detalles */

  /* --- Weights ---
     Pesos ligeros del pase de agosto 2026: títulos en --fw-medium (500),
     controles en --fw-regular (400), eyebrows en --fw-semibold (600) como
     techo. --fw-bold y --fw-extra se conservan declarados (los usa el layer
     `base.css` del sitio editorial, fuera de esta pantalla) pero no se usan
     para título, control ni eyebrow aquí: no engrosar.

     UNA EXCEPCIÓN, aprobada por Patricio el 2026-08-29 y acotada a propósito:
     el titular de `gracias.html` (`.gracias__titulo`, «¡Gracias!») va en
     --font-display con --fw-extra (800), -.025em y 1.03. Esa pantalla no tiene
     cabecera con saludo ni nada más que leer: el titular ES la pantalla, y con
     el peso 500 se quedaba sin voz.

     La excepción vive en `.gracias__titulo` de `estilo.css`, NO aquí, y eso es
     deliberado: subirla al token la arrastraría a los `h1` de la reja y del
     panel, que son otra cosa —el saludo con el nombre, Bitter 500 a 23px, al
     lado del logo—. Se consideró y se descartó el 2026-08-29: no es un cambio
     de tipografía, sería otra composición. Si algún día se quiere, se decide
     mirando las siete pantallas, no de rebote desde ésta. */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ── px → rem, 2026-09-05 ──────────────────────────────────────────────────
     Toda esta escala estaba en `px`, y un `px` NO obedece el tamaño de letra que
     la persona configuró en su navegador o su teléfono. Medido antes de tocar
     nada: subiendo la raíz de 16px a 24px no se movía **ni un elemento** de la
     pantalla de la paciente. No es que la app lo ignorara a propósito — estaba a
     una unidad de respetarlo.

     Los valores son los mismos: `1rem` son 16px en la raíz por omisión, así que
     a tamaño normal no cambia un píxel en ninguna de las tres apps que leen este
     archivo. La conversión es INERTE hasta que alguien sube la letra, que es
     justo lo que se buscaba.

     Se conservan los medios pasos (12.5, 13.5, 14.5…) en vez de ajustarlos a la
     escala. Redondearlos sería un cambio de diseño y esto es un cambio de unidad;
     mezclar los dos habría hecho imposible saber cuál movió qué.

     Las paradas `vw` de los `clamp()` se quedan como están: un `vw` responde al
     ancho de la ventana, que es otra pregunta y ya funcionaba. */
  /* --- Fluid display / heading scale --- */
  --fs-hero:     clamp(2.25rem, 5vw, 3.875rem);   /* @kind font */
  --fs-h1:       clamp(2rem, 4.6vw, 3.5rem); /* @kind font */
  --fs-section:  clamp(1.875rem, 4.4vw, 3.125rem); /* @kind font */
  --fs-h2:       clamp(1.75rem, 4.2vw, 3rem); /* @kind font */
  --fs-h3:       1.625rem;                     /* @kind font */
  /* El primer peldaño POR DEBAJO de --fs-h3, añadido el 2026-09-06. Entre
     --fs-body (16px) y --fs-h3 (26px) no había ninguno, y ocho tamaños
     distintos improvisaban en ese hueco: 16.5, 17, 18, 19, 20, 21, 22, 23.
     `--fs-h4` es el título pequeño —el de una pantalla dentro de la app, no
     el de la app—; hoy lo usa `.pantalla__titulo` de estilo.css, que ya valía
     exactamente esto. Los otros siete siguen literales a propósito: cada uno
     está a 1px o más de este peldaño, y moverlos sería un cambio de diseño,
     no de nombre. */
  --fs-h4:       1.25rem;                      /* @kind font */
  --fs-blog-h2:  clamp(1.5rem, 3vw, 2.125rem);   /* @kind font */

  /* ── CINCO peldaños bajo el cuerpo, no quince (2026-09-06) ─────────────────
     Consolidados por instrucción de Patricio. Antes de esto la app usaba QUINCE
     tamaños distintos entre 8.5 y 16px —un peldaño cada medio píxel— repartidos
     en 233 declaraciones: no era una escala, era una regla graduada. El uso lo
     medía así: 13px x61, 14px x30, 12px x25, 11.5px x21, 9.5px x17, 15px x16,
     12.5px x15, 16px x13, 10.5px x10, 11px x9, y cinco literales sueltos más.

     Los cinco están a 1.5px unos de otros (salvo el último) para que la
     diferencia se VEA. Nada se movió más de 1px al consolidar, y sólo un tramo
     llegó a ese máximo: los 15px pasaron a 14.

     POR QUÉ ESTOS CINCO NOMBRES Y NO OTROS. Cuatro conservan su valor EXACTO de
     siempre; sólo `--fs-badge` subió medio píxel. Se eligieron así a propósito:
     si se reutilizara un nombre viejo con un valor nuevo, un `var()` que se
     escapara del barrido cambiaría de tamaño EN SILENCIO. Los cinco retirados
     —`label-sm`, `meta-sm`, `meta`, `label`, `sm`— quedan sin declarar, así que
     un `var()` olvidado no resuelve a nada y se ve. Y hay guardián. */

  /* --- Body / UI scale --- */
  --fs-lead:     clamp(1rem, 1.2vw, 1.125rem); /* @kind font */
  /* Un escalón por encima del cuerpo, para texto que pesa más que el cuerpo
     sin llegar a ser un título: la cifra de una fila del libro, el texto del
     editor, el titular de un estado vacío. Tres reglas ya valían exactamente
     esto (17px) antes de tener nombre. */
  --fs-body-lg:  1.0625rem;                    /* @kind font */
  --fs-body:     1rem;                     /* @kind font */
  --fs-blog:     clamp(0.9375rem, 1.1vw, 1.0625rem); /* @kind font */
  --fs-xs:       0.875rem;                     /* @kind font */
  /* El tamaño MÁS USADO de toda la app —quince reglas— y hasta el 2026-09-06
     no tenía nombre: el texto de apoyo que acompaña sin competir. Ayudas bajo
     un control (`.agendar-dia__ayuda`, `.reticula__ayuda`), pies
     (`.reservas__pie`, `.pie-privacidad`), detalle secundario (`.barra__detalle`,
     `.huso`). Cae entre --fs-label (13px) y --fs-meta (12px) y no es ninguno
     de los dos: --fs-meta rotula un dato, esto se lee como frase. */
  --fs-caption:  0.78125rem;                   /* @kind font */

  /* Tres escalones por DEBAJO del piso de arriba (subidos de
     publico/admin/panel.css, Fase D del 2026-09-01, decisión de Patricio del
     2026-09-03: ya no son "del panel" — la pantalla de la paciente también
     los va a usar). Esta escala nace para el sitio editorial y nunca
     necesitó nada más chico que 12px; el panel sí, para rótulos en
     versalitas donde el tamaño chico compensa que las mayúsculas ocupan más
     alto de x y el tracking las separa. Equivalencia exacta con los nombres
     viejos, que panel.css sigue declarando él mismo hasta que el agente que
     posee ese archivo retire su copia y pase a var(--fs-*):
       --fs-admin-eyebrow (9.5px)  → --fs-eyebrow  (0.59375rem)
       --fs-admin-badge   (10.5px) → --fs-badge    (0.65625rem)
       --fs-admin-meta-sm (11.5px) → --fs-meta-sm  (0.71875rem)
     Cuando se escribió esta nota los dos lados decían lo mismo en px. Desde el
     2026-09-05 esta escala está en `rem` y la copia de panel.css sigue en px:
     valen igual a la raíz por omisión (16px) y dejan de valer igual en cuanto
     alguien sube la letra de su navegador — que es exactamente la diferencia
     que motivó el cambio. Un motivo más para que panel.css retire su copia. */
  --fs-eyebrow:  0.59375rem;                    /* @kind font */
  --fs-badge:    0.6875rem;                   /* @kind font */
  /* Nueve reglas escribían 11px a mano: cabeceras de columna
     (`.tabla-jornada thead th`), el rótulo de un campo (`.campo`), la leyenda
     de un grupo (`.agendar-brinco legend`), los ejes de la retícula del panel
     (`.reja-panel__dia/__hora`), las pestañas y las claves de la leyenda.
     Todo eso ROTULA una estructura, igual que --fs-label (13px), sólo que más
     chico — de ahí el sufijo, con el mismo criterio que --fs-meta-sm. */

  /* --- Line heights --- */
  --lh-tight:    1.08;  /* @kind font */
  --lh-snug:     1.2;   /* @kind font */
  --lh-body:     1.8;   /* @kind font */
  --lh-blog:     1.8;   /* @kind font */

  /* --- Letter spacing --- */
  --ls-tight:    -.015em; /* @kind font */
  --ls-label:    .16em;   /* @kind font */
  --ls-nav:      .08em;   /* @kind font */
  --ls-btn:      .06em;   /* @kind font */
}