/* ============================================================
   DRH — DERRIÈRE LE REGARD DE ASH
   Design tokens · source : Guide Maître §67
   ============================================================ */

:root {
  /* ---------- COULEURS ---------- */
  --drh-black:      #0B0B0B;
  --drh-charcoal:   #171717;
  --drh-ivory:      #F2EFE8;
  --drh-white:      #FAF9F6;
  --drh-gold:       #B69A6A;
  --drh-stone:      #8B8984;

  /* Variantes « encre » — mêmes teintes assombries pour rester lisibles sur
     ivoire. Les tokens de marque ci-dessus sont inchangés : ils restent la
     référence sur fond noir et pour tout usage non textuel (lignes, iris,
     curseur, séparateurs). Sans cela, --drh-stone plafonne à 3,04:1 et
     --drh-gold à 2,34:1 sur #F2EFE8, sous le minimum WCAG AA (Guide §64). */
  --drh-stone-ink:  #6A6762;   /* 4,9:1 sur ivoire */
  --drh-gold-ink:   #7E6535;   /* 4,8:1 sur ivoire */

  /* Dérivées — nuances utilitaires, jamais de nouvelles teintes */
  --drh-black-80:   rgba(11, 11, 11, .80);
  --drh-black-06:   rgba(11, 11, 11, .06);
  --drh-black-12:   rgba(11, 11, 11, .12);
  --drh-ivory-60:   rgba(242, 239, 232, .60);
  --drh-ivory-40:   rgba(242, 239, 232, .40);
  --drh-ivory-12:   rgba(242, 239, 232, .12);
  --drh-ivory-08:   rgba(242, 239, 232, .08);
  --drh-gold-50:    rgba(182, 154, 106, .50);
  --drh-gold-40:    rgba(182, 154, 106, .40);
  --drh-gold-16:    rgba(182, 154, 106, .16);

  /* Contexte de section — repiqué par .s--dark / .s--light */
  --bg:        var(--drh-ivory);
  --fg:        var(--drh-black);
  --muted:     var(--drh-stone-ink);
  --gold-text: var(--drh-gold-ink);
  --rule:      var(--drh-black-12);

  /* ---------- ESPACEMENT ---------- */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   32px;
  --space-lg:   64px;
  --space-xl:   120px;
  --space-xxl:  180px;
  --space-hero: 240px;

  /* ---------- GRILLE ---------- */
  --max:     1800px;
  --gutter:  clamp(18px, 3.4vw, 56px);
  --col-gap: clamp(16px, 1.4vw, 24px);

  /* ---------- TYPOGRAPHIE ---------- */
  --font-sans:  "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Times, serif;

  --display-xxl: clamp(72px, 10vw, 170px);
  --display-xl:  clamp(58px, 8vw,  130px);
  --heading-xl:  clamp(46px, 6vw,   90px);
  --heading-lg:  clamp(34px, 4vw,   64px);
  --heading-md:  clamp(28px, 3vw,   44px);
  --body-large:  clamp(19px, 2vw,   28px);
  --body:        16px;
  --micro:       12px;

  --lh-display:  0.86;
  --lh-heading:  0.94;
  --lh-body:     1.55;

  --track-display: -0.055em;
  --track-heading: -0.04em;
  --track-micro:    0.14em;

  /* ---------- MOTION ---------- */
  --fast:      250ms;
  --normal:    600ms;
  --slow:     1100ms;
  --cinematic:1600ms;
  --ease-drh:  cubic-bezier(.16, 1, .3, 1);

  /* ---------- DIVERS ---------- */
  --header-h: 78px;
  --grain-opacity: .022;
}

/* Contextes de section : une seule bascule, tout le reste suit ------------- */
.s--dark {
  --bg:        var(--drh-black);
  --fg:        var(--drh-ivory);
  --muted:     var(--drh-stone);
  --gold-text: var(--drh-gold);
  --rule:      var(--drh-ivory-12);
}

.s--light {
  --bg:        var(--drh-ivory);
  --fg:        var(--drh-black);
  --muted:     var(--drh-stone-ink);
  --gold-text: var(--drh-gold-ink);
  --rule:      var(--drh-black-12);
}

.s--white {
  --bg:        var(--drh-white);
  --fg:        var(--drh-black);
  --muted:     var(--drh-stone-ink);
  --gold-text: var(--drh-gold-ink);
  --rule:      var(--drh-black-12);
}

/* Mobile — le motion est réduit de 30–40 % (Blueprint §155) ---------------- */
@media (max-width: 767px) {
  :root {
    --space-xl:   80px;
    --space-xxl:  110px;
    --space-hero: 130px;

    /* Échelle mobile alignée sur le Guide §60 (H1 52–68, H2 38–52).
       Les bornes basses du desktop (72px) rendaient la largeur minimale de
       mots comme « commencions » supérieure à la largeur d'écran, ce qui
       poussait la grille hors du viewport. */
    --display-xxl: clamp(44px, 13.5vw, 72px);
    --display-xl:  clamp(40px, 12vw,   64px);
    --heading-xl:  clamp(34px, 10vw,   56px);
    --heading-lg:  clamp(28px, 8vw,    44px);
    --heading-md:  clamp(24px, 6vw,    34px);
  }
}