/*
Typography global — se carga en TODO el sitio (ver functions.php).
Solo tipografía. Nada de color, nada de layout, nada de imágenes.
Editar acá afecta a header, footer, páginas, blog, 404, todo.
*/

/* Estas son las "variables" (custom properties). Completá los valores acá UNA
   sola vez, y se usan en todo el archivo con var(--nombre). Así si mañana
   querés cambiar la fuente de todo el sitio, la cambiás en un solo lugar. */
:root {
  --font-base: ;      /* la tipografía del texto normal (párrafos) */
  --font-heading: ;    /* la tipografía de los títulos (h1, h2, h3...) */

  --fs-base: ;         /* tamaño de letra del texto normal */
  --fs-sm: ;            /* tamaño de letra chico (para texto secundario) */
  --fs-lg: ;            /* tamaño de letra grande */
  --fs-xl: ;            /* tamaño de letra extra grande */
  --fs-h1: ;            /* tamaño de letra específico de los h1 */
  --fs-h2: ;            /* tamaño de letra específico de los h2 */
  --fs-h3: ;            /* tamaño de letra específico de los h3 */

  --lh-base: ;          /* line-height (interlineado) del texto normal */
  --lh-heading: ;       /* line-height de los títulos */

  --fw-regular: ;       /* font-weight normal (ej: 400) */
  --fw-medium: ;         /* font-weight medio (ej: 500) */
  --fw-bold: ;           /* font-weight negrita (ej: 700) */
}

/* Esto aplica la tipografía base a TODO el texto del sitio por defecto
   (cualquier elemento que no tenga una regla más específica hereda esto). */
body {
  font-family: var(--font-base);   /* qué fuente usa el texto normal */
  font-size: var(--fs-base);       /* qué tamaño usa el texto normal */
  line-height: var(--lh-base);     /* qué interlineado usa el texto normal */
  font-weight: var(--fw-regular);  /* qué grosor usa el texto normal */
}

/* Esto aplica a TODOS los títulos por igual (la fuente y el interlineado
   suele ser el mismo para h1 a h6, solo cambia el tamaño). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
}

/* Acá sí se separa el tamaño de cada nivel de título. */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }