/* ==========================================================================
   Sproochegalerie — Design tokens
   Valores de la charte graphique (LOLA / Editorial.lu, 2026).
   Mobile first: la escala base es la de 375px. Si cambia la marca, se cambia acá.
   ========================================================================== */

:root {
  /* --- Paleta ------------------------------------------------------------
     Diez colores en cinco pares claro/oscuro. La charte aplica el logo en los
     dos sentidos de cada par, nunca cruzando pares. */
  --oat: #eadfc9;
  --grey: #333230;

  --light-green: #5ec599;
  --dark-green: #023018;

  --lilac: #beafef;
  --purple: #31285b;

  --bright-red: #f45137;
  --burgundy: #440d00;

  --blue: #50a9e2;
  --navy: #022544;

  /* --- Roles --------------------------------------------------------------
     Los componentes consumen estos, nunca los colores crudos. Cada banda de la
     página redefine `--ink` y `--paper` con un par, y todo lo de adentro
     (títulos, bordes, botones) lo sigue solo. */
  --paper: var(--oat);      /* fondo de la banda */
  --ink: var(--grey);       /* texto y formas sobre ese fondo */
  --accent: var(--bright-red);

  /* Los cinco pares como conjunto, para las secciones y las categorías. */
  --pair-oat-paper: var(--oat);          --pair-oat-ink: var(--grey);
  --pair-green-paper: var(--light-green); --pair-green-ink: var(--dark-green);
  --pair-lilac-paper: var(--lilac);      --pair-lilac-ink: var(--purple);
  --pair-red-paper: var(--bright-red);   --pair-red-ink: var(--burgundy);
  --pair-blue-paper: var(--blue);        --pair-blue-ink: var(--navy);

  /* --- Tipografía ---------------------------------------------------------
     Sans Plomb para display y titulares, Area para texto corrido.
     Las familias se declaran en base.css; acá sólo la escala. */
  /* ATENCIÓN: los archivos TRIAL de Sans Plomb sólo mapean 66 glifos —ASCII
     básico— y no traen NINGUNA vocal acentuada ni la ligadura œ. En un sitio en
     francés eso significa que cada é, à, ç y œ de un titular se dibuja con la
     fuente de reserva y se nota. Está medido en la tabla `cmap` de los seis
     archivos; Area, en cambio, mapea 383 y las trae todas.
     La reserva va encabezada por condensadas pesadas, que disimulan algo más
     que una Arial Narrow, pero es un parche: lo que lo resuelve es conseguir
     los archivos completos. Ver README. */
  --font-display: "Sans Plomb", "Haettenschweiler", "Impact", "Arial Narrow", sans-serif;
  --font-display-cond: "Sans Plomb Condensed", "Haettenschweiler", "Impact",
    "Arial Narrow", sans-serif;
  --font-text: "Area", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Escala mobile. Los titulares grandes usan clamp para no romperse entre
     320 y 430px, que es todo el rango real de teléfono. */
  --fs-hero: clamp(42px, 13.5vw, 58px);
  --fs-h2: clamp(38px, 12.8vw, 58px);
  --fs-h3: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-label: 12px;     /* pastillas y etiquetas, siempre en mayúscula */

  --lh-display: 0.92;   /* Sans Plomb tiene ascendentes cortas: aguanta apretado */
  --lh-tight: 1.15;
  --lh-body: 1.5;

  /* --- Espaciado ----------------------------------------------------------
     Escala de 4px. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  --gutter: 20px;           /* margen lateral en mobile */
  /* Alto de la barra fija. Lo consumen el header y el aire superior del panel
     de navegación, así que no pueden desincronizarse. */
  --header-h: 80px;
  --band-pt: var(--s-16);   /* aire sobre el encabezado de banda */
  --band-pb: var(--s-16);

  /* --- Formas -------------------------------------------------------------
     El logo es un bocadillo: un rectángulo con skewY y una cola. Ese ángulo es
     la firma de la marca y se reusa en los bloques destacados. Medido sobre el
     vectorial de la charte: el borde superior baja 137.789 sobre 617.458 de
     ancho -> 12.58°. */
  --skew: -12.58deg;
  --r-card: 0;              /* la charte no usa esquinas redondeadas */
  --r-pill: 999px;          /* salvo en las pastillas de filtro */
  /* 1,5 y no 2: a 2 los filetes de las cards, los botones de línea y el
     recuadro del menú pesaban más que el texto que encierran. */
  --border-w: 1.5px;

  /* --- Movimiento --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-panel: 340ms;       /* entrada del panel de navegación */

  /* La flecha de todos los botones. Dibujada y no un carácter: el «→» de cada
     fuente sale distinto, y en los botones de texto quedaba más gorda o más
     larga que la del hero. Trazo de 2, cantos vivos, asta corta (17 de largo):
     la del hero medía 26 y en botones chicos se comía el rótulo. Se usa como
     máscara para que tome `currentColor`. */
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5'/%3E%3C/svg%3E");
}