@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');

/* ==========================================================================
   TALLER — la paleta y las dos letras, en un solo sitio

   Cada lámina llegó de un sitio distinto y traía su propio color y su propia
   tipografía. Aquí se les da una sola. Esta hoja se carga DESPUÉS de la hoja
   propia de cada página, así que sus variables ganan: no hay que reescribir
   cada regla, basta con reasignar el nombre que esa página ya usaba.

   Siete colores. Nada más. Si algo necesita un octavo, casi siempre es que
   está pidiendo el mismo con otra opacidad.
   ========================================================================== */

:root{
  /* ── La paleta ─────────────────────────────────────────── */
  --tinta:   hsl(0, 0%, 10%);      /* #1A1A1A · el negro, para texto duro   */
  --indigo:  hsl(250, 45%, 21%);   /* #251D4E · el fondo de las láminas     */
  --azul:    hsl(220, 51%, 51%);   /* #426DC2 · el acento que llama         */
  --aqua:    hsl(180, 40%, 65%);   /* #82CACA · el acento que acompaña      */
  --cielo:   hsl(216, 96%, 89%);   /* #C8DEFE · claros sobre fondo oscuro   */
  --niebla:  hsl(0, 0%, 92%);      /* #EBEBEB · separadores, cajas          */
  --papel:   hsl(210, 17%, 98%);   /* #F9FAFB · el fondo de las claras      */

  /* ── Lo derivado ───────────────────────────────────────────
     Mismos colores con otra opacidad. Se nombran por su oficio,
     no por su tono, para que se usen donde toca. */
  --apagado:      hsl(250, 12%, 45%);          /* texto secundario en claro */
  --linea:        hsla(250, 45%, 21%, .14);    /* filete sobre claro        */
  --linea-clara:  hsla(216, 96%, 89%, .18);    /* filete sobre oscuro       */
  --sombra:       hsla(250, 45%, 12%, .16);
  --velo-oscuro:  hsla(250, 45%, 12%, .55);
  --sobre-indigo: hsla(216, 96%, 89%, .72);    /* texto suave en oscuro     */

  /* ── Las dos letras ────────────────────────────────────────
     Montserrat lo dice todo; Fraunces solo los títulos. Un texto
     que dude entre las dos es que no es un título. */
  --texto:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titulo: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* ══════════════════════════════════════════════════════════
     El puente: lo que cada página llamaba lo suyo, reasignado.
     ══════════════════════════════════════════════════════════ */

  /* — Índice de secciones (page3.css) — */
  --font-main:        var(--texto);
  /* "display" era el nombre que estas paginas le daban a su letra de titular:
     ahi es donde entra Fraunces. */
  --font-display:     var(--titulo);
  --accent-yellow:    var(--azul);
  --accent-yellow-hover: var(--indigo);
  --text-black:       var(--tinta);
  --text-muted:       var(--apagado);
  --text-light:       var(--apagado);
  --bg-white:         var(--papel);

  /* — Tipografía cinética (page2.css) — */
  --bg-color:         var(--papel);
  --text-blue:        var(--azul);
  --text-dark:        var(--tinta);
  --border-color:     var(--linea);

  /* — Estante de expedientes (styles.css) — */
  --bg-main:          var(--papel);
  --shelf-line:       var(--linea);
  --font-serif-title: var(--titulo);
  --font-serif-alt:   var(--titulo);
  --font-sans:        var(--texto);
}

/* Fraunces es variable: sin esto sale con la anchura y el corte de un texto
   corrido, que a 4rem se ve blando. Los títulos piden el ojo grande. */
h1, h2, h3, .titular, .hoja-titulo, .releases-title, .folder-main-title{
  font-variation-settings: 'opsz' 120, 'SOFT' 0, 'WONK' 0;
}