/*
  TENLAKES DESIGN TOKENS — single source of truth for every style value.
  Rules: all colors, fonts, type, and layout values are defined HERE and only here.
  Pages consume var(--token); never hardcode a value in page CSS.
  Changing a token changes the whole site on the next deploy.
*/
:root {
  /* Color */
  --color-bg: #FFFFFF;          /* page background */
  --color-ink: #101215;         /* primary text, waterline upper strokes */
  --color-navy: #2A4B8D;        /* brand accent: links, eyebrow, button, waterline lower strokes */
  --color-navy-hover: #223E75;  /* button hover */
  --color-body: #5B6068;        /* body/secondary text */
  --color-muted: #9AA0A6;       /* mono labels, footer */
  --color-border: #E2E2E2;      /* hairline rules, form field outlines */
  --color-error: #A33A2B;       /* form validation messages (Wave page) — new, pending Blake's approval */

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --weight-eyebrow: 500;
  --weight-h1: 500;
  --size-wordmark: 22px;
  --size-tag: 10px;
  --size-eyebrow: 13px;
  --size-h1: 66px;
  --size-h1-md: 52px;           /* <=810px */
  --size-h1-sm: 40px;           /* <=480px */
  --size-body: 15px;
  --size-btn: 13px;
  --size-footer: 9px;
  --size-label: 13px;           /* form field labels */
  --size-input: 15px;           /* form inputs and choice chips (>=16px on phones avoids iOS zoom: see --size-input-sm) */
  --size-input-sm: 16px;        /* <=480px */
  --size-note: 12px;            /* form helper text and note */
  --weight-label: 500;
  --leading-h1: 1.02;
  --leading-h1-sm: 1.06;
  --leading-body: 1.8;
  --tracking-tight: -0.045em;   /* wordmark + h1 */
  --tracking-tag: 0.24em;
  --tracking-tag-xs: 0.16em;    /* <=360px, so the nav fits the smallest phones */
  --tracking-footer: 0.12em;

  /* Layout */
  --space-gutter: 56px;
  --space-gutter-md: 40px;      /* <=810px */
  --space-gutter-sm: 24px;      /* <=480px */
  --space-bar: 20px;            /* nav/footer vertical padding */
  --space-nav-gap: 24px;        /* between nav items on the right (WAVE, COMING SOON) */
  --space-nav-gap-xs: 14px;     /* <=360px */
  --space-nav-wave: 5px;        /* gap between a nav label and its wavy current-page line */
  --height-nav-wave: 4px;       /* height of one ripple in the nav line */
  --opacity-nav-hover: 0.6;     /* faint grey wave on hover (nav text stays grey); navy text + navy wave only on the current page */
  --space-hero-top: 64px;       /* minimum gap between waterline and hero content */
  --space-hero-top-sm: 48px;    /* <=480px */
  --space-hero-bottom: 64px;
  --space-hero-gap: 30px;
  --hero-optical-above: 2;      /* hero free space split 2:3 = content sits ~40% down (optical center) */
  --hero-optical-below: 3;
  --height-waterline: 144px;    /* = original 160px band with the empty space above the top stroke trimmed; stroke scale unchanged */
  --height-waterline-sm: 90px;  /* <=480px; = original 100px, same trim */
  --width-h1-max: 880px;
  --width-body-max: 560px;
  --radius-btn: 3px;

  /* Inner pages (Option D) and forms */
  --space-page-top: 72px;       /* content top padding on inner pages */
  --space-page-top-sm: 48px;    /* <=480px */
  --space-page-bottom: 88px;    /* gap between content and the waterline above the footer */
  --space-page-bottom-sm: 64px; /* <=480px */
  --width-form-max: 720px;
  --space-field-gap: 26px;      /* vertical gap between form fields */
  --space-field-col-gap: 20px;  /* gap between paired fields on wide screens */
  --height-input: 46px;
  --radius-input: 3px;
  --space-chip-gap: 8px;
}