:root {
  --color-primary: #C5A880;
  --color-secondary: #121212;
  --color-accent: #e74c3c;
  --color-neutral-900: #121212;
  --color-neutral-100: #F9F9F9;
  --bg-page: #F9F9F9;
  --bg-surface: #FFFFFF;
  --bg-muted: #F4F1EB;
  --text-primary: #121212;
  --text-secondary: rgba(18, 18, 18, 0.7);
  --text-muted: rgba(18, 18, 18, 0.5);
  --border-color: #E5E5E5;
  --font-base: 'Inter', sans-serif;
  --font-heading: 'Playfair Display', serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
}

html {
  background-color: var(--bg-page);
  color: var(--text-primary);
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition: background-color 0.25s ease, color 0.25s ease;
}

body.dark {
  --bg-page: #0B0B0B;
  --bg-surface: #161616;
  --bg-muted: #111111;
  --text-primary: #F4F4F4;
  --text-secondary: rgba(244, 244, 244, 0.75);
  --text-muted: rgba(244, 244, 244, 0.55);
  --border-color: #2A2A2A;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

body.dark header,
body.dark footer {
  background-color: rgba(10, 10, 10, 0.92) !important;
  border-color: var(--border-color) !important;
}

body.dark .bg-white,
body.dark .bg-off-white,
body.dark .bg-neutral-100,
body.dark .bg-neutral-200,
body.dark .bg-neutral-300,
body.dark .bg-gray-100,
body.dark .bg-gray-200,
body.dark .bg-gray-300 {
  background-color: var(--bg-surface) !important;
}

body.dark .text-obsidian,
body.dark .text-primary {
  color: var(--text-primary) !important;
}

body.dark .text-obsidian\/70,
body.dark .text-primary\/70 {
  color: var(--text-secondary) !important;
}

body.dark .text-obsidian\/60,
body.dark .text-primary\/60 {
  color: rgba(244, 244, 244, 0.6) !important;
}

body.dark .text-obsidian\/50,
body.dark .text-primary\/50 {
  color: var(--text-muted) !important;
}

body.dark .text-obsidian\/40,
body.dark .text-primary\/40 {
  color: rgba(244, 244, 244, 0.4) !important;
}

body.dark .text-obsidian\/30,
body.dark .text-primary\/30 {
  color: rgba(244, 244, 244, 0.3) !important;
}

body.dark .border-gray-100,
body.dark .border-gray-200,
body.dark .border-gray-300,
body.dark .border-neutral-100,
body.dark .border-neutral-200,
body.dark .border-neutral-300,
body.dark .border-b,
body.dark .border-t {
  border-color: var(--border-color) !important;
}

body.dark .text-white {
  color: var(--text-primary) !important;
}

body.dark .bg-obsidian {
  background-color: var(--bg-surface) !important;
}