:root {
  /* Core Colors */
  --color-primary: #94A684;
  /* Sage Green */
  --color-accent: #9DB9B1;
  /* Soft Teal */

  /* Backgrounds */
  --color-bg-light: #F5F5F0;
  /* Nordic Cream */
  --color-bg-dark: #1A1A17;
  /* Deep Charcoal */

  /* Text & Neutrals */
  --color-text-charcoal: #3F3F37;
  --color-text-grey: #A8A29E;
  --color-white: #FFFFFF;

  /* Typography */
  --font-display: 'Lora', serif;
  --font-mono: 'Space Mono', monospace;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  /* UI Tokens */
  --radius-default: 0;
  --header-height: 80px;
  --transition-fast: 0.2s ease;
  --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

  /* Semantic Mappings (Light Mode Default) */
  --bg-body: var(--color-bg-light);
  --text-body: var(--color-text-charcoal);
  --text-muted: var(--color-text-grey);
  --border-subtle: rgba(63, 63, 55, 0.1);
  --glass-bg: rgba(245, 245, 240, 0.9);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-body: var(--color-bg-dark);
    --text-body: var(--color-bg-light);
    /* Off-white for text in dark mode */
    --text-muted: var(--color-text-grey);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(26, 26, 23, 0.9);
  }
}