/* ==========================================================================
   Even Adama — design tokens
   Colours are sampled from assets/svg/logo-colour.svg. Do not invent new ones.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --ink: #231f20;
  --paper: #fffcf4;
  --surface: #f6f0e2;

  --field: #557839;
  /* --field for TEXT: #557839 is 4.47:1 on --surface, just under the 4.5:1
     that small text needs (WCAG 1.4.3). One step darker passes on both
     --paper (5.96:1) and --surface (5.37:1) and reads as the same green. */
  --field-ink: #4a6b31;
  --olive: #837a49;
  --earth: #a07b58;
  --stone: #938973;
  --stone-deep: #736f5e;

  /* Paper on #a07b58 lands at 3.7:1 — below AA. Same hue, darkened until it
     clears 4.5:1, used wherever earth is a background carrying text. The
     lighter --earth stays for strokes and accents, which carry no copy. */
  --earth-deep: #8b6a49;

  /* Opacity ramps. Everything not brand-coloured is one of these. */
  --ink-80: rgb(35 31 32 / 0.8);
  --ink-60: rgb(35 31 32 / 0.6);
  --ink-30: rgb(35 31 32 / 0.3);
  --ink-10: rgb(35 31 32 / 0.1);
  --ink-05: rgb(35 31 32 / 0.05);

  --paper-80: rgb(255 252 244 / 0.8);
  --paper-60: rgb(255 252 244 / 0.6);
  --paper-30: rgb(255 252 244 / 0.3);
  --paper-10: rgb(255 252 244 / 0.1);
  --paper-05: rgb(255 252 244 / 0.05);

  --scrim: rgb(35 31 32 / 0.42);

  /* Feedback — the only colours outside the brand set, kept for form states */
  --error: #8c2b2b;
  --error-bg: #fbeeee;
  --success: #41634a;
  --success-bg: #eef4ef;

  /* --- Theme (swapped per section by nav.js) ---------------------------- */
  --t-bg: var(--paper);
  --t-fg: var(--ink);
  --t-muted: var(--ink-60);
  --t-line: var(--ink-10);

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Heebo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Assistant", "Heebo", "Segoe UI", system-ui, sans-serif;

  /* Weights toned down one step from the original build: 900/800 read as
     heavy at these display sizes. See feedback [[title-weight]]. */
  --fw-display: 800;
  --fw-heading: 700;
  --fw-label: 600;
  --fw-body: 400;
  --fw-body-strong: 600;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  /* Eyebrow labels: near-normal tracking and a larger body so they read as
     words, not spaced-out capitals. */
  --ls-label: 0.02em;

  /* Fluid scale. Hero is set at runtime by fitText() — see motion-text.js.
     Display caps pulled down ~15% from the first build — the titles were
     overpowering the page. */
  --fs-hero: clamp(2.5rem, 1.2rem + 6vw, 6.5rem);
  --fs-act: clamp(1.875rem, 1.2rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.375rem);
  --fs-h3: clamp(1.3125rem, 1.18rem + 0.85vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.9375rem;
  --fs-counter: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);

  --lh-display: 0.95;
  --lh-heading: 1.15;
  --lh-lead: 1.5;
  --lh-body: 1.7;

  /* --- Space ------------------------------------------------------------ */
  --u-0: 0;
  --u-1: 4px;
  --u-2: 8px;
  --u-3: 12px;
  --u-4: 16px;
  --u-5: 24px;
  --u-6: 32px;
  --u-7: 48px;
  --u-8: 64px;
  --u-9: 96px;
  --u-10: 160px;
  --u-11: 272px;

  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 7.5rem);
  --w-max: 1200px;
  --w-text: 757px;

  --r-sm: 8px;
  --r-md: 16px;
  --r-pill: 999px;

  /* --- Motion ----------------------------------------------------------- */
  --dur-s: 0.4s;
  --dur-m: 0.8s;
  --dur-l: 1.2s;

  --ease-in-out: cubic-bezier(0.75, 0, 0.25, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-plain: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-write: cubic-bezier(0.333, 0, 0.667, 1);
  --ease-dive: cubic-bezier(0.6, 0, 0, 1);
  --ease-hor: cubic-bezier(0.25, 0, 0.75, 1);

  /* Real viewport height in px, written by main.js. `100vh` lies on mobile:
     browser chrome resizes it mid-scroll and every pinned section jumps. */
  --svh: 100vh;

  /* RTL/LTR sign for the few genuinely physical directions */
  --flip: 1;

  --z-nav: 300;
  --z-menu: 400;
  --z-preloader: 500;
}

[dir="ltr"] {
  --flip: -1;
}

/* --- Section themes -------------------------------------------------------
   A section declares data-bg; these set the local palette. nav.js reads the
   same attribute to invert the nav as each section passes behind it.
   -------------------------------------------------------------------------- */

[data-bg="light"] {
  --t-bg: var(--paper);
  --t-fg: var(--ink);
  --t-muted: var(--ink-60);
  --t-line: var(--ink-10);
}

[data-bg="surface"] {
  --t-bg: var(--surface);
  --t-fg: var(--ink);
  --t-muted: var(--ink-60);
  --t-line: var(--ink-10);
}

[data-bg="field"] {
  --t-bg: var(--field);
  --t-fg: var(--paper);
  --t-muted: var(--paper-80);
  --t-line: var(--paper-30);
}

[data-bg="earth"] {
  --t-bg: var(--earth-deep);
  --t-fg: var(--paper);
  --t-muted: var(--paper-80);
  --t-line: var(--paper-30);
}

[data-bg="stone-deep"] {
  --t-bg: var(--stone-deep);
  --t-fg: var(--paper);
  --t-muted: var(--paper-80);
  --t-line: var(--paper-30);
}

[data-bg="ink"] {
  --t-bg: var(--ink);
  --t-fg: var(--paper);
  --t-muted: var(--paper-80);
  --t-line: var(--paper-30);
}

/* Media-backed sections: text sits on a scrim, not on --t-bg */
[data-bg="media"] {
  --t-bg: transparent;
  --t-fg: #ffffff;
  --t-muted: rgb(255 255 255 / 0.85);
  --t-line: rgb(255 255 255 / 0.3);
}