/* tokens.css — les décisions de DESIGN.md sous forme de variables. Ne rien ajouter ici sans l'écrire dans DESIGN.md. */
:root {
  color-scheme: light;

  /* Palette (§ 2) */
  --paper: #F4F1EA;
  --paper-2: #EBE7DD;
  --paper-0: #FBFAF7;
  --ink: #1B1A17;
  --ink-2: #4A4841;
  --ink-3: #63605A;
  /* Accent reteinté le 8 septembre sur le rouge de la marque (logos/serie-3, #F00000, H 0° S 100 % L 47,1 %) :
     même méthode qu'avant, la teinte ne bouge jamais, seule la clarté varie selon le contexte. Le rouge pur
     n'atteignait pas les seuils de contraste texte (mesuré : 3,96:1 sur paper, 3,61:1 sur paper-2, 4,28:1 pour
     paper-0 sur accent — loin des 5,6/5,1/6,0 requis), donc L a été abaissée à 37,6 % (teinte et saturation
     inchangées) jusqu'à les retrouver. --accent-deep suit avec ~6 pts de clarté en moins, comme l'ancien
     orange (36,5 % → 30,2 %). Toutes les valeurs sont mesurées, pas estimées (script dans le compte rendu
     du 8 septembre) — ne pas re-choisir ces hex sans recalculer. */
  --accent: #C00000;
  --accent-deep: #A00000;
  --accent-tint: #F4E3E3;
  --line: #CFC9BB;
  --line-strong: #7D7A72;
  /* --error écarté du rouge de marque le 8 septembre : à teinte quasi identique (H 358° vs H 0°, 2° d'écart)
     et à clarté quasi identique, --error et le nouvel --accent devenaient isoluminants (contraste WCAG
     accent/error 1,22:1, un bouton et un message d'erreur presque de la même couleur ET de la même
     luminosité — le pire cas pour la distinction). --error est repoussé vers le cramoisi (H 340° au lieu de
     358°, soit ~20° d'écart avec l'accent contre 2° avant) et assombri (L 30 % au lieu de 37,1 %), ce qui
     porte le contraste accent/error à 1,54:1 tout en gardant --error au moins aussi lisible qu'avant sur
     paper/paper-0 (8,85:1 / 9,57:1 contre 7,0:1 / 7,6:1). Voir aussi la bordure/box-shadow renforcées de
     `.input[aria-invalid]` et le poids de `.field__error` dans components.css : la distinction erreur/accent
     ne doit jamais reposer sur la seule teinte (WCAG 1.4.1). */
  --error: #7D1C3C;

  /* Chapitre sombre (§ 2 bis) — un seul chapitre du site : la section 02 de l'accueil (projets + chiffres).
     Le fond n'est pas une nouvelle couleur : c'est l'encre du site (--ink) ; le texte est son papier (--paper).
     L'accent non plus : c'est le MÊME rouge de marque (H 0° S 100 %), remonté de L 37,6 % à 68 % — la teinte
     et la saturation ne changent pas, seule la clarté monte pour tenir le contraste sur l'encre. À S 100 %,
     le canal rouge sature dès L 50 % : il faut monter bien plus haut qu'avec l'ancien orange (S 78,5 %) pour
     regagner le même contraste, d'où un delta de clarté plus grand qu'avant (56 %→68 % au lieu de 56 %).
     Ces jetons ne servent qu'à alimenter la correspondance de `.section--dark` (components.css) : rien ne
     les utilise directement. */
  --slate: #1B1A17;
  --slate-0: #232019;
  --slate-2: #2B2822;
  --chalk: #F4F1EA;
  --chalk-2: #C7C1B3;
  --chalk-3: #9E9789;
  --accent-lift: #FF5C5C;
  --accent-lift-deep: #FF8080;
  --accent-shade: #3D1717;
  --line-dark: #3A362E;
  --line-dark-strong: #8A8375;

  /* Typographie (§ 3) */
  --font-text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 0.5rem + 7.2vw, 7rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mono: 0.8125rem;
  --fs-mono-text: 0.9375rem;
  --fs-figure: clamp(2.5rem, 2rem + 2.2vw, 4rem);

  --lh-display: 1.02;
  --lh-h1: 1.08;
  --lh-h2: 1.12;
  --lh-h3: 1.25;
  --lh-h4: 1.35;
  --lh-lead: 1.45;
  --lh-body: 1.55;
  --lh-mono: 1.4;

  --fw-text: 400;
  --fw-ui: 500;
  --fw-title: 600;
  --fw-display: 650;

  /* Espacement, grille (§ 4) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(4rem, 3rem + 5vw, 7rem);
  --container: 75rem;
  --container-wide: 85rem;
  --gutter-x: clamp(1.25rem, 4vw, 3rem);
  --gap: var(--s-5);
  --measure: 42rem;

  --r-1: 2px;
  --r-2: 6px;
  /* Rayons du cadre téléphone, CONCENTRIQUES (extérieur − 0,5 rem de coque = intérieur), et calibrés pour
     ne pas mordre dans une capture. À 2,25 / 1,75 rem, l'arrondi de l'écran mangeait 5,8 px au ras du bord
     bas d'un cadre de 300 px : les captures d'app dont la barre d'onglets touche le bord y perdaient leur
     première et leur dernière lettre (« bleau de bord », « Envoi »). À 1,5 / 1 rem la morsure tombe à
     0,8 px — le libellé se lit — et 24 px sur 300 px reste une silhouette de téléphone (un iPhone 15
     arrondit son écran à ~14 % de sa largeur ; on est à 8 %). Les variantes étroites suivent la même règle
     (components.css : `--w260` 1,5/1 rem, `--w220` 1,25/0,75 rem). */
  --r-phone: 1.5rem;
  --r-phone-in: 1rem;
  --r-tablet: 1.25rem;

  --header-h: 4rem;

  /* Mouvement (§ 6) */
  --t-press: 120ms;
  --t-hover: 160ms;
  --t-ui: 200ms;
  --t-reveal: 420ms;
  --t-frame: 600ms;
  --t-draw: 700ms;
  --t-count: 900ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 56.25rem) {
  :root {
    --header-h: 4.5rem;
  }
}

@media (max-width: 39.99rem) {
  :root {
    --fs-body: 1rem;
  }
}

/* À partir de 1200 px le conteneur est plafonné (75rem) : la largeur utile ne bouge plus, mais le hero
   passe à deux colonnes et le titre n'a plus que la colonne de gauche (704 px). Une taille fixe y remplace
   la formule fluide : « Je construis l'outil » y mesure 693 px, soit 98 % de sa colonne. */
@media (min-width: 75rem) {
  :root {
    --fs-display: 5.5rem;
  }
}