:root {
  --theme-focus: var(--ds-color-focus);
  --theme-toggle-bg: var(--ds-theme-toggle-bg);
  --theme-toggle-border: var(--ds-color-border-strong);
  --theme-toggle-text: var(--ds-color-text-primary);
}

.theme-toggle {
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--theme-toggle-border);
  border-radius: var(--ds-radius-pill);
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-text);
  font: var(--ds-weight-semibold) var(--ds-font-size-xs)/1 var(--ds-font-sans);
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: var(--ds-shadow-sm);
  backdrop-filter: blur(12px);
  transition:
    border-color var(--ds-duration-normal) var(--ds-ease-standard),
    background-color var(--ds-duration-normal) var(--ds-ease-standard),
    transform var(--ds-duration-normal) var(--ds-ease-standard);
}

.theme-toggle [data-theme-icon] {
  width: 18px;
  font-size: 17px;
  line-height: 1;
  text-align: center;
}

.theme-toggle:hover {
  border-color: var(--theme-focus);
  transform: translateY(-1px);
}

.theme-toggle:active {
  transform: translateY(0);
}

.theme-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-focus) 42%, transparent);
  outline-offset: 3px;
}

.theme-toggle-overlay {
  position: absolute;
  z-index: calc(var(--ds-z-sticky) + 1);
  top: 18px;
  right: max(16px, 4vw);
}

.theme-toggle-overlay [data-theme-label] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html[data-theme="light"] .site-header .brand {
  padding: var(--ds-space-2);
  border: var(--ds-border-thin) solid var(--ds-theme-brand-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-theme-brand-background);
}

html[data-theme="light"] body {
  color: var(--foreground);
}

/* Canonical homepage */
html[data-theme="light"] main {
  background: var(--ds-theme-page-background);
}

html[data-theme="light"] .hero {
  background: var(--ds-theme-hero-background);
}

html[data-theme="light"] .ambient-grid {
  opacity: var(--ds-theme-aurora-opacity);
  background-image: var(--ds-theme-grid-image);
}

html[data-theme="light"] .global-mouse-aurora,
html[data-theme="light"] .mouse-aurora {
  opacity: var(--ds-theme-aurora-opacity);
}

html[data-theme="light"] .nav,
html[data-theme="light"] .header-actions > a:not(.request-button) {
  color: var(--ds-theme-nav-text);
}

html[data-theme="light"] .primary-button,
html[data-theme="light"] .request-button,
html[data-theme="light"] .corporate-button {
  background: var(--ds-theme-primary-action-surface);
  color: var(--ds-theme-primary-action-foreground);
}

html[data-theme="light"] .secondary-button {
  border-color: var(--ds-theme-control-border);
  background: var(--ds-theme-secondary-action-surface);
  color: var(--ds-theme-secondary-action-foreground);
}

html[data-theme="light"] .metric-icon {
  border-color: var(--ds-theme-dashboard-border);
  background: var(--ds-theme-icon-surface);
  color: var(--ds-theme-icon-foreground);
}

html[data-theme="light"] .hero-copy > p,
html[data-theme="light"] .section-intro,
html[data-theme="light"] .direction-card p,
html[data-theme="light"] .program-card > p,
html[data-theme="light"] .learning-copy > p,
html[data-theme="light"] .learning-steps p,
html[data-theme="light"] .corporate-lead,
html[data-theme="light"] .corporate-features p,
html[data-theme="light"] .expert-grid small,
html[data-theme="light"] .footer-top > p,
html[data-theme="light"] .footer-top > div {
  color: var(--ds-theme-body-muted);
}

html[data-theme="light"] .dashboard-shell,
html[data-theme="light"] .direction-card,
html[data-theme="light"] .program-card,
html[data-theme="light"] .learning-console,
html[data-theme="light"] .corporate-features article,
html[data-theme="light"] .expert-grid article,
html[data-theme="light"] .story-grid blockquote {
  border-color: var(--ds-theme-card-border);
  background: var(--ds-theme-card-background);
  box-shadow: var(--ds-theme-card-shadow);
}

html[data-theme="light"] .course-card,
html[data-theme="light"] .console-content,
html[data-theme="light"] .lesson-row,
html[data-theme="light"] .mentor-row p {
  border-color: var(--ds-theme-inset-border);
  background: var(--ds-theme-inset-background);
}

/* Program dashboard: light surfaces use dark ink; media remains intentionally dark. */
html[data-theme="light"] .dashboard-shell {
  border-color: var(--ds-theme-dashboard-border-strong);
  background: var(--ds-theme-dashboard-surface);
  color: var(--ds-theme-dashboard-foreground);
  box-shadow: var(--ds-theme-dashboard-shadow);
}

html[data-theme="light"] .course-head h2,
html[data-theme="light"] .program-head h3,
html[data-theme="light"] .course-stats strong,
html[data-theme="light"] .info-card h3,
html[data-theme="light"] .result-card > strong,
html[data-theme="light"] .result-title {
  color: var(--ds-theme-dashboard-foreground);
}

html[data-theme="light"] .course-head p,
html[data-theme="light"] .course-meta,
html[data-theme="light"] .step strong,
html[data-theme="light"] .step small,
html[data-theme="light"] .module-grid article,
html[data-theme="light"] .course-stats span,
html[data-theme="light"] .info-card p,
html[data-theme="light"] .info-card small,
html[data-theme="light"] .result-card > p {
  color: var(--ds-theme-dashboard-muted);
}

html[data-theme="light"] .flagship,
html[data-theme="light"] .program-head a,
html[data-theme="light"] .learning-path,
html[data-theme="light"] .module-grid article,
html[data-theme="light"] .course-stats,
html[data-theme="light"] .info-card,
html[data-theme="light"] .result-card,
html[data-theme="light"] .result-title small {
  border-color: var(--ds-theme-dashboard-border);
  background: var(--ds-theme-dashboard-inset-surface);
  color: var(--ds-theme-dashboard-inset-foreground);
}

html[data-theme="light"] .flagship,
html[data-theme="light"] .program-head a {
  border-color: var(--ds-theme-dashboard-border-strong);
}

html[data-theme="light"] .flagship {
  color: var(--ds-color-accent-blue-strong);
}

html[data-theme="light"] .step::after {
  background: var(--ds-theme-dashboard-border);
}

html[data-theme="light"] .step > span,
html[data-theme="light"] .course-stats i {
  border-color: var(--ds-theme-dashboard-border);
  background: var(--ds-theme-dashboard-active-surface);
  color: var(--ds-theme-dashboard-active-foreground);
}

html[data-theme="light"] .step-active > span {
  border-color: var(--ds-theme-dashboard-accent-surface);
  background: var(--ds-theme-dashboard-accent-surface);
  color: var(--ds-theme-dashboard-accent-foreground);
}

html[data-theme="light"] .step-active strong {
  color: var(--ds-theme-dashboard-active-foreground);
}

html[data-theme="light"] .module-grid .module-active {
  border-color: var(--ds-theme-dashboard-border-strong);
  background: var(--ds-theme-dashboard-active-surface);
  color: var(--ds-theme-dashboard-active-foreground);
  box-shadow: none;
}

html[data-theme="light"] .module-grid i,
html[data-theme="light"] .module-active i {
  color: var(--ds-color-accent-blue-strong);
}

html[data-theme="light"] .engineering-stage {
  border: var(--ds-border-thin) solid var(--ds-theme-dashboard-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-theme-media-surface);
  color: var(--ds-theme-media-foreground);
}

html[data-theme="light"] .expert-stage {
  background: var(--ds-theme-expert-background);
}

html[data-theme="light"] .story-controls button {
  border-color: var(--ds-theme-control-border);
  background: var(--ds-theme-control-background);
}

html[data-theme="light"] .site-footer,
html[data-theme="light"] .footer-bottom {
  border-color: var(--ds-theme-footer-border);
}

html[data-theme="light"] .footer-bottom {
  color: var(--ds-theme-footer-text);
}

html[data-theme="light"].perf-lite .direction-card,
html[data-theme="light"].perf-lite .direction-card.is-sequence-lit,
html[data-theme="light"].perf-lite .corporate-features article,
html[data-theme="light"].perf-lite .corporate-features article.is-sequence-lit {
  border-color: var(--ds-theme-card-border);
  background: var(--ds-theme-perf-card-background);
}

/* Contacts and education pages */
html[data-theme="light"] body:not(:has(.app)) {
  background: var(--ds-theme-info-page-background);
}

html[data-theme="light"] body:not(:has(.app))::before {
  background-image: var(--ds-theme-info-grid-image);
}

html[data-theme="light"] .card {
  border-color: var(--line);
  background: var(--ds-theme-info-card-background);
  box-shadow: var(--ds-theme-info-card-shadow);
}

html[data-theme="light"] .notice {
  color: var(--ds-theme-notice-text);
  background: var(--ds-theme-notice-background);
}

html[data-theme="light"] .link-list a,
html[data-theme="light"] .link-list .unavailable {
  background: var(--ds-theme-list-background);
}

html[data-theme="light"] .link-list .unavailable,
html[data-theme="light"] .status {
  color: var(--ds-theme-status-text);
}

/* Standalone development plan */
html[data-theme="light"] body:has(.app) {
  background: var(--ds-theme-plan-page-background);
}

html[data-theme="light"] aside {
  border-color: var(--line);
  background: var(--ds-theme-plan-sidebar-background);
}

html[data-theme="light"] .topbar {
  border-color: var(--line);
  background: var(--ds-theme-plan-topbar-background);
}

html[data-theme="light"] .search,
html[data-theme="light"] .btn,
html[data-theme="light"] select {
  border-color: var(--line);
  background: var(--ds-theme-plan-control-background);
  color: var(--ds-theme-plan-control-text);
}

html[data-theme="light"] nav button {
  color: var(--ds-theme-plan-nav-text);
}

html[data-theme="light"] nav button:hover,
html[data-theme="light"] nav button.active {
  background: var(--ds-theme-plan-nav-active-background);
  color: var(--ds-theme-plan-nav-active-text);
}

html[data-theme="light"] .lead,
html[data-theme="light"] .task p,
html[data-theme="light"] .section-head p,
html[data-theme="light"] details ul,
html[data-theme="light"] .checklist label {
  color: var(--ds-theme-plan-body-muted);
}

html[data-theme="light"] .table-wrap,
html[data-theme="light"] table {
  border-color: var(--line);
  background: var(--ds-theme-plan-table-background);
}

html[data-theme="light"] th {
  color: var(--ds-theme-plan-heading-text);
}

html[data-theme="light"] .progress {
  background: var(--ds-theme-plan-progress-background);
}

@media (max-width: 679px) {
  .theme-toggle {
    min-height: 40px;
    padding-inline: 10px;
  }

  .theme-toggle [data-theme-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-header .theme-toggle {
    order: -1;
  }

  .site-header .request-button {
    display: none;
  }
}

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