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

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f9fc;
  --bg-deep: #eef2f7;
  --panel: #ffffff;
  --panel-soft: #f4f7fb;
  --line: rgba(49, 65, 88, 0.16);
  --line-strong: rgba(84, 91, 224, 0.48);
  --text: #172033;
  --muted: #526176;
  --muted-soft: #748197;
  --blue: #5065ef;
  --purple: #7357df;
  --pink: #bf4eae;
}

/* Keep the accepted wordmark size fixed when multiple theme variants are present. */
.brand {
  flex: 0 0 118px;
}

.brand-wordmark,
.footer-wordmark-image {
  width: 100%;
  display: block;
}

.footer-wordmark {
  width: 118px;
  flex: 0 0 118px;
}

.brand-wordmark-dark,
.footer-wordmark-dark,
.theme-icon-moon {
  display: none;
}

html[data-theme="light"] .brand-wordmark-light,
html[data-theme="light"] .footer-wordmark-light,
html[data-theme="light"] .theme-icon-sun {
  display: none;
}

html[data-theme="light"] .brand-wordmark-dark,
html[data-theme="light"] .footer-wordmark-dark,
html[data-theme="light"] .theme-icon-moon {
  display: block;
}

html[data-theme="light"] body {
  background: var(--bg-deep);
}

html[data-theme="light"] .site-shell {
  background:
    radial-gradient(circle at 48% 14%, rgba(80, 101, 239, .09), transparent 31%),
    linear-gradient(180deg, #fbfcfe 0%, #eef2f7 82%);
}

html[data-theme="light"] .nav-links,
html[data-theme="light"] .search-button,
html[data-theme="light"] .version-pill,
html[data-theme="light"] .icon-button {
  color: #445168;
}

html[data-theme="light"] .search-button,
html[data-theme="light"] .version-pill,
html[data-theme="light"] .icon-button {
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 1px 2px rgba(31, 45, 68, .04);
}

html[data-theme="light"] .search-button span,
html[data-theme="light"] .search-button kbd {
  color: #69778d;
}

html[data-theme="light"] .hero h1 {
  background: linear-gradient(90deg, #172033 0%, #25334e 42%, #6a55c8 72%, #5548d8 100%);
  -webkit-background-clip: text;
  color: transparent;
}

html[data-theme="light"] .hero h2 {
  color: #36455d;
}

html[data-theme="light"] .hero-description,
html[data-theme="light"] .feature-item p,
html[data-theme="light"] .creator-copy p,
html[data-theme="light"] .start-card p,
html[data-theme="light"] .docs-card p,
html[data-theme="light"] .ecosystem-card p {
  color: #5d6b80;
}

html[data-theme="light"] .hero-meta,
html[data-theme="light"] .section-heading-row p,
html[data-theme="light"] .section-heading-simple p,
html[data-theme="light"] .editor-caption,
html[data-theme="light"] .footer-meta,
html[data-theme="light"] .footer-brandline nav {
  color: #6f7c90;
}

html[data-theme="light"] .button-secondary {
  background: rgba(255, 255, 255, .72);
  color: #29364c;
}

html[data-theme="light"] .feature-strip {
  background: rgba(255, 255, 255, .34);
}

html[data-theme="light"] .project-creator {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,252,.86));
  box-shadow: 0 12px 34px rgba(51, 65, 85, .05);
}

html[data-theme="light"] .start-card,
html[data-theme="light"] .docs-card,
html[data-theme="light"] .ecosystem-card {
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 28px rgba(45, 58, 79, .045);
}

html[data-theme="light"] .start-card.featured {
  border-color: rgba(91, 76, 224, .52);
  background:
    radial-gradient(circle at 70% 0%, rgba(103, 83, 224, .12), transparent 42%),
    rgba(247, 246, 255, .92);
  box-shadow: inset 0 0 32px rgba(75, 62, 210, .05), 0 8px 28px rgba(45, 58, 79, .045);
}

html[data-theme="light"] .command-line {
  background: rgba(255, 255, 255, .7);
}

html[data-theme="light"] .command-line code {
  color: #243148;
}

html[data-theme="light"] .copy-command,
html[data-theme="light"] .ecosystem-mark {
  color: #536177;
}

html[data-theme="light"] .ecosystem-mark.github {
  color: #222b3b;
}

html[data-theme="light"] .docs-search__backdrop {
  background: rgba(39, 48, 64, .38);
}

html[data-theme="light"] .docs-search__panel {
  border-color: rgba(99, 86, 219, .28);
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 28px 90px rgba(36, 45, 64, .22), 0 0 60px rgba(83, 65, 210, .08);
}

html[data-theme="light"] .docs-search__input-row input::placeholder {
  color: #8793a5;
}

html[data-theme="light"] .docs-search__input-row kbd,
html[data-theme="light"] .docs-search__footer kbd,
html[data-theme="light"] .docs-search__result-icon {
  background: rgba(57, 68, 88, .035);
}

html[data-theme="light"] .docs-search__result.is-active {
  border-color: rgba(91, 82, 224, .38);
  background: linear-gradient(90deg, rgba(91, 82, 224, .10), rgba(91, 82, 224, .035));
}

html[data-theme="light"] .docs-search__result small,
html[data-theme="light"] .docs-search__empty,
html[data-theme="light"] .docs-search__footer {
  color: #6d7a8e;
}

html[data-theme="light"] .site-footer {
  background: rgba(255, 255, 255, .28);
}

/* Keep the editor preview dark in both site themes, like a code editor surface. */
html[data-theme="light"] .editor-window {
  color: #f5f7fb;
}

html[data-theme="light"] .editor-titlebar,
html[data-theme="light"] .editor-body,
html[data-theme="light"] .code-pane,
html[data-theme="light"] .file-tree {
  color-scheme: dark;
}