/* ==========================================================================
   Design tokens — the single source of truth for the whole site.
   Nothing below this file should hard-code a colour, size or easing curve.
   ========================================================================== */

:root {
  /* --- Typography ------------------------------------------------------ */
  /* System stack for now: zero network cost, zero dependency, excellent
     rendering on every target. Swap in a licensed grotesque here later and
     nothing else in the codebase has to change. */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid scale, 1.250 (major third) at both ends.
     clamp() removes the need for typographic breakpoints entirely. */
  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.85vw, 2rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 2vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.5rem + 4.6vw, 5.5rem);
  --text-4xl: clamp(3rem, 1.2rem + 8vw, 8rem);

  --leading-tight: 0.98;
  --leading-snug: 1.15;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Optical tightening: large display type needs negative tracking. */
  --tracking-display: -0.035em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-caps: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- Colour ---------------------------------------------------------- */
  /* Deliberately narrow. A premium scientific product reads as near-neutral;
     the accent is a signal, not decoration, and should stay rare.
     The whole ramp is built on the logo's hue (0deg, ~10% sat) rather than a
     neutral grey, so darks read warm and sit correctly against the mark. */
  --color-brand: #584848; /* sampled from the logo — the one fixed point */

  --color-ink-950: #100d0d;
  --color-ink-900: #171212;
  --color-ink-800: #221b1b;
  --color-ink-700: #332a2a;
  --color-ink-500: #6e6060;
  --color-ink-300: #a79b9b;

  --color-paper-000: #ffffff;
  --color-paper-050: #f7f5f3;
  --color-paper-100: #ede9e5;

  --color-accent: #c0764a; /* clay — soil, without being literal about it */
  --color-accent-soft: rgb(192 118 74 / 0.16);

  /* Semantic aliases: components reference these, never the raw ramp. */
  --color-bg: var(--color-paper-050);
  --color-fg: var(--color-ink-900);
  --color-fg-muted: var(--color-ink-500);

  --color-bg-inverse: var(--color-ink-950);
  --color-fg-inverse: var(--color-paper-050);
  --color-fg-inverse-muted: rgb(246 246 244 / 0.62);

  /* --- Space ----------------------------------------------------------- */
  /* 4px base, doubling-ish. Named by size, not by usage. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;

  /* --- Layout ---------------------------------------------------------- */
  --measure: 62ch; /* max line length for body copy */
  --container-max: 78rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  /* --- Motion ---------------------------------------------------------- */
  /* Restrained curves. Nothing bounces; nothing overshoots. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  /* --- Header ----------------------------------------------------------- */
  --header-height: 4.5rem;
  --header-logo-width: 8.5rem;
  /* Below this the 7-item nav can no longer breathe and collapses to a menu. */
  --nav-collapse: 68rem;

  /* --- Hero scroll budget ---------------------------------------------- */
  /* How many viewport heights of scrolling the hero sequence spans.
     Higher = slower, more cinematic, more scrolling required to clear it.
     This is the single knob for the hero's pacing — see hero.css.

     Raised from 420 for the eight-scene edit: the shortest scene is ~6% of the
     hero, which at 420vh was under 200px of scroll — too brief to read. */
  --hero-scroll-vh: 600;
}

@media (max-width: 48rem) {
  :root {
    /* Touch scrolling covers ground faster per gesture than a wheel, and
       mobile patience is shorter. Shorten the runway. */
    --hero-scroll-vh: 460;
  }
}