:root {
  /* Palette */
  --bg: #F6F6F4;
  --surface: #FFFFFF;
  --surface-shell: rgba(10, 10, 10, 0.025);
  --ink: #0B0B0C;
  --ink-muted: #5B5B5F;
  --ink-faint: #9A9A9D;
  --hairline: rgba(10, 10, 10, 0.06);
  --accent: #2F6F4E;
  --accent-soft: #E7EEE9;
  --warn: #8C3B3B;
  --warn-soft: #F3E7E7;

  /* Shadow */
  --shadow-card:
    0 1px 1px rgba(10, 10, 10, 0.02),
    0 8px 24px -12px rgba(10, 10, 10, 0.08),
    0 24px 48px -24px rgba(10, 10, 10, 0.05);
  --shadow-card-hover:
    0 2px 2px rgba(10, 10, 10, 0.03),
    0 12px 32px -14px rgba(10, 10, 10, 0.12),
    0 32px 64px -24px rgba(10, 10, 10, 0.08);

  /* Spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;

  /* Radii */
  --r-xl: 32px;
  --r-lg: 26px;
  --r-md: 14px;
  --r-pill: 9999px;

  /* Typography — scale */
  --t-eyebrow-size: 10px;
  --t-eyebrow-track: 0.22em;
  --t-meta-size: 12px;
  --t-body-size: 15px;
  --t-body-lh: 1.55;
  --t-tile-num: clamp(32px, 2.4vw, 44px);
  --t-h2: clamp(28px, 3.2vw, 44px);
  --t-hero: clamp(44px, 5.8vw, 84px);

  /* Motion */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-med: 280ms;
  --d-slow: 700ms;

  /* Fonts */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}