:root {
  /* ── Color Palette ── */
  --sage: #8ea87b;
  --sage-muted: rgba(142, 168, 123, 0.15);
  --olive: #5a6e4e;
  --olive-deep: #3d4a35;
  --cream: #f5f0e8;
  --cream-dark: #ebe4d8;
  --cream-light: #faf8f4;
  --white: #ffffff;
  --text-primary: #2c2c2c;
  --text-secondary: #5a5a5a;
  --text-muted: #8a8a8a;
  --error: #c0392b;
  --error-bg: rgba(192, 57, 43, 0.08);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, serif;
  --font-ui: 'Lora', Georgia, serif;

  /* ── Spacing Scale ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Border Radius ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-soft: 0 2px 20px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.08);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;

  /* ── Layout ── */
  --max-width: 480px;
  --max-width-wide: 600px;
}