/* site-scale.css — ÉCRIT À LA MAIN. Mise en page du site vitrine.
 * ==========================================================================
 * 🔴 POURQUOI CE FICHIER EXISTE, ET POURQUOI IL N'EST PAS GÉNÉRÉ.
 *
 * `tokens.css` est produit depuis le thème TypeScript de l'application, et un
 * test échoue si les deux divergent. Ce garde-fou ne vaut que s'il porte sur des
 * valeurs qui viennent VRAIMENT du thème.
 *
 * Or les valeurs ci-dessous n'en viennent pas :
 *   • `--r-card: 28px` — l'échelle de rayons de l'app s'arrête à `--r-xl: 24px` ;
 *   • `--section: 56px` — un rythme vertical de page web, que l'app n'a pas ;
 *   • `--fs-44` — un corps de titre d'accroche, sans équivalent sur mobile ;
 *   • `--content: 600px` — une colonne de lecture, notion propre au web.
 *
 * ⚠️ Les faire passer pour générées aurait brouillé exactement ce que le garde-fou
 * protège : on n'aurait plus su, en lisant `tokens.css`, ce qui suit le thème et
 * ce qui n'est qu'une décision de mise en page. Deux couches explicites valent
 * mieux qu'une couche qui ment sur la moitié de son contenu.
 *
 * ⚠️ ET LA RÈGLE RESTE ENTIÈRE : **aucune COULEUR ici.** Les couleurs sont ce que
 * le thème possède ; les espacements sont ce que la page décide.
 * ========================================================================== */

:root {
  /* — rayons propres au site — */
  --r-card: 28px;
  --r-block: 20px;
  --r-slot: 14px;
  --r-shot: 34px;
  /* ⚠️ `--r-pill` existe déjà en généré sous le nom `--r-full`. On ne le
     redéclare PAS : deux noms pour la même valeur, et l'un des deux finit par
     dériver. Utiliser `var(--r-full)`. */

  /* — espacements de page — */
  --gutter: 24px;
  --gap-tight: 12px;
  --gap: 16px;
  --gap-loose: 20px;
  --section: 56px;
  --section-lg: 72px;

  /* — échelle typographique du site —
     ⚠️ Elle NE dérive PAS de `--t-*`. L'échelle de l'app est pensée pour un
     téléphone tenu à distance de bras ; celle-ci pour un écran d'ordinateur avec
     un titre d'accroche de 44 px, qui n'a aucun équivalent mobile. Les mélanger
     donnerait une hiérarchie qui n'appartient à aucun des deux supports. */
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-27: 27px;
  --fs-34: 34px;
  --fs-44: 44px;

  /* — largeurs — */
  --content: 600px;
  --content-lg: 1120px;
}