/* Design tokens — the visual language of the reference homepage.
   White space first (70%), deep navy for trust (20%), aqua for water/outdoor
   freshness (7%), coral for the very few moments that need attention (3%). */
:root{
  /* Brand */
  --navy:#102A43;
  --navy-2:#153B50;
  --navy-deep:#0B2133;
  --teal:#19A7A0;
  --teal-deep:#157E78;
  --teal-soft:#F1FBFA;
  /* Readable aqua for navy bands; plain teal is too dark on deep navy. */
  --teal-on-navy:#74D4CE;
  --coral:#F28C52;

  /* Text */
  --ink:#172B3A;
  --ink-2:#344A5E;
  --muted:#667784;
  --on-navy:#D8E2E8;
  --on-navy-muted:#AFC2CF;

  /* Surfaces */
  --bg:#FFFFFF;
  --soft:#F7F9FA;
  --soft-2:#F2F5F6;

  /* Borders */
  --line:#DCE3E7;
  --line-2:#E7ECEF;
  --line-strong:#C8D3D9;

  /* Focus */
  --focus:#19A7A0;

  /* Type — display 48-64, section 30-42, subhead 24-28, body 16-18. */
  --font-body:"Inter","Manrope","IBM Plex Sans","Source Sans 3","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-heading:var(--font-body);
  --w-regular:400;
  --w-medium:520;
  --w-semibold:600;
  --w-bold:650;
  --fs-h1:clamp(38px,4.6vw,58px);
  --fs-h2:clamp(30px,3.2vw,42px);
  --fs-h3:clamp(22px,2.2vw,28px);
  --fs-h4:20px;
  --fs-lead:clamp(17px,1.4vw,20px);
  --fs-body:17px;
  --fs-small:15px;
  /* Primary navigation: one step above body copy so the header row reads at a
     glance without competing with page headings. */
  --fs-nav:clamp(19px,1.2vw,21px);
  --fs-micro:13px;
  --fs-label:12px;
  --lh-tight:1.08;
  --lh-heading:1.15;
  --lh-body:1.7;
  --tracking-tight:-.04em;
  --tracking-heading:-.03em;
  --tracking-label:.14em;

  /* Space — large blocks breathe at 96-116px, as the design language asks. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-section:clamp(72px,8vw,116px);

  /* Layout — the 1200-1320px content area keeps body measure readable on wide
     screens; the gutter scales with the viewport. */
  --max:1320px;
  --gutter:clamp(20px,3.4vw,48px);
  --radius-sm:6px;
  --radius:10px;
  --radius-md:12px;

  /* Motion — subtle only, 150-350ms, one easing curve, one reveal distance. */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms;
  --dur:220ms;
  --dur-slow:350ms;
  --reveal-shift:16px;

  /* compatibility aliases for base styles */
  --color-ink:var(--ink);
  --color-background:var(--bg);
  --color-focus:var(--focus);
  --radius-control:var(--radius-sm);
}