/*
 * Foundation CSS — fase 1, ampliado en la fase 2.
 *
 * Sigue sin ser el sistema visual: no hay shell, ni layout, ni
 * composicion. La fase 3 construye la cabecera, la navegacion y el pie.
 * La fase 2 solo aplica el reparto de roles tipograficos, que es lo
 * necesario para verificar en navegador que las fuentes cargan y se
 * resuelven.
 *
 * Sobre los valores de este archivo:
 *
 *   - Todo valor VISUAL procede de tokens.css. Aqui no se declara
 *     ninguno, ni se aproxima, ni se completa lo que el canon aun no
 *     define.
 *   - Los unicos literales admitidos son RESETS TECNICOS sin carga
 *     visual: box-sizing y la eliminacion de margenes de agente de
 *     usuario.
 *
 * Regla que gobierna esta fase: la fase 2 traduce el sistema visual, no
 * completa en silencio decisiones que le falten. Donde el canon no fija
 * un valor, aqui no aparece uno.
 */

/* ------------------------------------------------------------------ *
 * Resets tecnicos
 * ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3 {
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Reparto de roles tipograficos — Sistema Visual V2, seccion 3
 * Newsreader en display. Public Sans en cuerpo, UI y cifras de tabla.
 * ------------------------------------------------------------------ */

body {
  background-color: var(--surface-base);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  /* El eje optico de Newsreader responde al tamano por si solo. */
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--size-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-h2);
}

h3 {
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-h3);
}

/* Cifras en datos y tablas: siempre tabulares. Seccion 3. */
table,
[data-numeric] {
  font-variant-numeric: tabular-nums;
}

/*
 * ANILLO DE FOCO — deliberadamente ausente en la fase 2.
 *
 * El token de color --focus existe en tokens.css y sus dos
 * comprobaciones de contraste pasan. Pero el canon NO fija todavia el
 * grosor ni el desplazamiento de un anillo de foco general: el unico
 * valor documentado, 2 px, pertenece al checkbox en la seccion 15.
 *
 * Inventar aqui un grosor porque "es lo habitual" seria completar una
 * decision visual que nadie tomo. La implementacion del anillo pasa a
 * la fase 3, con su gate de accesibilidad. Hasta entonces rige el foco
 * por defecto del navegador, que es visible.
 */