/* ==========================================================================
   tokens.css — the single source of design truth (POOL-SITE-BUILD-PLAN §4)
   Every value used elsewhere in the CSS comes from here. No one-off hex codes,
   no magic pixel values outside this scale.
   Load order (do not change): tokens → base → layout → components → pages
   ========================================================================== */

:root {
  /* --- Color · Core (§4.2) ------------------------------------------------ */
  --deep:      #0B3D4F;  /* deep water teal — headers, primary text on light */
  --water:     #1B7A8C;  /* mid water — links, active states, section accents */
  --shallow:   #A8D8DC;  /* pale water — borders, subtle fills, dividers */
  --sand:      #F5F1E8;  /* bleached sand — page background */
  --paper:     #FFFFFF;  /* cards, surfaces */
  --sun:       #E8873A;  /* warm amber — CTAs ONLY. Never decorative. */
  --sun-hover: #D0742C;

  /* --- Color · Semantic --------------------------------------------------- */
  --ink:       #12242B;  /* body copy */
  --ink-muted: #5A6B72;
  --line:      #DCE5E4;
  --success:   #2E7D5B;
  --danger:    #B3402F;

  /* On-color text pairings (all AA-verified against their surface) */
  --on-sun:    #FFFFFF;  /* white on amber button fill */
  --on-deep:   #FFFFFF;
  --on-water:  #FFFFFF;

  /* --- Elevation — soft, low, water-like. No harsh drop shadows. --------- */
  --shadow-sm: 0 1px 2px rgba(11, 61, 79, .06);
  --shadow-md: 0 4px 16px rgba(11, 61, 79, .10);
  --shadow-lg: 0 12px 40px rgba(11, 61, 79, .14);

  /* --- Typography (§4.3) ------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;

  /* Fluid type scale — clamp() so it breathes without breakpoint churn */
  --t-hero:  clamp(2.5rem, 6vw, 4.5rem);   /* display, 600 */
  --t-h1:    clamp(2rem, 4.5vw, 3rem);
  --t-h2:    clamp(1.5rem, 3vw, 2.125rem);
  --t-h3:    1.25rem;
  --t-body:  1.0625rem;                     /* 17px — audience skews 40+ */
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  --lh-tight: 1.1;   /* display */
  --lh-body:  1.6;   /* copy */

  --measure: 68ch;   /* body copy max-width — never full-bleed paragraphs */

  /* --- Spacing — 4px base scale (§4.4) ----------------------------------- */
  --s1: .25rem;  --s2: .5rem;  --s3: .75rem;  --s4: 1rem;   --s5: 1.25rem;
  --s6: 1.5rem;  --s8: 2rem;   --s12: 3rem;   --s16: 4rem;  --s24: 6rem;  --s32: 8rem;

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;   /* cards */
  --radius-pill: 999px;

  /* --- Layout ------------------------------------------------------------ */
  --container:        1200px;
  --container-narrow: 760px;   /* blog, legal */
  --gutter:           var(--s6);

  /* Minimum touch target — the primary user is on a phone, outdoors (§4.6) */
  --tap: 44px;

  /* --- Motion ------------------------------------------------------------ */
  --ease:         cubic-bezier(.22, .61, .36, 1);
  --dur-fast:     120ms;
  --dur:          200ms;   /* standard hover/focus + wizard step transitions */
  --waterline-loop: 20s;   /* §4.5 signature element — slow, barely perceptible */

  /* --- z-index scale ----------------------------------------------------- */
  --z-header:     100;
  --z-drawer:     200;
  --z-sticky-cta: 150;
}