/* Dark Mode Styles */
:root.dark-theme {
  --color-bg: #121212;
  --color-text: #e0e0e0;
  --color-primary: #a67ffc;
  --color-secondary: #7d55d6;
  --color-accent: #ff8080;
  --color-muted: #a0a0a0;
  --color-border: #333333;
  --color-card-bg: #1e1e1e;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.25);
}

:root.dark-theme .site-header {
  background-color: var(--color-bg);
}

:root.dark-theme .main-nav {
  background-color: var(--color-card-bg);
}

:root.dark-theme .site-footer {
  background-color: var(--color-card-bg);
}

:root.dark-theme .social-links a {
  background-color: var(--color-bg);
}

:root.dark-theme .splash-content {
  background-color: rgba(0, 0, 0, 0.7);
}

:root.dark-theme .menu-toggle,
:root.dark-theme .dark-mode-toggle {
  color: var(--color-text);
}

:root.dark-theme .menu-toggle:hover,
:root.dark-theme .dark-mode-toggle:hover {
  color: var(--color-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-theme) {
    --color-bg: #121212;
    --color-text: #e0e0e0;
    --color-primary: #a67ffc;
    --color-secondary: #7d55d6;
    --color-accent: #ff8080;
    --color-muted: #a0a0a0;
    --color-border: #333333;
    --color-card-bg: #1e1e1e;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.25);
  }

  :root:not(.light-theme) .site-header {
    background-color: var(--color-bg);
  }

  :root:not(.light-theme) .main-nav {
    background-color: var(--color-card-bg);
  }

  :root:not(.light-theme) .site-footer {
    background-color: var(--color-card-bg);
  }

  :root:not(.light-theme) .social-links a {
    background-color: var(--color-bg);
  }

  :root:not(.light-theme) .splash-content {
    background-color: rgba(0, 0, 0, 0.7);
  }

  :root:not(.light-theme) .menu-toggle,
  :root:not(.light-theme) .dark-mode-toggle {
    color: var(--color-text);
  }

  :root:not(.light-theme) .menu-toggle:hover,
  :root:not(.light-theme) .dark-mode-toggle:hover {
    color: var(--color-primary);
  }
}