:root {
  color-scheme: light;

  /* Colors — OKLCH */
  --color-sand: oklch(95.3% 0.015 80);
  --color-bark: oklch(22% 0.015 60);
  --color-bark-hover: #3d3832;
  --color-walnut: oklch(35% 0.07 50);
  --color-gold: oklch(63% 0.155 85);
  --color-white: oklch(100% 0 0);

  /* Colors — alpha variants */
  --color-sand-80: oklch(95.3% 0.015 80 / 80%);
  --color-bark-60: oklch(22% 0.015 60 / 60%);
  --color-bark-30: oklch(22% 0.015 60 / 30%);
  --color-bark-15: oklch(22% 0.015 60 / 15%);
  --color-bark-06: oklch(22% 0.015 60 / 6%);
  --color-bark-05: oklch(22% 0.015 60 / 5%);

  /* Colors — feedback */
  --color-alert-bg: #fef3c7;
  --color-alert-text: #92400e;
  --color-error-bg: #fef2f2;
  --color-error-text: #991b1b;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 1.5rem;
  --space-3xl: 2rem;
  --space-4xl: 2.5rem;
  --space-5xl: 3rem;
  --space-6xl: 4rem;
  --space-7xl: 5rem;
  --space-8xl: 6rem;

  /* Border radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-nav: 0 1px 8px var(--color-bark-06);
  --shadow-sm: 0 2px 8px var(--color-bark-15);
  --shadow-md: 0 4px 16px oklch(22% 0.015 60 / 20%);
  --shadow-lg: 0 4px 24px oklch(22% 0.015 60 / 10%);
  --shadow-cta: 0 4px 24px oklch(35% 0.07 50 / 20%);
  --shadow-cta-hover: 0 8px 32px oklch(35% 0.07 50 / 30%);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Transitions */
  --transition-fast: 0.15s;
  --transition-normal: 0.2s;

  /* Layout */
  --content-max-width: 1200px;
}

/* Dark mode skeleton (future)
@media (prefers-color-scheme: dark) {
  :root {
    --color-sand: oklch(20% 0.01 60);
    --color-bark: oklch(90% 0.01 80);
  }
}
*/