/* Design Tokens — Boiled Ocean — Slate & Chalk */
:root {
  /* Colors — Slate & Chalk */
  --bg: #1C1C1E;
  --surface: #2C2C2E;
  --text: #E5E5E7;
  --text-muted: rgba(229, 229, 231, 0.6);
  --amber: #FFBF00;
  --amber-wash: rgba(255, 191, 0, 0.2);
  --border: rgba(229, 229, 231, 0.1);
  --border-active: rgba(229, 229, 231, 0.2);

  /* Typography — Slate & Chalk */
  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  /* Layout */
  --max-width: 960px;
  --nav-height: 56px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;

  /* Z-index layers */
  --z-content: 1;
  --z-nav: 100;
  --z-progress: 200;
  --z-console: 300;
}

/* Time-of-day palette shifts — subtle warm shift */
:root.morning {
  --bg: #1C1C1E;
}

:root.afternoon {
  --bg: #1C1C1E;
}

:root.evening {
  --bg: #1E1E20;
}

:root.night {
  --bg: #1E1E20;
}