/* ============================================================================
   tokens.css — LA COUCHE ESTHÉTIQUE (la seule qu'on re-paramètre)
   ----------------------------------------------------------------------------
   Direction : métal poli à reflets · bleu profond · blanc froid.
   Couleur en OKLCH (c'est L qui pilote le contraste, donc l'accessibilité).
   Le moteur (styles.css) ne lit QUE ces variables : aucune valeur esthétique
   n'est écrite en dur ailleurs.
   ============================================================================ */

:root{
  /* --- COULEUR : primitives ------------------------------------------------ */
  /* Rampe bleu profond. Jamais de #000 : le noir plat est un écran mort. */
  --deep-0:  oklch(10.5% 0.040 260);   /* le fond le plus bas (pied de page, creux) */
  --deep-1:  oklch(15.0% 0.050 258);   /* la valeur de base du document */
  --deep-2:  oklch(21.0% 0.058 256);   /* surface relevée (panneau, carte) */
  --deep-3:  oklch(27.5% 0.052 254);   /* filets, séparateurs, bordures */
  --deep-4:  oklch(35.0% 0.048 252);   /* filet appuyé / bord de plaque */

  --white:   oklch(98.5% 0.004 250);   /* blanc froid, jamais #fff pur */
  --mist:    oklch(80.0% 0.020 248);   /* texte secondaire (9:1 sur --deep-1) */
  --mist-2:  oklch(68.0% 0.024 248);   /* texte tertiaire, légendes */

  --blue:      oklch(68% 0.145 248);   /* bleu électrique : liens, accents actifs */
  --blue-deep: oklch(48% 0.130 252);   /* pôle sombre du bleu */
  --blue-lite: oklch(86% 0.080 244);   /* pôle clair, halo */

  /* --- LE MÉTAL ------------------------------------------------------------
     Un métal poli ne se peint pas en gris : il REFLÈTE. La face porte donc un
     « horizon » vertical (ciel sombre en haut, bande spéculaire, sol clair),
     et un reflet BALAYÉ passe par-dessus. Deux couches, deux rôles.
     Le pôle le plus sombre reste à L=60 % : mesuré 4,4:1 sur --deep-1, au-delà
     du seuil AA grand texte (3:1). Le métal ne porte QUE du grand texte.      */
  --metal-face: linear-gradient(180deg,
      oklch(60% 0.038 256)  0%,
      oklch(80% 0.022 250) 30%,
      oklch(100% 0.002 250) 46%,
      oklch(98% 0.004 250) 53%,
      oklch(73% 0.028 252) 60%,
      oklch(96% 0.010 250) 82%,
      oklch(88% 0.016 250) 100%);
  --metal-sheen: linear-gradient(100deg,
      transparent 34%,
      oklch(100% 0.002 250 / .85) 47%,
      transparent 60%);
  /* Plaque : le même métal vu de biais, pour les surfaces (bouton, filet). */
  --metal-plate: linear-gradient(168deg,
      oklch(92% 0.012 250) 0%,
      oklch(99% 0.003 250) 22%,
      oklch(78% 0.024 252) 52%,
      oklch(97% 0.008 250) 76%,
      oklch(86% 0.018 250) 100%);
  --metal-edge:  oklch(100% 0.002 250 / .55);   /* l'arête vive d'une pièce usinée */

  /* --- SÉMANTIQUES (la seule couche qu'un thème repeindrait) ---------------- */
  --bg:        var(--deep-1);
  --surface:   var(--deep-2);
  --text:      var(--white);
  --text-soft: var(--mist);
  --text-dim:  var(--mist-2);
  --line:      var(--deep-3);
  --line-strong: var(--deep-4);
  --brand:     var(--blue);
  --on-metal:  var(--deep-0);          /* texte posé SUR une plaque de métal */

  /* --- MATIÈRE (zéro fond nu) ---------------------------------------------- */
  --glow-cold:  oklch(62% 0.115 250 / .30);   /* foyer principal, bleu d'atelier */
  --glow-pale:  oklch(78% 0.055 240 / .20);   /* foyer secondaire, plus blanc */
  --vignette:   oklch(8% 0.030 262 / .70);
  --grid-line:  oklch(70% 0.040 250 / .055);  /* la trame technique du fond */
  --grain-opacity: .055;

  /* --- TYPOGRAPHIE ---------------------------------------------------------
     Display : Space Grotesk 700 (grotesque technique, terminaisons coupées,
     contreformes ouvertes : le reflet du métal reste lisible DANS la lettre).
     Corps : Satoshi (géométrique chaleureux) — ni Inter, ni Roboto.          */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle fluide (méthode Utopia). Garde-fou WCAG 1.4.4 : MAX ≤ 2,5 × MIN. */
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.14rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.44vw, 1.48rem);
  --step-2:  clamp(1.50rem, 1.33rem + 0.85vw, 2.05rem);
  --step-3:  clamp(1.88rem, 1.58rem + 1.48vw, 2.90rem);
  --step-4:  clamp(2.35rem, 1.87rem + 2.38vw, 4.05rem);
  --step-5:  clamp(2.70rem, 2.05rem + 3.60vw, 5.60rem);
  /* Le cran d'affichage du hero. Il n'est PAS borné par la fenêtre mais par la
     COLONNE de texte du hero (1,35fr sur 2, soit 582 à 727 px selon la largeur) :
     un cran plus haut faisait retomber le titre sur quatre lignes hachées au
     lieu des deux voulues. Mesuré : la ligne la plus longue du H1 demande
     9,6 px de largeur par pixel de corps. 5,2vw plafonné à 4,4rem tient les
     deux lignes de 360 px à 4K, avec 5 % de marge au point le plus serré. */
  --step-6:  clamp(2.90rem, 5.20vw, 4.40rem);

  --measure: 62ch;

  /* --- FORMES : une pièce usinée a des arêtes vives, pas des pilules -------- */
  --r:       3px;
  --r-panel: 6px;
  --r-photo: 4px;

  /* --- ESPACE & LAYOUT ----------------------------------------------------- */
  --pad-x: clamp(22px, 5vw, 88px);
  --maxw:  1280px;
  --space-2xs: clamp(8px, 1vw, 12px);
  --space-xs:  clamp(12px, 1.6vw, 18px);
  --space-s:   clamp(18px, 2.4vw, 28px);
  --space-m:   clamp(28px, 3.6vw, 46px);
  --space-l:   clamp(46px, 5.8vw, 78px);
  --space-section: clamp(84px, 10vw, 152px);   /* UNE cadence verticale, partout */

  /* --- MOTION -------------------------------------------------------------- */
  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-sine:   cubic-bezier(.45, .05, .55, .95);
  --ease-bounce: cubic-bezier(.22, 1.28, .36, 1);
  --t-fast:    .4s;
  --t-std:     1s;
  --t-slow:    1.9s;
  --t-ambient: 24s;
  --t-sheen:   5.2s;    /* le balayage du reflet sur le métal */
}