/* Dark mode overrides (redefine variables) */
body.dark {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --heading-color: #ffffff;
  --accent-color: #ff7518; /* Changed from blue to orange */
  --accent-hover: #e65c00; /* Changed from blue to orange */
  --subtle-text: #a0a0a0; /* Lighter gray for readability */
  --subtle-bg: #1e1e1e; /* Dark section bg */
  --border-color: #444;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --footer-link: #ff7518; /* Changed from blue to orange */
  --footer-link-hover: #e65c00; /* Changed from blue to orange */

  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Smooth theme switch */
}

/* Expanded dark mode overrides (apply redefined variables) */
body.dark h1, body.dark h2 {
  color: var(--heading-color);
}

body.dark a {
  color: var(--accent-color);
  transition: color 0.2s;
}

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

body.dark .subtitle {
  color: var(--subtle-text);
}

body.dark .description {
  color: var(--text-color);
}

body.dark .section-content {
  background-color: var(--subtle-bg);
}

body.dark footer {
  color: var(--subtle-text);
  border-top: 1px solid var(--border-color);
}

body.dark footer a {
  color: var(--footer-link);
}

body.dark footer a:hover {
  color: var(--footer-link-hover);
}

body.dark li {
  color: var(--text-color);
}

/* Dark mode overrides for header */
body.dark .site-header {
  background-color: var(--bg-color); 
  border-bottom: 1px solid var(--border-color); /* Subtle border */
}

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

body.dark .header-brand a {
  color: var(--text-color);
}

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

/* Respect system preference (apply dark overrides) */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  /* Extend with other selectors if needed, e.g., h1 { color: #ffffff; } */
}

/* Toggle button styling (absolute within parent) */
#dark-mode-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  all: unset; /* Reset default button styles */
  cursor: pointer;
  display: flex; /* To align SVGs if needed */
  color: var(--accent-color);
  padding: 6px 12px;
  font-size: 0.9em;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 6px;
}

/* Hide icons initially via JS, but ensure they adapt color */
#light-icon, #dark-icon {
  width: 30px; /* Reduced size to prevent cutoff */
  height: 30px;
}

#dark-mode-toggle:hover {
    background-color: var(--accent-color);
    color: var(--bg-color);
}