/*
  Design tokens. Custom properties only — no rules.
  Every downstream file references these; changing a token ripples through.
*/

:root {
  /* ---- Brand ---- */
  --brand: #118776;
  --brand-dark: #0d6b5e;
  --accent: #ff6b35;

  /* ---- Text ---- */
  --ink: #222;
  --ink-body: #333;
  --ink-muted: #666;
  --ink-faint: #888;
  --ink-inverse: #f4ecdc;

  /* ---- Surfaces ---- */
  --bg-page: #fafafa;
  --bg-card: #ffffff;
  --bg-tint-teal: #f0f8f6;
  --bg-tint-cream: #faf8f5;
  --bg-dark: #0f3f36;
  --bg-darker: #2d251d;

  /* ---- Borders ---- */
  --border: #e0e0e0;
  --border-light: #ebebeb;

  /* ---- Stage hues (single number per stage; colors derive from it) ---- */
  --hue-blooming: 320;   /* magenta */
  --hue-growing: 175;    /* teal */
  --hue-sprouting: 130;  /* green */
  --hue-seed: 65;        /* mustard */

  /* ---- Spacing scale ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  2.5rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 7rem;
  --space-6xl: 9rem;

  /* ---- Radii (rem so they scale with text) ---- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999em;

  /* ---- Shadows (px in the values is fine — physical detail, not layout) ---- */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,.06);
  --shadow-medium: 0 2px 8px rgba(0,0,0,.08);
  --shadow-hover:  0 6px 18px rgba(0,0,0,.12);
  --shadow-modal:  0 24px 64px rgba(0,0,0,.35);

  /* ---- Type ---- */
  --font-serif: "Merriweather", Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-body: clamp(1rem, .4vw + .9rem, 1.125rem);
  --text-lead: clamp(1.2rem, 1.5vw + .6rem, 1.55rem);
  --text-h1:   clamp(2rem,  5vw + .5rem, 3rem);
  --text-h2:   clamp(1.5rem, 3vw + .5rem, 2.25rem);
  --text-h3:   clamp(1.15rem, 1.2vw + .8rem, 1.4rem);
  --text-small: 0.9rem;

  /* ---- Layout widths (rem so container queries and text zoom stay in sync) ---- */
  --width-content: 75rem;   /* ≈1200px at default */
  --width-narrow:  45rem;   /* ≈720px */
  --width-hero:    56.25rem; /* ≈900px */
  --width-modal:   45rem;   /* ≈720px */

  /* ---- Media-query breakpoints (em; respect user font-size at query eval) ---- */
  --bp-md: 56.25em;   /* was 900px */

  /* ---- Motion ---- */
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 300ms;

  /* ---- Chrome heights (used to subtract from 100dvh in fixed-viewport sections) ---- */
  --nav-height: 4rem;
}