:root {
  /* Neutral scale (9 shades) */
  --neutral-50: oklch(98% 0 0); /* near white */
  --neutral-100: oklch(from var(--neutral-50) calc(l - 5%) c h);
  --neutral-200: oklch(from var(--neutral-50) calc(l - 10%) c h);
  --neutral-300: oklch(from var(--neutral-50) calc(l - 20%) c h);
  --neutral-400: oklch(from var(--neutral-50) calc(l - 30%) c h);
  --neutral-500: oklch(from var(--neutral-50) calc(l - 40%) c h);
  --neutral-600: oklch(from var(--neutral-50) calc(l - 50%) c h);
  --neutral-700: oklch(from var(--neutral-50) calc(l - 60%) c h);
  --neutral-800: oklch(from var(--neutral-50) calc(l - 70%) c h);
  --neutral-900: oklch(from var(--neutral-50) calc(l - 80%) c h);

  /* Base usage */
  --color-bg: var(--neutral-50);
  --color-bg-alt: var(--neutral-100);
  --color-text: var(--neutral-800);

  /* Accent colors */
  --color-primary: oklch(65% 0.15 150); /* green */
  --color-primary-hover: oklch(from var(--color-primary) calc(l - 10%) c h);
  --color-accent: oklch(75% 0.12 80); /* sandy beige */
  --color-accent-hover: oklch(from var(--color-accent) calc(l - 10%) c h);

  /* Typography */
  --font-body: "Open Sans", sans-serif;
  --font-heading: "Caveat", cursive;

  /* Spacing */
  --space-sm: 0.625rem;
  --space-md: 1.25rem;
  --space-lg: 2.5rem;
  --border-radius: 0.5rem;
  --transition: all 0.3s ease;
}