:root {
  --theme-page: #f7faf8;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f0f6f2;
  --theme-surface-accent: #eaf6f0;
  --theme-text: #10271f;
  --theme-muted: #4f625a;
  --theme-border: #d5e1db;
  --theme-border-soft: #e6ede9;
  --theme-accent: #008f6b;
  --theme-accent-text: #006c50;
  --theme-accent-soft: #dff1e8;
  --theme-shadow: rgba(16, 43, 27, .08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --theme-page: #0c1512;
    --theme-surface: #121f1a;
    --theme-surface-soft: #172721;
    --theme-surface-accent: #193128;
    --theme-text: #edf7f2;
    --theme-muted: #adc1b7;
    --theme-border: #2a4036;
    --theme-border-soft: #22362d;
    --theme-accent: #32c997;
    --theme-accent-text: #66ddb4;
    --theme-accent-soft: #1d3c31;
    --theme-shadow: rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --theme-page: #0c1512;
  --theme-surface: #121f1a;
  --theme-surface-soft: #172721;
  --theme-surface-accent: #193128;
  --theme-text: #edf7f2;
  --theme-muted: #adc1b7;
  --theme-border: #2a4036;
  --theme-border-soft: #22362d;
  --theme-accent: #32c997;
  --theme-accent-text: #66ddb4;
  --theme-accent-soft: #1d3c31;
  --theme-shadow: rgba(0, 0, 0, .3);
  color-scheme: dark;
}

:root[data-theme='light'] {
  color-scheme: light;
}

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

:root {
  --ink: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-border);
  --green: var(--theme-accent);
  --green-dark: var(--theme-accent-text);
  --soft: var(--theme-surface-accent);
  --bg: var(--theme-page);
}

.top,
.brand,
.step,
.troubleshoot,
.intro-flow,
.jump-check,
.toc a,
.search-tips span {
  background: var(--theme-surface);
  border-color: var(--theme-border);
}

.home-intro,
.before,
.help,
.verify {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}

.notice,
.path,
.setting-chips span,
.expected,
.number,
.checklist label:has(input:checked) {
  background: var(--theme-surface-accent);
  border-color: var(--theme-border);
}

.step-header {
  background: linear-gradient(110deg, var(--theme-surface-soft), var(--theme-surface) 70%);
  border-color: var(--theme-border-soft);
}

.brand h3 > span,
.instructions li::before,
.progress-track {
  background: var(--theme-surface-soft);
  border-color: var(--theme-border);
}

.brand,
.step {
  box-shadow: 0 5px 18px var(--theme-shadow);
}

.wordmark,
.brand-en,
.brand h3,
.step-header h2,
.troubleshoot h2,
.verify h3,
.before h2,
.help h3,
.section-heading h2,
.detail-heading h1 {
  color: var(--theme-text);
}

.home-intro .lead,
.step-content,
.instructions li,
.expected > div,
.checklist label {
  color: var(--theme-text);
}

.lead,
.step-desc,
.brand p,
.brand h3 > span,
.help p,
.help > span,
.before p,
.tip,
.inline-help,
.verify p,
.troubleshoot p,
.sources,
.breadcrumbs,
footer {
  color: var(--theme-muted);
}

.path p,
.path-caption,
.setting-chips span,
.expected strong,
.step-kicker,
.entry,
.top-link,
.bottom-back,
.inline-help summary,
.troubleshoot summary {
  color: var(--theme-accent-text);
}

.notice {
  color: var(--theme-muted);
}

.instructions li + li,
.checklist label,
.expected > div,
.troubleshoot details,
footer {
  border-color: var(--theme-border-soft);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-left: auto;
  padding: 4px 11px;
  color: var(--theme-accent-text);
  background: var(--theme-surface-accent);
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 600;
}

.theme-toggle:hover {
  border-color: var(--theme-accent);
}

.theme-icons {
  display: grid;
  place-items: center;
}

.theme-icons .icon {
  display: none;
  width: 17px;
  height: 17px;
}

.theme-toggle[data-mode='auto'] .theme-system,
.theme-toggle[data-mode='dark'] .theme-moon,
.theme-toggle[data-mode='light'] .theme-sun {
  display: block;
}

@media (max-width: 520px) {
  .theme-toggle {
    min-height: 31px;
    padding: 3px 9px;
    font-size: .75rem;
  }

  .theme-icons .icon {
    width: 15px;
    height: 15px;
  }
}