/* Custom color scheme override */
:root {
  /* Light theme */
  --color-background: #F8FDDD;
  --color-background-secondary: #f0e8cc;
  --color-background-header: #F8FDDD;
  --color-text: #3D2200;
  --color-text-secondary: #5a3a0a;
  --color-border: #e6d4b3;
  
  /* Dark theme (inverted for good contrast) */
  --color-background-dark: #2d1d00;
  --color-background-secondary-dark: #4a3700;
  --color-text-dark: #F8FDDD;
  --color-text-secondary-dark: #e6d4b3;
  --color-border-dark: #664b00;
  
  /* Accents */
  --color-accent: #FF851B;
  --color-accent-hover: #e67315;
}

/* Light theme overrides */
.light {
  background-color: var(--color-background);
  color: var(--color-text);
}

.light .content-inner {
  background-color: var(--color-background);
  color: var(--color-text);
}

.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 {
  color: var(--color-text);
}

.light a {
  color: var(--color-accent);
}

.light a:hover {
  color: var(--color-accent-hover);
}

.light .border {
  border-color: var(--color-border);
}

/* Dark theme overrides */
.dark {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

.dark .content-inner {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--color-text-dark);
}

.dark a {
  color: var(--color-accent);
}

.dark a:hover {
  color: var(--color-accent-hover);
}

.dark .border {
  border-color: var(--color-border-dark);
}

/* Personal theme overrides (if active) */
body {
  background-color: var(--color-background, #F8FDDD);
  color: var(--color-text, #3D2200);
}

header {
  border-bottom-color: var(--color-border, #e6d4b3);
}

nav a {
  color: var(--color-text-secondary, #5a3a0a);
}

nav a:hover, nav a.active {
  color: var(--color-text, #3D2200);
}

nav a.active::after {
  background-color: var(--color-text, #3D2200);
}

footer {
  border-top-color: var(--color-border, #e6d4b3);
  color: var(--color-text-secondary, #5a3a0a);
}

/* Buttons and interactive elements */
button, .button {
  background-color: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

button:hover, .button:hover {
  background-color: var(--color-accent-hover);
}