/*
 * Second Shed — design tokens
 * ---------------------------
 * Single source of truth for color, type, space, radius, motion, and shadow.
 *
 * Contrast policy (AA verified, see .plans spec § "Contrast verification"):
 *   - Body text → always Charcoal Earth (`--color-text`).
 *   - Sage Mist, Clay Brown, Muted Terracotta → NEVER small body text;
 *     they fail AA at 16px. Use for borders, dividers, and ≥24px headings only.
 *   - Moss Green on Warm Stone is AA-marginal (4.6:1); `--color-moss-text` is
 *     a slightly darkened variant reserved for small text links and labels
 *     (see A11Y-2 in the spec).
 */

:root {
  /* Palette ---------------------------------------------------------- */
  --color-moss: #5d6b57; /* Primary accent — buttons, nav hover, CTAs */
  --color-moss-text: #4d5a48; /* Darkened Moss for small-text use (AA-safe) */
  --color-stone: #e9e4da; /* Primary background */
  --color-text: #2f332e; /* Charcoal Earth — body text */
  --color-clay: #8a6b57; /* Secondary accent — sparing use, large only */
  --color-sage: #b7c1b0; /* Decoration only — borders, muted bgs */
  --color-terracotta: #b86f52; /* Restrained accent — large only */
  --color-forest: #394436; /* Footer, dark overlays, philosophy section */

  /* Functional aliases ---------------------------------------------- */
  --color-bg: var(--color-stone);
  --color-bg-muted: #f1ece2; /* tinted stone, used for section bands */
  --color-bg-dark: var(--color-forest);
  --color-link: var(--color-moss-text);
  --color-link-hover: var(--color-clay);
  --color-border: var(--color-sage);
  --color-focus-ring: var(--color-moss);

  /* Type ------------------------------------------------------------- */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;

  --fs-display: clamp(2.5rem, 5vw, 4.5rem); /* H1 hero — serif */
  --fs-h1: clamp(2rem, 3.5vw, 3rem); /* page H1 — serif */
  --fs-h2: clamp(1.5rem, 2.5vw, 2.25rem); /* section — serif */
  --fs-h3: 1.5rem; /* card title — serif */
  --fs-h4: 1.25rem; /* sub-card — sans */
  --fs-lead: 1.25rem; /* hero lead — sans 400 */
  --fs-body: 1rem; /* body — sans 400 */
  --fs-small: 0.875rem; /* meta — sans 500 */
  --fs-xs: 0.75rem; /* micro meta */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --ls-display: -0.01em;
  --ls-caps: 0.08em;

  /* Spacing scale (4px base) ---------------------------------------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-24: 6rem; /* 96px */

  /* Section vertical rhythm */
  --section-y: clamp(3rem, 8vw, 6rem);
  --section-y-lg: clamp(4rem, 10vw, 8rem);

  /* Radius ---------------------------------------------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* Motion ---------------------------------------------------------- */
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --motion-slow: 480ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Shadow — tinted with Charcoal Earth, never pure black ----------- */
  --shadow-1:
    0 1px 2px rgba(47, 51, 46, 0.06), 0 1px 1px rgba(47, 51, 46, 0.04);
  --shadow-2:
    0 4px 10px rgba(47, 51, 46, 0.08), 0 2px 4px rgba(47, 51, 46, 0.05);
  --shadow-3:
    0 12px 28px rgba(47, 51, 46, 0.12), 0 4px 10px rgba(47, 51, 46, 0.06);

  /* Layout ---------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-pad: var(--space-6);

  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --nav-h: 72px;
}