/* ============================================================
   LONGEVITY STUDIO — DESIGN TOKENS
   Authoritative visual system (Brand Guidelines 4.0).
   Five-tone palette · editorial serif + grotesque sans + mono ·
   fluid type scale · 8px spacing · 12-col grid.
   Tune globally here.
   ============================================================ */

:root {
  /* ---- Core palette — six tones, Brand Guidelines 4.0 (authoritative).
         Every colour has a physical counterpart in the built work. ---- */
  --ink:      #1C1917;   /* primary backgrounds, deep surfaces, ground */
  --graphite: #4A4540;   /* body text, secondary surfaces, shadow/depth */
  --stone:    #9A9288;   /* captions, rules, tertiary text — porcelain */
  --oak:      #C4A87A;   /* accent — rules, highlights, numerals (slat/bench) */
  --plaster:  #E2DDD4;   /* alternate ground, section dividers — limewash */
  --bone:     #F4F0E8;   /* default ground — warm off-white, plaster wall */

  /* ---- Tonal steps derived from the core (kept restrained) ---- */
  --ink-92:    rgba(28, 25, 23, 0.92);
  --ink-70:    rgba(28, 25, 23, 0.70);
  --ink-55:    rgba(28, 25, 23, 0.55);
  --ink-42:    rgba(28, 25, 23, 0.42);
  --ink-14:    rgba(28, 25, 23, 0.14);
  --ink-08:    rgba(28, 25, 23, 0.08);
  --bone-72:   rgba(244, 240, 232, 0.72);
  --bone-46:   rgba(244, 240, 232, 0.46);
  --bone-16:   rgba(244, 240, 232, 0.16);
  --bone-08:   rgba(244, 240, 232, 0.08);
  --oak-40:    rgba(196, 168, 122, 0.40);

  /* ---- Semantic tokens: LIGHT ground (Bone) is the default ----
         Body text is Graphite (≈7.8:1 AA); Ink for headings/strong.
         Oak is reserved for rules, highlights and numerals — never
         body/link text on a light ground. ---- */
  --bg:          var(--bone);
  --bg-alt:      var(--plaster);   /* alternate ground / dividers */
  --surface:     var(--plaster);   /* raised plaster panel on bone */
  --text:        var(--ink);       /* headings / strong (≈12:1) */
  --text-body:   var(--graphite);  /* body copy (≈7.8:1 AA) */
  --text-muted:  #6B645B;          /* darkened stone, AA muted (≈4.6:1) */
  --text-faint:  var(--stone);     /* labels / captions, non-essential */
  --line:        var(--ink-14);    /* hairline rules (drawing convention) */
  --line-strong: var(--ink-42);
  --accent:      var(--oak);       /* oak: numerals, highlights, tags, markers */
  --accent-rule: var(--oak);       /* oak rules / underlines / arrows */
  --focus:       #7E6234;          /* accessible deep-oak focus ring (≈3:1) */

  /* ---- Type families — Fraunces + Inter (Brand Guidelines 4.0) ---- */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Inter", system-ui, sans-serif; /* utility/label voice: tracked uppercase Inter */

  /* Editorial serif default variation — low contrast, restrained */
  --display-vary: "opsz" 144, "SOFT" 0, "WONK" 0;

  /* ---- Fluid type scale (hierarchy via SCALE + SPACE, not weight) ---- */
  --fs-mono:    0.72rem;                                  /* spec/eyebrow labels */
  --fs-xs:      0.8125rem;                                /* fine print */
  --fs-sm:      0.9375rem;                                /* secondary body */
  --fs-base:    clamp(1rem, 0.97rem + 0.18vw, 1.125rem);  /* body */
  --fs-lead:    clamp(1.18rem, 1.05rem + 0.55vw, 1.5rem); /* lead paragraph */
  --fs-h4:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h3:      clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-h2:      clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --fs-h1:      clamp(2.9rem, 1.7rem + 5.6vw, 6rem);
  --fs-display: clamp(3.4rem, 1.2rem + 9.2vw, 9.5rem);    /* hero device type */

  /* ---- Line heights ---- */
  --lh-tight:  1.02;
  --lh-snug:   1.16;
  --lh-body:   1.62;

  /* ---- Tracking ---- */
  --track-label:  0.18em;   /* mono labels, small caps */
  --track-tight: -0.015em;  /* large display serif */

  /* ---- Spacing scale (4 / 8 base) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 176px;

  /* Section rhythm (fluid) */
  --section-y: clamp(72px, 5vw + 40px, 176px);

  /* ---- Layout ---- */
  --maxw:      1440px;
  --maxw-text: 64ch;
  --gutter:    clamp(20px, 4.5vw, 80px);
  --col-gap:   clamp(16px, 2vw, 32px);

  /* ---- Misc ---- */
  --radius:     2px;   /* near-square — no soft "spa-app" corners */
  --border:     1px solid var(--line);
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur:        260ms;
  --dur-slow:   460ms;
}

/* Dark ground — applied per-section. Flips the semantic tokens only. */
.on-ink {
  --bg:          var(--ink);
  --bg-alt:      var(--graphite);
  --surface:     var(--graphite);
  --text:        var(--bone);
  --text-body:   var(--bone);
  --text-muted:  var(--stone);      /* stone on ink ≈5.6:1 AA */
  --text-faint:  var(--stone);
  --line:        var(--bone-16);
  --line-strong: var(--bone-46);
  --accent:      var(--oak);         /* oak passes AA on ink for link text */
  --accent-rule: var(--oak);
  --focus:       var(--oak);
  background: var(--bg);
  color: var(--text);
}