/* ==========================================================
   ODH Motion — tokens
   Paleta «Vibrante» (octubre 2026) y tipografía aprobada; escala
   ampliada para tipografía cinética. Contrastes detallados abajo.
   ========================================================== */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Paleta «Vibrante»
     #F9F5EB crema · #EA5455 coral · #F07B3F naranja · #2D4059 pizarra · #002B5B azul noche
     Derivados solo para cumplir contraste en texto pequeño:
     --coral-ink #B8353A (5.4:1 sobre crema) · --peach #F7A072 (6.8:1 sobre azul, 5.1:1 sobre pizarra)
     Usos verificados (WCAG 2.2 AA):
       azul/crema 12.9 · pizarra/crema 9.7 · coral/crema 3.3 (solo texto grande y formas)
       azul/naranja 5.1 (banda naranja) · azul/coral 3.9 (solo texto grande)
       crema/azul 12.9 · crema/pizarra 9.7 · #C3CCD8/azul 8.7 · #C3CCD8/pizarra 6.5 */
  --paper: #F9F5EB;
  --paper-2: #F2EBDC;
  --white: #FFFFFF;
  --navy: #002B5B;
  --slate: #2D4059;
  --coral: #EA5455;
  --orange: #F07B3F;
  --coral-ink: #B8353A;
  --peach: #F7A072;

  --ink: var(--navy);
  --ink-2: var(--slate);
  --rule: rgba(0, 43, 91, .14);
  --rule-strong: rgba(0, 43, 91, .68);

  --on-ink: #F9F5EB;
  --on-ink-2: #C3CCD8;
  --accent-on-dark: var(--peach);
  --rule-on-ink: rgba(249, 245, 235, .2);

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-mega: clamp(4.5rem, 1.5rem + 12vw, 15rem);
  --fs-display: clamp(2.75rem, 1rem + 5.6vw, 7.2rem);
  --fs-h1: clamp(2.6rem, 1.2rem + 5vw, 6.5rem);
  --fs-h2: clamp(2.1rem, 1.2rem + 3.2vw, 4.6rem);
  --fs-h3: clamp(1.55rem, 1.15rem + 1.4vw, 2.4rem);
  --fs-h4: clamp(1.25rem, 1.1rem + .55vw, 1.6rem);
  --fs-quote: clamp(1.9rem, 1.1rem + 3vw, 4rem);
  --fs-lede: clamp(1.125rem, 1.03rem + .4vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-meta: .8125rem;

  --gutter: clamp(18px, 4vw, 64px);
  --col-gap: clamp(16px, 2vw, 32px);
  --max: 1520px;
  --measure: 64ch;
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem;
  --sp-5: clamp(3rem, 2rem + 4vw, 6.5rem);
  --sp-6: clamp(4.5rem, 2.5rem + 7vw, 11rem);

  --hd-h: 76px;
  --pill: 999px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}