:root {
  --color-bg: #EDFBFC;
  --color-bg-warm: #F6F2E7;
  --color-primary: #83B33D;
  --color-primary-mid: #6D9D37;
  --color-primary-deep: #4C7323;
  --color-ink: #030506;
  --color-ink-soft: #2a2e30;
  --color-muted: #5a6366;
  --color-accent: #3D4CF4;
  --color-alert: #CC1100;
  --color-line: rgba(3, 5, 6, 0.12);
  --color-surface: #ffffff;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Outfit", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-accent: "Caveat", "Brush Script MT", cursive;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --fs-3xl: clamp(2.25rem, 5vw, 3.5rem);
  --fs-display: clamp(2.75rem, 7vw, 5.25rem);

  --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: 4rem;
  --space-9: 6rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(3, 5, 6, 0.06);
  --shadow-md: 0 8px 24px rgba(3, 5, 6, 0.08);
  --shadow-lg: 0 24px 60px rgba(3, 5, 6, 0.12);

  --container: 1200px;
  --container-narrow: 760px;

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 200ms;
  --dur-2: 450ms;
  --dur-3: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}