:root {
  color-scheme: light;
  --bg: #f8f9fa;
  --text: #1f2937;
  --muted: #5f6b7d;
  --muted-strong: #4b5a72;
  --card: #ffffff;
  --card-soft: #f5f8ff;
  --border: #dbe3f5;
  --nav-bg: #1a1a2e;
  --nav-text: #f5f8ff;
  --nav-text-hover: #ffffff;
  --nav-text-active: #ffffff;
  --nav-focus-ring: #9ec1ff;
  --hero-support-text: #dbe7ff;
  --hero-tagline-text: #f2f6ff;
  --footer-bg: #1a1a2e;
  --link: #0b57d0;
  --link-hover: #1f6be0;
  --shadow: 0 6px 20px rgba(12, 25, 45, 0.08);
  --toggle-bg: rgba(255, 255, 255, 0.12);
  --toggle-border: rgba(255, 255, 255, 0.35);
  --toggle-text: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1424;
  --text: #e6ebf5;
  --muted: #b2bfd5;
  --muted-strong: #cad5e8;
  --card: #131d32;
  --card-soft: #17253f;
  --border: #2a3a5d;
  --nav-bg: #0a1221;
  --nav-text: #eaf1ff;
  --nav-text-hover: #ffffff;
  --nav-text-active: #ffffff;
  --nav-focus-ring: #b6d0ff;
  --hero-support-text: #cad5e8;
  --hero-tagline-text: #e6ebf5;
  --footer-bg: #0a1221;
  --link: #8db8ff;
  --link-hover: #b6d0ff;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --toggle-border: rgba(255, 255, 255, 0.22);
  --toggle-text: #f0f4ff;
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

.navbar {
  background-color: var(--nav-bg) !important;
}

.navbar .logo,
.navbar .nav-links a {
  color: var(--nav-text) !important;
}

footer {
  background: var(--footer-bg) !important;
}

p,
.case-subtitle,
.intro,
.date,
.status,
.detail p,
.summary-box,
.experience-item li,
.experience-item .role-summary,
.experience-item .tech-line,
.education-card .status,
.contact-list li,
.cert-text,
.modal-title-wrap p,
.capability-list li,
.currently-building-desc {
  color: var(--muted);
}

.section-title,
.case-header h2,
.detail h3,
.section-label,
.card h2,
.education-card h3,
.experience-item h3,
.competency-title,
.modal-title-wrap h3 {
  color: var(--text);
}

.summary-box,
.competency-card,
.experience-item,
.education-card,
.competency-modal,
.case-card,
.detail,
.card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.case-header {
  background: var(--card-soft) !important;
  border-bottom: 1px solid var(--border) !important;
}

.case-header h2 {
  color: var(--text) !important;
}

.detail,
.outcome-pill,
.chip,
.tag,
.cert-logo-wrap,
.school-logo-wrap {
  background: var(--card-soft);
  border-color: var(--border);
}

.modal-close {
  background: var(--card-soft);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .contact-list a,
html[data-theme="dark"] .related-links a {
  color: var(--link);
}

html[data-theme="dark"] .contact-list a:hover,
html[data-theme="dark"] .contact-list a:focus-visible,
html[data-theme="dark"] .related-links a:hover,
html[data-theme="dark"] .related-links a:focus-visible {
  color: var(--link-hover);
}

.theme-toggle {
  margin-left: 12px;
  border: 1px solid var(--toggle-border);
  background: var(--toggle-bg);
  color: var(--toggle-text);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.theme-toggle:focus-visible {
  outline: 3px solid #8db8ff;
  outline-offset: 2px;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

html[data-theme="dark"] .navbar .logo,
html[data-theme="dark"] .navbar .nav-links a {
  color: var(--nav-text) !important;
}

html[data-theme="dark"] .navbar .nav-links a:hover,
html[data-theme="dark"] .navbar .nav-links a:focus-visible {
  color: var(--nav-text-hover) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

html[data-theme="dark"] .navbar .nav-links a[aria-current="page"],
html[data-theme="dark"] .navbar .nav-links a.current-page {
  color: var(--nav-text-active) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

html[data-theme="dark"] .navbar .nav-links a:focus-visible {
  outline: 2px solid var(--nav-focus-ring);
  outline-offset: 2px;
}

html[data-theme="dark"] .hero p,
html[data-theme="dark"] .hero .subtitle,
html[data-theme="dark"] .hero .currently-building-label,
html[data-theme="dark"] .hero .currently-building-desc {
  color: var(--hero-support-text);
  opacity: 1;
}

html[data-theme="dark"] .hero .tagline,
html[data-theme="dark"] .hero #typewriter {
  color: var(--hero-tagline-text);
  opacity: 1;
}

html[data-theme="dark"] .mini-label {
  color: #9fbfff;
}

html[data-theme="dark"] .outcome-pill {
  background: #1a2a47;
  border-color: #34517f;
  color: #d7e3fb;
}

html[data-theme="dark"] .chip,
html[data-theme="dark"] .tag {
  background: #172945;
  border: 1px solid #2f4f7f;
  color: #aecdff;
}

html:not([data-theme="dark"]) .hero p,
html:not([data-theme="dark"]) .hero .subtitle,
html:not([data-theme="dark"]) .hero .currently-building-label,
html:not([data-theme="dark"]) .hero .currently-building-desc {
  color: var(--hero-support-text);
  opacity: 1;
}

html:not([data-theme="dark"]) .hero .tagline,
html:not([data-theme="dark"]) .hero #typewriter {
  color: var(--hero-tagline-text);
  opacity: 1;
}

@media (max-width: 768px) {
  .theme-toggle {
    margin-left: 0;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }

  .theme-toggle:hover {
    transform: none;
  }
}