/* ============================================================
   Sébastien Stormacq — brand tokens
   v1.0 · 2026-08-18
   The single source of truth. Do not hardcode a hex or a px
   size anywhere else; if a value is missing here, add it here.
   ============================================================ */

:root {
  /* ---------- Color: the patina sequence -------------------
     Ordered as copper oxidizes: shadow, tarnish, dust, bloom.
     ------------------------------------------------------- */
  --c-ink:        #111C1A;  /* copper in shadow — headlines, dark grounds */
  --c-slate:      #28403C;  /* tarnish — raised surfaces on dark */
  --c-stone:      #596965;  /* dust — secondary text, 5.28:1 on paper */
  --c-zinc:       #D3D8D4;  /* hairlines, dividers, quiet fills */
  --c-mist:       #E7EAE6;  /* card fills, table stripes */
  --c-paper:      #F4F5F2;  /* the ground. Cool, not cream. */
  --c-white:      #FFFFFF;

  --c-verdigris:  #316152;  /* the bloom — primary accent, 6.48:1 on paper */
  --c-brass:      #75591F;  /* the milestone — secondary accent, 5.99:1 */

  /* Light tints. Legible ONLY on --c-ink (7.4:1). On --c-slate
     they fall to 4.7:1 — large text and non-text use only. */
  --c-verdigris-light: #7FB3A2;
  --c-brass-light:     #C9A55E;

  /* ---------- Semantic roles ------------------------------- */
  --bg:            var(--c-paper);
  --bg-raised:     var(--c-white);
  --bg-sunken:     var(--c-mist);
  --text:          var(--c-ink);
  --text-muted:    var(--c-stone);
  --text-inverse:  var(--c-paper);
  --accent:        var(--c-verdigris);
  --accent-mark:   var(--c-brass);
  --rule:          var(--c-zinc);
  --rule-strong:   var(--c-stone);
  --focus:         var(--c-verdigris);

  /* ---------- Type ----------------------------------------
     Display  Spectral      — Light 300 at size. Unhurried.
     Body     Instrument Sans — neutral, wide apertures.
     Utility  IBM Plex Mono  — labels and tabular figures only.
     ------------------------------------------------------- */
  --font-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display-xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
  --fs-display-l:  clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-display-m:  clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-title:      1.375rem;
  --fs-lead:       1.1875rem;
  --fs-body:       1.0625rem;
  --fs-small:      0.9375rem;
  --fs-label:      0.75rem;

  --lh-tight:   1.05;
  --lh-display: 1.14;
  --lh-title:   1.34;
  --lh-body:    1.68;

  --tr-display: -0.021em;   /* Spectral needs the pull at size */
  --tr-body:     0em;
  --tr-label:    0.13em;    /* mono labels, uppercase */

  /* ---------- Space: 4px base ----------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-6: 1.5rem;   --s-8: 2rem;     --s-12: 3rem;    --s-16: 4rem;
  --s-24: 6rem;    --s-32: 8rem;

  /* ---------- Structure ----------------------------------- */
  --measure:    68ch;   /* prose never exceeds this */
  --page-max:   78rem;
  --rail:       11rem;  /* the left label rail */
  --radius:     3px;    /* one radius. Not zero, not soft. */
  --hairline:   1px;

  /* ---------- Motion --------------------------------------
     One easing. One duration. Serenity is not animated. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  360ms;

  /* ---------- The Span baseline ---------------------------
     Every interval is drawn against these two years. Changing
     --span-from / --span-to rescales every Span on the site. */
  --span-from: 1994;
  --span-to:   2026;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           var(--c-ink);
    --bg-raised:    var(--c-slate);
    --bg-sunken:    #0B1413;
    --text:         var(--c-paper);
    --text-muted:   #A7B4B0;
    --text-inverse: var(--c-ink);
    --accent:       var(--c-verdigris-light);
    --accent-mark:  var(--c-brass-light);
    --rule:         #334742;
    --rule-strong:  #5E706C;
    --focus:        var(--c-verdigris-light);
  }
}