/* design-system.css — Tofino Tidal locked tokens (single source of truth).
   Vibrant cool-coastal Pacific NW: deep ocean teal + sea-glass + warm sun-amber pop.
   5 core hex + 2 supporting; one accent; no pure #000/#fff; not the beige-brass cliche. */
:root{
  /* ── colour (locked) ─────────────────────────────────────────────── */
  --bg:#f3f7f6;          /* sea-foam off-white, cool (NOT beige) — page canvas */
  --surface:#fbfdfc;     /* off-white card/raised */
  --deep:#0a3035;        /* darkest Pacific teal — immersive hero/footer bg */
  --ink:#0c3a40;         /* deep teal — primary text on light */
  --teal:#0e7c78;        /* vibrant ocean teal — links, secondary accents, rules */
  --accent:#e8932b;      /* warm sun-amber — THE accent, used sparingly (CTA, marks) */
  --muted:#5b716e;       /* slate-sage — secondary text */
  --sand:#e7d9b8;        /* warm sand — minor warmth tone only */

  --text:var(--ink);     /* engine alias */
  --border:color-mix(in srgb,var(--ink) 12%,transparent);
  --border-strong:color-mix(in srgb,var(--ink) 22%,transparent);
  /* on-dable text colours for the deep-teal sections */
  --on-deep:#eaf3f0;
  --on-deep-muted:color-mix(in srgb,#eaf3f0 64%,transparent);
  --white:#f7fbfa;       /* near-white for headlines on deep teal (no pure #fff) */

  /* ── type ────────────────────────────────────────────────────────── */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"Hanken Grotesk",system-ui,sans-serif;

  /* type scale (fluid, intentional) */
  --step--1:.84rem; --step-0:1.0625rem; --step-1:1.3rem; --step-2:1.72rem;
  --step-3:2.4rem; --step-4:clamp(2.6rem,5.5vw,4rem); --step-5:clamp(3.2rem,7vw,6rem);

  /* ── spacing + shape ─────────────────────────────────────────────── */
  --space:clamp(1rem,3vw,2rem);
  --section-y:clamp(4.5rem,11vw,9rem);
  --radius:14px;         /* one soft radius scale, locked */
  --radius-sm:10px;
  --radius-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 18px 50px -28px color-mix(in srgb,var(--deep) 50%,transparent);
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}