/* tokens.css — Variables globales. Palette Pompéi, typo, grille, breakpoints. */

:root {
  /* ---------- Palette ---------- */
  --c-bg:          #ECEFF3;   /* papier givre — off-white bleuté froid */
  --c-bg-corner:  #D8DEE6;   /* gradient radial vers les coins — frost plus profond */
  --c-ink:         #14110F;   /* noir d'encre — jamais #000 */
  --c-red:         #9B2915;   /* rouge de Pompéi — 3 % max de la surface */
  --c-meta:        #6E7782;   /* gris froid metadata */

  /* ---------- Typographies ---------- */
  --f-display: "Instrument Serif", "Times New Roman", Times, serif;
  --f-sans:    "Geist Sans", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Tailles — desktop par défaut ---------- */
  --fs-h1:       120px;
  --fs-h2:        64px;
  --fs-display-l: 96px;
  --fs-display-m: 64px;
  --fs-card-title: 36px;
  --fs-example-title: 22px;
  --fs-sub:      28px;
  --fs-body:     16px;
  --fs-small:    15px;
  --fs-mono:     11px;
  --fs-kicker:   12px;

  /* Line-heights */
  --lh-display:  1.04;
  --lh-sub:      1.35;
  --lh-body:     1.55;
  --lh-mono:     1.4;

  /* ---------- Espacements ---------- */
  --pad-x:        80px;
  --section-y:    160px;
  --gap-s:        8px;
  --gap-m:        16px;
  --gap-l:        32px;
  --gap-xl:       64px;

  /* ---------- Grille ---------- */
  --grid-max:     1360px;
  --grid-cols:    12;
  --grid-gap:     24px;

  /* ---------- Rayons & bordures ---------- */
  --r-field:      2px;
  --r-pill:       999px;
  --b-hairline:   1px;
  --hairline:     80px;

  /* ---------- Motion ---------- */
  --ease-std:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     140ms;
  --dur-med:      220ms;
  --dur-slow:     400ms;

  /* ---------- Layout ---------- */
  --nav-h:        72px;
  --ticker-h:     28px;
  --z-ticker:     40;
  --z-nav:        50;
  --z-cursor:     100;
  --z-modal:      80;
}

/* ---------- Tablet (768-1023 px) ---------- */
@media (max-width: 1023px) {
  :root {
    --fs-h1:       72px;
    --fs-h2:       52px;
    --fs-display-l: 72px;
    --fs-sub:      22px;
    --fs-body:     15px;
    --pad-x:       40px;
    --section-y:   120px;
  }
}

/* ---------- Mobile (< 768 px) ---------- */
@media (max-width: 767px) {
  :root {
    --fs-h1:       48px;
    --fs-h2:       40px;
    --fs-display-l: 48px;
    --fs-display-m: 40px;
    --fs-card-title: 28px;
    --fs-example-title: 20px;
    --fs-sub:      18px;
    --fs-body:     14px;
    --pad-x:       24px;
    --section-y:   96px;
    --grid-gap:    16px;
  }
}