/* Loaded after styles.css. Light mode preserves the site's existing palette. */
:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --gws-canvas: #0e1623;
  --gws-surface: #151f2e;
  --gws-surface-soft: #1c293b;
  --gws-ink: #edf2f9;
  --gws-copy: #c0ccdc;
  --gws-muted: #9bacc2;
  --gws-line: #2b3a50;
  --gws-line-strong: #42546d;
  --gws-blue: #2563eb;
  --gws-blue-dark: #93c5fd;
  --gws-teal: #7dd3fc;
  --gws-navy: #172b4d;
  --gws-shadow: 0 16px 40px rgb(0 0 0 / 20%);
  --danger: #fca5a5;
  --good: #6ee7b7;
}

/* Account preference uses the same open layout as billing and Contribute. */
.account-appearance {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px clamp(36px, 6vw, 64px);
  margin-top: clamp(48px, 6vw, 64px);
  padding-top: clamp(40px, 5vw, 52px);
  border-top: 1px solid var(--gws-line);
}

.account-appearance-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.account-appearance-details p {
  max-width: 540px;
  margin: 0;
  color: var(--gws-copy);
  font-size: 15px;
  line-height: 1.65;
}

.theme-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  color: var(--gws-ink);
  cursor: pointer;
}

.theme-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

.theme-toggle-track {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: 64px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--gws-line-strong);
  border-radius: 30px;
  background: #64748b;
}

.theme-toggle-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #475569;
}

.theme-toggle-moon {
  display: none;
}

.theme-toggle input:checked + .theme-toggle-track {
  border-color: var(--gws-blue);
  background: var(--gws-blue);
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb {
  transform: translateX(28px);
  color: #1d4ed8;
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-sun {
  display: none;
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-moon {
  display: block;
}

.theme-toggle input:focus-visible + .theme-toggle-track {
  outline: 2px solid var(--gws-blue-dark);
  outline-offset: 4px;
}

@media (max-width: 800px) {
  .account-appearance { grid-template-columns: 1fr; }
  .account-appearance-details { flex-wrap: wrap; }
}

/* Shared chrome and hardcoded surfaces that predate the design tokens. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] body::before,
:root[data-theme="dark"] .home-editorial {
  background: var(--gws-canvas);
  color: var(--gws-ink);
}

:root[data-theme="dark"] body :is(
  .nav, .nav-brand-row, .nav-mobile, .nav-dropdown-menu, .auth-layout,
  .auth-google-btn, .account-google-link-btn, .database-submission-toggle-btn.is-active,
  .filter-menu, .guide-search-control input, .database-submission input,
  .database-submission textarea, .database-custom-select .filter-trigger,
  .page-auth input, .page-auth .row .btn:not(.btn-primary),
  .qb-btn-secondary, .question-jump input
) {
  background: var(--gws-surface);
  border-color: var(--gws-line);
  color: var(--gws-ink);
}

:root[data-theme="dark"] body :is(
  .nav-links, .nav-cta .btn, .nav-mobile-links a, .nav-mobile-links .nav-dropdown-trigger,
  .nav-toggle, .guide-toc > nav a, .guide-toc > nav a.is-active,
  .question-sidebar .filter-field > label, .question-sidebar .filter-trigger,
  .qText, .question-position, .question-nav-btn
) {
  color: var(--gws-ink);
}

:root[data-theme="dark"] body :is(
  .nav-menu-row, .home-start-panel, .guide-toc, .guide-callout,
  .guide-final-takeaway, .pricing-card-featured, .database-submission-toggle
) {
  background: var(--gws-surface-soft);
  border-color: var(--gws-line);
}

:root[data-theme="dark"] body .library-hero::before {
  background-color: var(--gws-surface-soft);
}

:root[data-theme="dark"] body .nav::before {
  background: var(--gws-line);
}

/* Only the monochrome wordmark changes; photographs and other images keep their colors. */
:root[data-theme="dark"] .brand-logo {
  filter: invert(1);
}

:root[data-theme="dark"] body :is(
  .home-intro, .home-intro-features, .home-intro-feature, .home-story-secondary,
  .home-start-panel li, .home-latest, .home-topic-index, .home-topic-list,
  .home-topic-list > a, .home-question-bank, .home-question-bank-stats,
  .home-question-bank-stat, .library-hero, .qBox, .answer-divider,
  .question-sidebar .filter-trigger
) {
  border-color: var(--gws-line);
}

:root[data-theme="dark"] body :is(.database-bar-track, .progress-breakdown-track) {
  background: var(--gws-line);
}

/* Keep filled actions blue with white labels; link accents use a lighter blue. */
:root[data-theme="dark"] body :is(
  .btn-primary, .nav-access-link, .pricing-cta, .guide-question-button,
  .report-submit, .qb-btn-primary, .account-actions .btn:not(.account-google-link-btn)
) {
  background: var(--gws-blue);
  border-color: var(--gws-blue);
  color: #fff;
}

:root[data-theme="dark"] body :is(
  .btn-primary, .nav-access-link, .pricing-cta, .guide-question-button,
  .report-submit, .qb-btn-primary, .account-actions .btn:not(.account-google-link-btn)
):hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

:root[data-theme="dark"] body :is(
  .nav-links a, .nav-dropdown-trigger, .nav-dropdown-menu a,
  .nav-mobile-links a, .account-google-link-btn, .auth-google-btn,
  .question-nav-btn, .question-tool, .question-sidebar .filter-trigger,
  .qb-btn-secondary
):hover,
:root[data-theme="dark"] body .question-sidebar .filter-trigger[aria-expanded="true"],
:root[data-theme="dark"] body .question-tool:focus-visible {
  background: var(--gws-surface-soft);
  color: var(--gws-ink);
  border-color: var(--gws-line-strong);
}

:root[data-theme="dark"] body :is(
  .aText, .question-sidebar-stat, .question-tool, .question-inline-paywall p
) {
  color: var(--gws-copy);
}

:root[data-theme="dark"] body :is(
  .question-sidebar-stat svg, .question-sidebar-stat strong,
  .question-sidebar-coming-soon, .question-number-label, .home-intro-feature b
) {
  color: var(--gws-muted);
}

:root[data-theme="dark"] .page-members .question-card-head .counter {
  color: var(--gws-ink);
}

:root[data-theme="dark"] body .question-tool[data-tooltip]::after {
  background: var(--gws-surface);
  border-color: var(--gws-line-strong);
  color: var(--gws-ink);
}

:root[data-theme="dark"] body .question-reviewed-toggle input:checked + .question-reviewed-switch {
  background: var(--gws-blue);
}

:root[data-theme="dark"] body :is(.question-tool.is-reviewed, .account-pill-active) {
  color: var(--good);
}

:root[data-theme="dark"] body .guide-warning-callout {
  background: #32252c;
  border-left-color: #fca5a5;
}

:root[data-theme="dark"] body .guide-paywall-blur::after {
  background: linear-gradient(180deg, rgb(14 22 35 / 8%), rgb(14 22 35 / 88%) 72%);
}

:root[data-theme="dark"] body .guide-share-icon {
  color: var(--gws-copy);
}

:root[data-theme="dark"] body :is(.guide-inline-link, .account-contribution-link, .qb-section-link) {
  color: var(--gws-blue-dark);
  text-decoration-color: var(--gws-blue-dark);
}

:root[data-theme="dark"] body .question-jump input:not(:disabled):hover {
  border-color: var(--gws-muted);
}

:root[data-theme="dark"] body .question-jump input:focus {
  border-color: var(--gws-ink);
  background: var(--gws-surface);
  box-shadow: none;
  outline: none;
}