/* 02-tipografia.css
   ESCALA TIPOGRAFICA. Define tamanos que crecen con la pantalla en vez de
   saltar entre cortes. La base es el truco de todo lo demas: si el texto
   cambia de tamano con clamp, el resto se puede medir en rem y acompana.

   Regla util: cuerpo de texto entre 60 y 75 caracteres de ancho. Mas que eso,
   el ojo pierde el renglon al volver. Eso es lo que hace max-width en ch.

   NORMALIZADO: la escala (--t-*, --linea-*, --fuente-*) NO se declara aqui.
   Vive SOLO en tokens.css. Antes este archivo tenia su propio :root con los
   mismos nombres y otros valores (--t-xl, --t-2xl, --t-3xl distintos), de modo
   que el valor final dependia del orden de carga. Una sola fuente de verdad.
   ========================================================== */

/* La pagina se pinta ACA, no en cada pagina: el fondo y el color de texto del
   tema son parte del kit. Antes cada pagina lo repetia a mano (la demo, con un
   <style> en linea) y la que se olvidaba salia DESNUDA: fondo transparente y
   texto negro por defecto, ilegible en cualquier tema oscuro. Una sola vez. */
body {
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-md);
  line-height: var(--linea-normal);
}

h1 { font-family: var(--fuente-titulo); font-size: var(--t-3xl); line-height: var(--linea-apretada); letter-spacing: -0.02em; }
h2 { font-family: var(--fuente-titulo); font-size: var(--t-2xl); line-height: var(--linea-apretada); letter-spacing: -0.02em; }
h3 { font-family: var(--fuente-titulo); font-size: var(--t-xl); line-height: var(--linea-apretada); }

/* Parrafos: el ancho se limita en ch, no en px */
p { max-width: 70ch; }
.lead { font-size: var(--t-lg); line-height: var(--linea-suelta); }

/* Texto secundario y etiquetas */
small, .texto-chico { font-size: var(--t-sm); }
.antetitulo {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

code, pre { font-family: var(--fuente-mono); font-size: var(--t-sm); }

/* El ancho comodo de lectura, para un contenedor de texto */
.prosa { max-width: 68ch; }