:root {
  color-scheme: light;

  --color-bg: #f3eee2;
  --color-surface: #fffaf1;
  --color-surface-soft: #eef0e3;
  --color-brand: #3f8f63;
  --color-brand-strong: #2f6f4d;
  --color-brand-ink: #173a29;
  --color-text: #243127;
  --color-text-muted: #5d6f63;
  --color-border: #c7d3c4;
  --color-focus: #2f6f4d;
  --color-danger: #ff8a8a;

  --font-body: "Avenir Next", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;

  --fs-100: clamp(0.88rem, 0.82rem + 0.2vw, 0.98rem);
  --fs-200: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  --fs-300: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem);
  --fs-400: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem);
  --fs-500: clamp(1.8rem, 1.35rem + 1.55vw, 2.7rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 39, 29, 0.1);
  --shadow-md: 0 10px 24px rgba(23, 39, 29, 0.16);
  --shadow-lg: 0 16px 36px rgba(23, 39, 29, 0.22);

  --container-max: 1100px;
  --container-pad: clamp(1rem, 0.8rem + 1vw, 2rem);

  --motion-fast: 140ms;
  --motion-base: 240ms;
  --motion-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}