/* ═══════════════════════════════════════════════════════════════════════════
   PEAU « vélin » — Maxence Favre / Indès — TOKENS (les VALEURS, rien d'autre)
   ───────────────────────────────────────────────────────────────────────────
   Même dérivation de couleur que la peau A (émotion, H, S, L et secondaire
   sont des propriétés du CLIENT, pas de la variante) — registre inversé.
   Calcul complet et sources : ./DESIGN.md
   Émotion : fiabilité · H 200 · S 43 % (13/30) · L 60 % (12/20)
   Secondaire : complémentaire H 22, cuivre, remonté à L 58 % pour tenir le
   contraste sur fond sombre.

   ⚠️ CONTRAT — noms de variables identiques à ceux des peaux de référence,
   dans le même ordre. On change les VALEURS, jamais les noms.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── 1. Surfaces ─────────────────────────────────────────────────────── */
  /* Alternance stricte de deux fonds d'acier : chaque bascule = « nouvelle
     idée », le cerveau segmente sans effort. */
  --bg:              #0f1d24;  /* acier profond, fond dominant */
  --bg-alt:          #142933;  /* acier alterné */
  --bg-panel:        #1a3542;  /* cartes et blocs posés sur --bg-alt */
  --bg-invert:       #faf7f4;  /* la seule surface claire du site */
  --surface:         #142933;  /* fond des cartes sur --bg */

  /* ── 2. Encre ────────────────────────────────────────────────────────── */
  --ink:             #c5dce8;  /* corps — 11,9:1 sur --bg */
  --ink-strong:      #f0f6f9;  /* titres — 15,3:1 sur --bg */
  --ink-muted:       #99adb8;  /* légendes, crédits photo — 6,9:1 sur --bg */
  --ink-on-invert:   #11232c;  /* texte posé sur --bg-invert */

  /* ── 3. Accent ───────────────────────────────────────────────────────── */
  --accent:          #d48354;  /* cuivre chauffé — 5,5:1 sur --bg */
  --accent-strong:   #e2a683;  /* cuivre voilé de blanc — 8,1:1, sert au TEXTE */
  --accent-soft:     #452e21;  /* cuivre voilé de noir : puces, pastilles */
  --accent-ink:      #16110c;  /* texte posé sur --accent — 6,4:1 */

  /* ── 4. Traits & matière ─────────────────────────────────────────────── */
  /* Matière de cette peau : LE FILET DOUBLE (cf. skin.css), la règle
     typographique des ouvrages imprimés. Aucune ombre sur le contenu. */
  --rule:            1px solid rgba(240, 246, 249, 0.16);
  --rule-strong:     1px solid rgba(240, 246, 249, 0.34);

  /* ── 5. Familles typographiques ──────────────────────────────────────── */
  /* UNE seule famille, serif de labeur. Aucun @import distant, aucun
     @font-face : le site ne dépend d'aucun réseau ni d'aucun compte. */
  --font-heading:    'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body:       'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-ui:         'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  /* ── 6. Échelle typographique ────────────────────────────────────────── */
  --fs-h1:           50px;
  --fs-h2:           34px;
  --fs-h3:           24px;
  --fs-body-lg:      22px;
  --fs-body:         19px;
  --fs-small:        15px;
  --fs-eyebrow:      12px;

  /* ── 7. Interlignes, graisses, chasse ────────────────────────────────── */
  --lh-h1:           1.12;
  --lh-h2:           1.2;
  --lh-h3:           1.4;
  --lh-body:         1.72;
  --fw-heading:      400;   /* le titre ne monte JAMAIS en gras : le contraste */
  --fw-body:         400;   /* se fait par la taille (50 vs 19) et rien d'autre */
  --fw-strong:       700;
  --fw-ui:           700;
  --ls-h1:           0px;
  --ls-eyebrow:      2.6px;

  /* ── 8. Rayons ───────────────────────────────────────────────────────── */
  /* Vocabulaire d'arrondi : AUCUN. Zéro partout, comme une page composée. */
  --radius-sm:       0px;
  --radius-card:     0px;
  --radius-media:    0px;
  --radius-panel:    0px;
  --radius-pill:     0px;

  /* ── 9. Ombres ───────────────────────────────────────────────────────── */
  /* Teintées du cuivre, jamais grises, et réservées au média. */
  --shadow-1:        rgba(212, 131, 84, 0.14) 0px 12px 34px 0px;
  --shadow-2:        rgba(212, 131, 84, 0.24) 0px 18px 48px 0px;

  /* ── 10. Espacements ─────────────────────────────────────────────────── */
  --space-2xs:       8px;
  --space-xs:        16px;
  --space-sm:        24px;
  --space-md:        32px;
  --space-lg:        48px;
  --space-xl:        80px;
  --space-section:   104px;  /* densité de vide déclarée, fente 12 */
  --gutter:          32px;
  --measure:         960px;  /* colonne étroite : la page se lit, elle ne se balaye pas */

  /* ── 11. Bouton principal ────────────────────────────────────────────── */
  --btn-bg:          #d48354;
  --btn-ink:         #16110c;
  --btn-radius:      0px;
  --btn-height:      56px;
  --btn-padding:     17px 36px;
  --btn-size:        15px;
  --btn-weight:      700;
  --btn-font:        var(--font-ui);
  --btn-transform:   uppercase;
  --btn-tracking:    1.2px;

  /* ── 12. Bouton secondaire ───────────────────────────────────────────── */
  --btn-bg-2:        transparent;
  --btn-ink-2:       #f0f6f9;
  --btn-border-2:    1px solid rgba(240, 246, 249, 0.34);
  --btn-radius-2:    0px;
  --btn-height-2:    56px;
  --btn-padding-2:   17px 32px;

}