/* tokens.css — DESIGN.md §3–5 as custom properties.
   Provisional palette extracted from logo; confirm at {{brand_confirm}}.
   Promote to DESIGN_SYSTEM tokens at design lock. */

:root {
  /* Palette (DESIGN.md §3) */
  --navy-900: #1B2A4A;
  --navy-700: #24365E;
  --teal-500: #2FA6A0;   /* brand accent — icons, bars, non-text UI (≥3:1 contexts) */
  --teal-600: #27908B;   /* hover depth on teal */
  --teal-700: #1F756F;   /* AA action teal — text links + button fills (white text ≥4.5:1) */
  --teal-800: #196660;   /* pressed/hover on teal-700 */
  --teal-100: #E4F3F2;
  --paper:    #FAF9F6;
  --ink-900:  #1E2430;
  --ink-500:  #5B6472;
  --line:     #E5E8EC;
  --amber-100: #FFF6E3;
  --amber-700: #8A6A1F;
  --white:    #FFFFFF;
  --on-navy-muted: #B8C2D4; /* microline/captions on navy — AA at small sizes */

  /* Type (DESIGN.md §4) */
  --font-serif: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(2.2rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.65rem, 3.2vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;   /* 17px desktop */
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;
  --lh-body: 1.65;

  /* Spacing — 8pt scale (DESIGN.md §5) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-7: 56px; --s-8: 64px;
  --s-12: 96px; --s-16: 128px;
  --section-pad: var(--s-12);
  --section-pad-lg: var(--s-16);

  /* Shape & container */
  --radius: 12px;
  --radius-sm: 8px;
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Elevation & borders */
  --hairline: 1px solid var(--line);
  --shadow-hover: 0 10px 30px rgba(27, 42, 74, 0.10);

  /* Motion (DESIGN.md §6) */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 300ms;
}

@media (max-width: 720px) {
  :root {
    --fs-body: 1rem;      /* 16px mobile */
    --section-pad: var(--s-7);
    --section-pad-lg: var(--s-7);
  }
}