/* ============================================================
   DevCo · Design Tokens
   Single source of truth for colour, type, space, motion.
   Ported from the approved v2 design language (atoms.jsx).
   Change a value here and it propagates site-wide.
   ============================================================ */
:root{
  /* — Palette — */
  --ink:#14120E;        /* near-black — primary dark ground            */
  --bone:#EDE6D6;       /* warm off-white — primary light ground/text  */
  --paper:#F5F0E2;      /* lighter paper — alternate light ground      */
  --sage:#6F7E63;       /* muted green — secondary accent              */
  --rust:#A85A3A;       /* terracotta — primary accent                 */
  --brass:#B89968;
  --graphite:#3F4A45;

  /* ink-on-light / bone-on-dark at working opacities */
  --ink-soft:rgba(20,18,14,.64);
  --ink-faint:rgba(20,18,14,.44);
  --ink-hair:rgba(20,18,14,.16);
  --bone-soft:rgba(237,230,214,.64);
  --bone-faint:rgba(237,230,214,.42);
  --bone-hair:rgba(237,230,214,.16);

  /* sage — the brand's secondary colour (per the logo). Working
     tints so sage can be used consistently for ticks, rails and
     hairline accents, not just as a flat block. */
  --sage-soft:rgba(111,126,99,.62);
  --sage-faint:rgba(111,126,99,.34);
  --sage-hair:rgba(111,126,99,.30);

  /* accent is themeable — one warm note across the whole site */
  --accent:var(--rust);

  /* — Type families (self-hosted, see assets/fonts) — */
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* — Fluid type scale — */
  --fs-display-1:clamp(2.9rem,1.5rem + 5.8vw,7.5rem);   /* hero headline      */
  --fs-display-2:clamp(2.2rem,1.35rem + 3.7vw,4.85rem); /* section headlines  */
  --fs-display-3:clamp(1.4rem,1.1rem + 1.35vw,2.3rem);  /* sub-headings       */
  --fs-statement:clamp(1.5rem,1.05rem + 1.9vw,2.85rem); /* large statements   */
  --fs-lead:clamp(1.05rem,1rem + .35vw,1.25rem);        /* lead paragraphs    */
  --fs-body:1.0625rem;
  --fs-body-sm:.9375rem;
  --fs-mono:.6875rem;          /* 11px */
  --fs-mono-sm:.625rem;        /* 10px */

  --lh-display:1.04;
  --lh-body:1.62;
  --tracking-mono:.15em;
  --tracking-display:-.018em;

  /* — Space — */
  /* Section padding pushed toward the reference standard
     (fluid.glass / sr006): whitespace carries the luxury.
     Round-2 refinement — the client flagged tight spacing. */
  --gutter:clamp(22px,5vw,72px);
  --maxw:1680px;
  --section-pad:clamp(140px,16.5vh,240px);
  --section-pad-sm:clamp(96px,10vh,156px);
  --hair:.5px;

  /* — Motion — */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --dur:.6s;
  --dur-slow:1.1s;

  /* — Layering — */
  --z-nav:800;
  --z-drawer:860;
  --z-overlay:880;

  /* ── Glass — Apple-OS translucent surfaces (round 3) ──────────
     Frosted-glass tokens. Used selectively on key surfaces:
     cards, the guide panel, floating metadata, plate captions.
     Hard edges (no radius) kept; the look is translucency +
     blur + a hairline catch-light, never a soft shadow.
     Two grounds: a tint that reads on dark sections, and one
     for light sections. backdrop-filter needs the -webkit-
     prefix for Safari. */
  --glass-blur:18px;
  --glass-blur-strong:30px;

  /* on a DARK ground — a warm-tinted bone film */
  --glass-dark:rgba(34,29,24,.55);
  --glass-dark-hi:rgba(46,40,32,.66);          /* hover / raised  */
  --glass-dark-edge:rgba(237,230,214,.14);     /* hairline border */
  --glass-dark-light:rgba(237,230,214,.30);    /* top catch-light */

  /* on a LIGHT ground — a warm-tinted paper film */
  --glass-light:rgba(245,240,226,.62);
  --glass-light-hi:rgba(248,244,232,.78);      /* hover / raised  */
  --glass-light-edge:rgba(20,18,14,.14);       /* hairline border */
  --glass-light-light:rgba(255,255,255,.55);   /* top catch-light */
}