/* Design tokens.
   Every value in the handoff, in one place. Nothing below this file should
   contain a raw hex, a font stack, or a magic number — if you need one, add a
   token here first.
   Source: design_handoff_site_v2/README.md */

:root {
  /* ---- colour ---- */
  --ivory:       #f2efe9;  /* page ground */
  --green:       #12211d;  /* deep green ink, anchor bands, primary fill */
  --green-soft:  #1b2a26;  /* body ink base, photo-slot backing */
  --brass:       #8a7350;  /* accent, display italic, hairlines */
  --brass-deep:  #6b5836;  /* small type + links on ivory (contrast-safe) */
  --brass-light: #c9a86a;  /* links + display italic on deep green */

  /* Text on ivory. These alphas are the whole tier system — do not invent new
     ones; the handoff is explicit about that. */
  --ink-78: rgba(27, 42, 38, 0.78);  /* body */
  --ink-72: rgba(27, 42, 38, 0.72);  /* meta labels */
  --ink-66: rgba(27, 42, 38, 0.66);  /* lede */
  --ink-62: rgba(27, 42, 38, 0.62);  /* inactive nav */
  --ink-60: rgba(27, 42, 38, 0.60);
  --ink-40: rgba(27, 42, 38, 0.40);  /* secondary button border */
  --ink-30: rgba(27, 42, 38, 0.30);  /* field underline */
  --ink-25: rgba(27, 42, 38, 0.25);  /* inactive dot */
  --ink-16: rgba(27, 42, 38, 0.16);
  --ink-14: rgba(27, 42, 38, 0.14);  /* hairline rules */
  --ink-12: rgba(27, 42, 38, 0.12);

  /* Text on deep green. */
  --paper-80: rgba(242, 239, 233, 0.80);  /* body */
  --paper-70: rgba(242, 239, 233, 0.70);  /* secondary */
  --paper-55: rgba(242, 239, 233, 0.55);  /* labels */
  --paper-50: rgba(242, 239, 233, 0.50);
  --paper-45: rgba(242, 239, 233, 0.45);
  --paper-40: rgba(242, 239, 233, 0.40);  /* outline button border */
  --paper-16: rgba(242, 239, 233, 0.16);
  --paper-14: rgba(242, 239, 233, 0.14);  /* hairline rules */

  /* The scrim every photograph carries. Non-negotiable per the handoff. */
  --scrim: linear-gradient(
    to right,
    rgba(18, 33, 29, 0.45),
    rgba(18, 33, 29, 0.05) 55%,
    rgba(18, 33, 29, 0.35)
  );

  /* ---- type ---- */
  --display:  'Cormorant Garamond', Georgia, serif;
  --wordmark: 'Cormorant SC', Georgia, serif;
  --ui:       'Jost', system-ui, sans-serif;
  --arabic:   'Noto Kufi Arabic', system-ui, sans-serif;

  /* Type scale. The upper bounds were pulled down from the handoff's originals
     (82 / 58 / 38) so headings sit in one system across every page — at 58px a
     section heading rivalled the page title, and 38px sub-heads rivalled the
     section heads above them. */
  --h1-hero:  clamp(42px, 5.4vw, 76px);
  --h1-page:  clamp(38px, 4.6vw, 62px);
  --h2:       clamp(28px, 3.2vw, 42px);
  --h3:       clamp(24px, 2.6vw, 32px);
  --quote:    clamp(26px, 3.2vw, 42px);
  /* Reading sizes grow gently with the viewport. These were fixed pixels, which
     is correct up to about 1600px but leaves the copy looking undersized on a
     large monitor — the client's report was about a 2560-wide screen, where
     13.5px body text against a 62px headline reads as a typo rather than a
     hierarchy. The floors are the original values, so nothing below ~1500px
     changes at all; only the ceilings are new. */
  --lede:     clamp(16px, 0.55vw + 9px, 19px);
  --body:     clamp(13.5px, 0.42vw + 8.1px, 16px);
  --body-sm:  clamp(13px, 0.34vw + 8.5px, 15px);
  --meta:     clamp(10px, 0.17vw + 7.8px, 11.5px);
  --btn:      clamp(11px, 0.17vw + 8.8px, 12.5px);

  /* ---- spacing ---- */
  /* The content measure. Was a hard 1180px, which froze the whole design at
     that width: past ~1600px the page became a narrow strip stranded in the
     middle of the screen, and the hero headline drifted hundreds of pixels
     away from the wordmark above it (438px at 3440). It now grows with the
     viewport and stops at 1680px, which keeps line lengths readable while
     letting the composition use a large monitor.

     Change this one value and the nav, every .container, the hero alignment
     and the spine all follow — they are all derived from it. */
  --measure:   clamp(1180px, 84vw, 1680px);
  --gutter:    clamp(24px, 5vw, 64px);
  /* Section rhythm. The handoff's 140px ceiling left every section with far
     more air than substance — the home page sections were 700–1200px tall for
     four short elements each. Tuned down once here rather than overridden per
     section, so every page shares one rhythm. */
  --section-y: clamp(48px, 6vh, 84px);
  --col-gap:   clamp(28px, 5vw, 80px);
  --nav-h:     88px;

  /* ---- motion ----
     Restrained by design: colour-only hovers, one reveal idiom, no parallax. */
  --t-hover:   240ms;
  --t-reveal:  900ms;
  --t-wipe:    420ms;
  --t-accord:  300ms;
  --t-fade:    600ms;
  --ease-wipe: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Shape: the design has no radius and no shadow anywhere. Declared as tokens
     so the intent is explicit rather than merely absent. */
  --radius: 0;
  --shadow: none;
}