/* ========================================
   Dark Mode Styles
   ======================================== */

@import url('./variables.css');

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: var(--background);
  color: var(--text-primary);
}

html[data-theme="dark"] .content {
  background-color: var(--card-background);
  box-shadow: 0 2px 8px var(--shadow);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
  color: var(--text-primary);
}

html[data-theme="dark"] p,
html[data-theme="dark"] ul,
html[data-theme="dark"] ol,
html[data-theme="dark"] li {
  color: var(--text-secondary);
}

html[data-theme="dark"] th {
  background-color: var(--background);
  color: var(--text-primary);
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: var(--border);
  color: var(--text-secondary);
}

html[data-theme="dark"] a {
  color: var(--primary);
}

html[data-theme="dark"] a:hover {
  color: var(--secondary);
}

html[data-theme="dark"] .theme-toggle {
  background-color: var(--card-background);
  color: var(--text-primary);
  border-color: var(--border);
}

html[data-theme="dark"] .theme-toggle:hover {
  background-color: var(--primary);
  color: #1A1A2E;
  border-color: var(--primary);
}

html[data-theme="dark"] .footer {
  border-top-color: var(--border);
  color: var(--text-secondary);
}