/* FICHIER RECOPIÉ — NE PAS MODIFIER ICI.
   Source : brand/echelle.css · Recopie : node brand/sync.mjs
   Une retouche faite dans cette copie est écrasée au prochain sync, et fait
   diverger le site de l'application entre-temps. */
/* ============================================================================
   OCC MIND — L'ÉCHELLE DE RÉFÉRENCE
   ----------------------------------------------------------------------------
   Les trois échelles que `brand/planche.css` suppose : texte, écart, rayon.

   Pourquoi elles ne vivent pas dans `tokens.css` : la matière de la marque est
   la même partout, la DENSITÉ ne l'est pas. Le site est éditorial — il vend, on
   le lit debout dans un couloir, le texte courant y fait 16 px. L'application
   travaille — elle affiche quarante lignes de missions, son corps dense fait
   13,5 px. Leur imposer la même échelle abîme les deux : le site devient un
   tableur, l'application devient une affiche.

   Ce fichier porte donc l'échelle ÉDITORIALE, celle du site et de la planche.
   `apps/web/src/styles.css` redéfinit les mêmes noms avec ses propres valeurs,
   et c'est le comportement attendu, pas une dérive.

   Une taille de texte, un écart ou un rayon écrit en pixels dans une feuille
   d'écran est un bug, pas un réglage : il rouvre exactement ce que ces jetons
   ferment. Il manque un cran ? On l'ajoute ICI, pour tout le monde.
   `apps/web/src/styles.test.ts` rend la règle exécutable côté application.
   ============================================================================ */

:root {
  /* ── Texte — l'échelle de la charte, page 15 ──────────────────────────────
     Sur-titre 11, légende 13, courant 16/26, chapô 19/31, nom d'agent 24/26,
     titre de section 44/46. Les crans intermédiaires existent pour l'interface
     du site (pastilles, méta), pas pour ouvrir la porte à vingt-sept tailles. */
  --fs-2xs: 11px; /* SUR-TITRE / LIBELLÉ — Archivo 700, +0,16 em */
  --fs-xs: 12px; /* pastilles */
  --fs-sm: 13px; /* légende */
  --fs-md: 14px; /* méta, second plan */
  --fs-base: 16px; /* TEXTE COURANT — 16/26 */
  --fs-lg: 18px; /* titre de carte */
  --fs-xl: 19px; /* CHAPÔ — 19/31 */
  --fs-2xl: 24px; /* NOM D'AGENT — 24/26 */
  --fs-3xl: 32px; /* grand chiffre */
  --fs-4xl: 44px; /* TITRE DE SECTION — 44/46 */
  --fs-5xl: 64px; /* l'accroche d'ouverture, une par page au plus */

  /* ── Écart — neuf crans ───────────────────────────────────────────────────
     Un rythme vertical se lit quand il se RÉPÈTE. Vingt valeurs ne se répètent
     jamais ; neuf, si. */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 56px;
  --sp-9: 88px;

  /* ── Rayon — quatre paliers, plus la pilule ─────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 100px;

  /* La plus petite cible qu'un doigt ganté atteint sans regarder. 48 et non 44 :
     44 px est le minimum d'Apple, mesuré sur un doigt nu, un téléphone tenu à
     deux mains et quelqu'un qui regarde l'écran. Aucune de ces trois conditions
     n'est vraie dans un local technique. */
  --touch: 48px;

  /* La largeur utile. Au-delà, une ligne de texte se lit en tournant la tête. */
  --largeur: 1200px;
  --largeur-etroite: 760px;
}