/* ==========================================================================
   Design tokens — source unique de vérité.
   Aucun composant ne doit hardcoder une couleur, une taille ou un espacement.
   ========================================================================== */

:root {
  /* --- Colors ------------------------------------------------------------ */
  --color-black:            #111111;
  --color-white:            #ffffff;
  --color-offwhite:         #f5f3ef;
  --color-light:            #ebe8e2;
  --color-accent:           #e5ff00;
  --color-muted:            #767676; /* 4.54:1 sur blanc — #777 tombait à 4.48 */
  --color-border:           #d9d7d2;

  --color-primary:          var(--color-black);
  --color-secondary:        var(--color-offwhite);
  --color-background:       var(--color-white);
  --color-background-alt:   var(--color-offwhite);
  --color-text:             var(--color-black);
  --color-text-muted:       var(--color-muted);
  --color-text-invert:      var(--color-white);
  --color-selection:        var(--color-accent);

  /* --- Typography -------------------------------------------------------- */
  --font-heading: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle display — clamp() partout (Addendum §19). */
  --text-display-xl: clamp(2.625rem, 8vw,   8.5rem);   /* 42 → 136 */
  --text-display-lg: clamp(2.375rem, 6vw,   6rem);     /* 38 → 96  */
  --text-display-md: clamp(2.125rem, 4.75vw, 4.5rem);  /* 34 → 72  */
  --text-h2:         clamp(2.125rem, 4.5vw, 4.5rem);   /* 34 → 72  */
  --text-h3:         clamp(1.625rem, 3vw,   2.75rem);  /* 26 → 44  */
  --text-h4:         clamp(1.375rem, 1.8vw, 1.75rem);  /* 22 → 28  */
  /* Interpolation réelle entre 390px et 1440px : 19→22 et 17→19.
     Un simple `Nvw` restait bloqué sur la borne basse jusqu'à ~1900px. */
  --text-body-lg:    clamp(1.1875rem, 1.118rem + 0.29vw, 1.375rem); /* 19 → 22 */
  --text-body:       clamp(1.0625rem, 1.016rem + 0.19vw, 1.25rem);  /* 17 → 20 */
  --text-small:      0.9375rem;
  --text-eyebrow:    0.8125rem;

  --leading-display: 0.95;
  --leading-title:   1.08;
  --leading-body:    1.6;
  --leading-tight:   1.25;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.14em;
  --tracking-normal:  0;

  --weight-body:     400;
  --weight-medium:   500;
  --weight-heading:  400;

  /* Mesures de ligne — jamais la même largeur pour tout (Addendum §15). */
  --measure-display:  14ch;
  --measure-title:    22ch;
  --measure-deck:     50rem;   /* 800px  — intro/deck  */
  --measure-prose:    47rem;   /* 752px  — corps       */
  --measure-h1-post:  68.75rem;/* 1100px — H1 article  */

  /* --- Layout / grid ----------------------------------------------------- */
  --container-width:  82.5rem;  /* 1320px */
  --container-wide:   96rem;    /* 1536px */
  --gutter:           1.5rem;   /* 24px   */
  --grid-columns:     12;
  --page-padding:     clamp(1.25rem, 4vw, 4rem); /* 20 → 64 */

  /* --- Spacing ----------------------------------------------------------- */
  --spacing-xs:  0.5rem;
  --spacing-sm:  1rem;
  --spacing-md:  1.5rem;
  --spacing-lg:  2.5rem;
  --spacing-xl:  4rem;
  --spacing-2xl: 6rem;

  /* Rythme vertical des sections — mobile d'abord (Addendum §4). */
  --space-section-sm: 3.5rem;  /* 56  */
  --space-section-md: 5rem;    /* 80  */
  --space-section-lg: 6.875rem;/* 110 */
  --space-section-xl: 8.75rem; /* 140 */

  /* --- Dégradés (optionnels) ---------------------------------------------
     Neutres par défaut : tant qu'on ne les redéfinit pas, un fond « dégradé »
     retombe sur l'aplat sombre et le thème reste sans gradient. */
  --gradient-a: none;
  --gradient-b: none;
  --gradient-c: none;

  /* --- Cartes (optionnel) -------------------------------------------------
     Par défaut : ni fond, ni arrondi, ni ombre. Les redéfinir suffit à
     transformer les composants en cartes, sans toucher aux composants. */
  --card-background:  transparent;
  --card-radius:      0px;
  --card-shadow:      none;
  --card-padding:     0px;
  /* Une carte opaque posée sur une section sombre doit reprendre la main sur
     la couleur du texte, sinon elle hérite du blanc. `inherit` = comportement
     par défaut correct tant que la carte n'a pas de fond. */
  --card-text:        inherit;
  --card-text-muted:  inherit;

  /* --- Boutons ------------------------------------------------------------ */
  --cta-radius:    4px;
  --cta-transform: none;
  --cta-tracking:  0;
  --cta-weight:    500;
  --cta-size:      0.9375rem;
  --cta-padding:   0.9rem 1.6rem;

  /* --- Radius / borders -------------------------------------------------- */
  --radius:        0px;
  --radius-soft:   4px;
  --border-width:  1px;
  --border:        var(--border-width) solid var(--color-border);

  /* --- Motion ------------------------------------------------------------ */
  --ease:          cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 240ms;
  --duration:      480ms;
  --duration-slow: 800ms;

  /* --- Z-index ----------------------------------------------------------- */
  --z-header: 100;
  --z-menu:   200;
}

@media (min-width: 60rem) {
  :root {
    --space-section-sm: 5rem;    /* 80  */
    --space-section-md: 7.5rem;  /* 120 */
    --space-section-lg: 11.25rem;/* 180 */
    --space-section-xl: 15rem;   /* 240 */
  }
}

/* Inversion locale : toute zone sombre repeint ses tokens, les composants suivent. */
.is-dark,
.has-dark-background {
  --color-background:     var(--color-black);
  --color-background-alt: #1a1a1a;
  --color-text:           var(--color-white);
  --color-text-muted:     #a5a5a5;
  --color-border:         #333333;
  color: var(--color-text);
  background-color: var(--color-background);
}