:root {
  color-scheme: light;
  background-color: #ffffff;
}

html {
  background-color: #ffffff;
}

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

body {
  transition: background-color 0.2s ease, color 0.2s ease;
  background-color: #ffffff;
  color: #595959;
}

html[data-theme="light"],
body[data-theme="light"] {
  background-color: #ffffff;
  color: #595959;
}

html[data-theme="dark"],
body[data-theme="dark"] {
  background-color: #20212b;
  color: #dadbdf;
}

body[data-theme="dark"] .wrapper,
body[data-theme="dark"] header,
body[data-theme="dark"] section,
body[data-theme="dark"] .navbar {
  background-color: #20212b;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-theme="dark"] strong,
body[data-theme="dark"] th {
  color: #3eb7f0;
}

body[data-theme="dark"] a {
  color: #3eb7f0;
}

body[data-theme="dark"] .social-icons a {
  color: #3eb7f0 !important;
}

body[data-theme="dark"] .navbar a {
  color: #f7f7f7;
}

body[data-theme="dark"] .navbar a.active,
body[data-theme="dark"] .navbar a:hover {
  color: #3eb7f0;
}

.theme-toggle {
  border: 1px solid #002d72;
  background: transparent;
  color: #002d72;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  background-color: #002d72;
  color: #ffffff;
}

body[data-theme="dark"] .theme-toggle {
  border-color: #3eb7f0;
  color: #3eb7f0;
}

body[data-theme="dark"] .theme-toggle:hover {
  background-color: #3eb7f0;
  color: #20212b;
}