:root {
  --bg-primary: #f5f7fa;
  --bg-secondary: #eef1f5;
  --bg-tertiary: #e6eaf0;
  --text-primary: #1f2430;
  --text-secondary: #495163;
  --text-muted: #788293;
  --accent-color: #8256d0;
  --accent-light: #9b74e0;
  --accent-dark: #6842b0;
  --border-color: #d3d9e2;
  --card-bg: #ffffff;
  --card-shadow: 0 4px 18px -6px rgba(31,36,48,0.15), 0 2px 6px -2px rgba(31,36,48,0.08);
  --header-bg: rgba(245,247,250,0.82);
  --header-shadow: 0 4px 14px -4px rgba(31,36,48,0.12);
  --footer-bg: #eef1f5;
  --success: #1f9d55;
  --warning: #c97a11;
  --error: #d64545;
  --info: #2f80d8;
  --gradient-accent: linear-gradient(135deg,#8256d0 0%, #9b74e0 50%, #6842b0 100%);
  --hero-bg: #f3f5f8;
  --hero-cover-color: #eef1f5;
  --cover: #f2f5f9;
}

[data-theme="dark"] {
  --bg-primary: #15161b;
  --bg-secondary: #1d1f25;
  --bg-tertiary: #262a31;
  --text-primary: #f2f4f8;
  --text-secondary: #c5c9d3;
  --text-muted: #8891a1;
  --accent-color: #9b74e0;
  --accent-light: #b691ee;
  --accent-dark: #784fc3;
  --border-color: #323743;
  --card-bg: #1d1f25;
  --card-shadow: 0 6px 28px -10px rgba(0,0,0,0.65), 0 2px 8px -2px rgba(0,0,0,0.4);
  --header-bg: rgba(21,22,27,0.78);
  --header-shadow: 0 6px 20px -8px rgba(0,0,0,0.65);
  --footer-bg: #1d1f25;
  --success: #27b36b;
  --warning: #d29a17;
  --error: #d24f55;
  --info: #4a8ddf;
  --gradient-accent: linear-gradient(135deg,#784fc3 0%, #9b74e0 55%, #b691ee 100%);
  --hero-bg: #15161b;
  --hero-cover-color: #121317;
  --cover: #14171b;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] img:not(.preserve-color) {
  filter: brightness(0.9);
}

[data-theme="light"] .theme-toggle .sun-icon {
  display: none;
}

[data-theme="light"] .theme-toggle .moon-icon {
  display: inline-block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: inline-block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

.theme-toggle {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.theme-toggle:hover {
  transform: rotate(15deg);
  color: var(--accent-color);
}

.theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-light);
  border-radius: 50%;
}

.theme-toggle i {
  pointer-events: none;
}