/* ============================================================================
   tokens.css — KALVERA
   TOUT hex vit ici, dans :root. Zéro couleur en dur ailleurs (règle 1 de cs-build).

   LA PALETTE EST UNE TRANSPOSITION, PAS UNE INVENTION. Les rôles et les rapports de
   clarté de la cible sont conservés ; les teintes changent. Vérifié numériquement :

     cible  sable  #a89474  L 62.3  chroma 19.8      contraste sable/encre 4.98:1
     clone  pierre #8299ad  L 62.1  chroma 13.3      contraste pierre/nuit 4.90:1
     cible  encre  #2c2824  L 16.4
     clone  nuit   #232a33  L 16.8                   écart de contraste : 0.08

   ΔE₇₆(#a89474, #8299ad) = 33.3 — au-dessus des DEUX seuils (fond ≥ 8, accent ≥ 25).

   POURQUOI LE FROID ET PAS AUTRE CHOSE. La cible n'a qu'UNE couleur à chroma ≥ 15, et
   c'est sa dominante : la contrainte du barème porte donc sur toute la palette du clone,
   dont aucune couleur ne doit tomber sous ΔE 25 de ce sable. Mesuré : le vert-de-gris
   #93b0a4 rend 23,6 et le rose argile #c4a0a0 rend 19,4 — tous deux REFUSÉS. À mi-clarté,
   seul le froid s'éloigne assez.
   ============================================================================ */

@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Palette transposée ─────────────────────────────────────────────────── */
  --pierre:      #8299ad;   /* dominante — rôle du sable #a89474 */
  --pierre-50:   #8299ad80;
  --pierre-10:   #8299ad1a;
  --nuit:        #232a33;   /* encre — rôle du brun #2c2824 */
  --nuit-50:     #232a3380;
  --nuit-10:     #232a331a;
  --blanc:       #ffffff;
  --blanc-60:    #ffffff99;
  --blanc-20:    #ffffff33;

  /* semantiques — déclarées comme chez la cible, non peintes au parcours */
  --alerte:      #e0a33a;
  --erreur:      #c9524a;
  --succes:      #3f8f6b;

  --voile-bas:   linear-gradient(rgba(35,42,51,0), rgba(35,42,51,.55));
  --voile-haut:  linear-gradient(rgba(35,42,51,.55), rgba(35,42,51,0));

  /* ── Typographie ────────────────────────────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* ÉCHELLE FLUIDE — reprise de la cible : calc(Npx rem / 14.4).
     Le ratio 14.4 vaut 1440/100 : à 1440 px de large, 1rem = 1vw et TOUTE l'échelle
     suit la fenêtre. C'est la mécanique de dimensionnement du site, pas une préférence. */
  --ratio: 14.4;

  --h1: calc(144rem / var(--ratio));
  --h2: calc(96rem / var(--ratio));
  --h3: calc(72rem / var(--ratio));
  --h4: calc(56rem / var(--ratio));
  --h5: calc(40rem / var(--ratio));
  --h6: calc(24rem / var(--ratio));

  --p1: calc(32rem / var(--ratio));
  --p2: calc(24rem / var(--ratio));
  --p3: calc(20rem / var(--ratio));
  --p4: calc(16rem / var(--ratio));
  --p6: calc(10rem / var(--ratio));

  /* Interlignes et chasses — mesurés chez la cible, reproduits tels quels.
     LA SIGNATURE TYPOGRAPHIQUE EST L'OPPOSITION : les titres se resserrent, le texte
     s'espace. Inverser l'un des deux détruirait la texture de la page. */
  --lh-h1: 83.333%;  --lh-h2: 91.667%;  --lh-h3: 88.889%;
  --lh-h4: 100%;     --lh-h5: 100%;     --lh-h6: 100%;
  --ls-titre: -.064em;

  --lh-p1: 100%;     --lh-p2: 116.667%; --lh-p3: 120%;
  --lh-p4: 150%;     --lh-p6: 150%;
  --ls-texte: .08em;

  /* ── Espacement — pas relevés chez la cible ─────────────────────────────── */
  --u-4:   calc(4rem / var(--ratio));
  --u-8:   calc(8rem / var(--ratio));
  --u-12:  calc(12rem / var(--ratio));
  --u-16:  calc(16rem / var(--ratio));
  --u-24:  calc(24rem / var(--ratio));
  --u-28:  calc(28rem / var(--ratio));
  --u-32:  calc(32rem / var(--ratio));
  --u-40:  calc(40rem / var(--ratio));
  --u-48:  calc(48rem / var(--ratio));
  --u-72:  calc(72rem / var(--ratio));
  --u-104: calc(104rem / var(--ratio));
  --u-136: calc(136rem / var(--ratio));
  --u-176: calc(176rem / var(--ratio));

  --cellule:       calc(88rem / var(--ratio));    /* --_special-units---1-cell */
  --cellule-large: calc(120rem / var(--ratio));   /* --_special-units---1-c-cell */
  --entete-h:      calc((24rem / var(--ratio)) * 2 + (28rem / var(--ratio)));  /* = 76 px mesuré */
  --etroit:        calc(448rem / var(--ratio));
  --large:         calc(1800rem / var(--ratio));

  /* ── Mouvement — DÉCLARÉ par l'auteur de la cible, reproduit tel quel ───── */
  --dur-s: 0.4s;
  --dur-m: 0.6s;
  --dur-l: 1.2s;
  --ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);
  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-write:  cubic-bezier(0.333, 0, 0.667, 1);
}

/* La racine à 1vw : c'est ce qui rend `calc(144rem/14.4)` égal à 144 px sous 1440 px de
   large, et proportionnel partout ailleurs. Bornée pour rester lisible aux extrêmes. */
html { font-size: clamp(9px, 1vw, 18px); }