/* Load after style.css. Artwork and screenshots keep their original colors. */
:root {
  color-scheme: light;
  --theme-page: #ffffff;
  --theme-outer: #faf9f6;
  --theme-surface: #f7f5fb;
  --theme-raised: #ffffff;
  --theme-ink: #202126;
  --theme-muted: #68616f;
  --theme-soft: #82788b;
  --theme-border: #e8e3ef;
  --theme-accent: #7044e9;
  --theme-accent-pale: #f1ebff;
  --theme-focus: #9477ec;
  --theme-shadow: #3526421c;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --theme-page: #1b1922;
  --theme-outer: #15141a;
  --theme-surface: #23202c;
  --theme-raised: #2b2735;
  --theme-ink: #f3eff9;
  --theme-muted: #c2b9cf;
  --theme-soft: #afa3bf;
  --theme-border: #403749;
  --theme-accent: #bd9eff;
  --theme-accent-pale: #352844;
  --theme-focus: #c8b0ff;
  --theme-shadow: #06040c66;
  --purple: #bd9eff;
  --muted: #c2b9cf;
  background: var(--theme-outer);
  color: var(--theme-ink);
}

.theme-control { position: relative; flex-shrink: 0; }
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-page);
  color: var(--theme-muted);
  cursor: pointer;
}
#theme-toggle:hover,
#theme-toggle[aria-expanded='true'] {
  color: var(--theme-accent);
  background: var(--theme-accent-pale);
  border-color: var(--theme-border);
}
#theme-toggle svg { width: 20px; height: 20px; }
[data-theme-icon][hidden], #theme-menu[hidden] { display: none !important; }
#theme-label,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#theme-menu {
  position: absolute;
  z-index: 100;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: 218px;
  max-width: calc(100vw - 32px);
  padding: 7px;
  border: 1px solid var(--theme-border);
  border-radius: 13px;
  background: var(--theme-raised);
  color: var(--theme-ink);
  box-shadow: 0 12px 35px var(--theme-shadow);
}
#theme-menu [data-theme-choice] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 11px;
  border-radius: 7px;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}
#theme-menu [data-theme-choice] svg { width: 17px; height: 17px; }
#theme-menu [data-theme-choice]:hover,
#theme-menu [data-theme-choice][aria-checked='true'] {
  color: var(--theme-accent);
  background: var(--theme-accent-pale);
}
#theme-menu [data-theme-choice][aria-checked='true']::after {
  content: '✓';
  margin-left: auto;
  font-size: 14px;
}
#theme-menu [data-theme-choice]:focus-visible {
  outline: 2px solid var(--theme-focus);
  outline-offset: -2px;
}

/* Main surfaces and navigation. No filter is applied to any image or device. */
:root[data-theme='dark'] .page {
  background: var(--theme-page);
  border-color: #342e3c;
}
:root[data-theme='dark'] .brand-lockup b { color: var(--theme-ink); }
:root[data-theme='dark'] .brand-lockup small { color: var(--theme-soft); }
:root[data-theme='dark'] .header,
:root[data-theme='dark'] .header-actions { color: var(--theme-ink); }
:root[data-theme='dark'] .account {
  background: transparent;
  color: var(--theme-ink);
  border-color: var(--theme-border);
}
:root[data-theme='dark'] .account:hover { background: var(--theme-surface); color: var(--theme-accent); }
:root[data-theme='dark'] .menu-toggle {
  color: var(--theme-ink);
  background: var(--theme-surface);
  border-color: var(--theme-border);
}
:root[data-theme='dark'] .menu-toggle>span { background: var(--theme-ink); }
:root[data-theme='dark'] .mobile-nav {
  background: var(--theme-surface);
  color: var(--theme-ink);
  border-color: var(--theme-border);
  box-shadow: 0 16px 35px var(--theme-shadow);
}
:root[data-theme='dark'] .mobile-nav a,
:root[data-theme='dark'] .mobile-nav button { border-color: var(--theme-border); }
:root[data-theme='dark'] .mobile-nav a:hover,
:root[data-theme='dark'] .mobile-nav button:hover { color: var(--theme-accent); background: var(--theme-accent-pale); }
:root[data-theme='dark'] .skip { background: var(--theme-raised); color: var(--theme-ink); }
:root[data-theme='dark'] a:focus-visible,
:root[data-theme='dark'] button:focus-visible,
:root[data-theme='dark'] summary:focus-visible { outline-color: var(--theme-focus); }
:root[data-theme='dark'] ::selection { background: #5b3f83; color: #ffffff; }

/* Hero copy and the decorative scene behind the unchanged device artwork. */
:root[data-theme='dark'] .eyebrow { color: #d1bedf; }
:root[data-theme='dark'] .eyebrow svg { color: var(--theme-accent); }
:root[data-theme='dark'] .lead { color: var(--theme-muted); }
:root[data-theme='dark'] .price-line { color: var(--theme-muted); }
:root[data-theme='dark'] .price-line strong { color: var(--theme-ink); }
:root[data-theme='dark'] .price-line>span { color: #897994; }
:root[data-theme='dark'] .availability,
:root[data-theme='dark'] figcaption,
:root[data-theme='dark'] .preview-note { color: var(--theme-soft); }
:root[data-theme='dark'] .view-app { color: var(--theme-ink); }
:root[data-theme='dark'] .view-app span,
:root[data-theme='dark'] .view-app:hover,
:root[data-theme='dark'] .mobile-view-app,
:root[data-theme='dark'] .copy-link { color: var(--theme-accent); }
:root[data-theme='dark'] .download,
:root[data-theme='dark'] .header-download {
  background: #7546df;
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 7px 20px #0d061f30;
}
:root[data-theme='dark'] .download:hover,
:root[data-theme='dark'] .header .header-download:hover {
  background: #8051e8;
  color: #ffffff;
}
:root[data-theme='dark'] .art-background {
  background: radial-gradient(ellipse at 58% 44%, #514069 0%, #362b49 44%, #25212e 78%);
}
:root[data-theme='dark'] .orbit,
:root[data-theme='dark'] .orbit::before,
:root[data-theme='dark'] .orbit::after,
:root[data-theme='dark'] .art-background::before,
:root[data-theme='dark'] .art-background::after { border-color: #50425e; }
:root[data-theme='dark'] .transfer-label { color: #d9c4ee; }
:root[data-theme='dark'] .transfer-label svg { color: #b694e8; }
:root[data-theme='dark'] .transfer-label small { color: #b8a3ca; }

/* Applications, installation, pricing and help. */
:root[data-theme='dark'] .essentials,
:root[data-theme='dark'] .guide,
:root[data-theme='dark'] .app-examples>div,
:root[data-theme='dark'] .requirements,
:root[data-theme='dark'] .payment-more,
:root[data-theme='dark'] .help-section,
:root[data-theme='dark'] .support-link,
:root[data-theme='dark'] .faq-list details,
:root[data-theme='dark'] .faq-list details:first-child,
:root[data-theme='dark'] .reading,
:root[data-theme='dark'] .reading-links a,
:root[data-theme='dark'] .footer,
:root[data-theme='dark'] .footer-bottom { border-color: var(--theme-border); }
:root[data-theme='dark'] .essentials p,
:root[data-theme='dark'] .guide { color: var(--theme-soft); }
:root[data-theme='dark'] .essentials strong { color: #ded3e9; }
:root[data-theme='dark'] .privacy svg,
:root[data-theme='dark'] .guide>span:last-child,
:root[data-theme='dark'] .step-number,
:root[data-theme='dark'] .payment-facts li>span,
:root[data-theme='dark'] summary>span { color: var(--theme-accent); }
:root[data-theme='dark'] .section-kicker { color: #bba0d6; }
:root[data-theme='dark'] .section-intro>p:last-child,
:root[data-theme='dark'] .section-lead,
:root[data-theme='dark'] .help-intro>p:not(.section-kicker),
:root[data-theme='dark'] .program-details p,
:root[data-theme='dark'] .install-steps p,
:root[data-theme='dark'] .payment-facts p,
:root[data-theme='dark'] .payment-more p,
:root[data-theme='dark'] .faq-list details>p { color: var(--theme-muted); }
:root[data-theme='dark'] .section-note,
:root[data-theme='dark'] .app-examples small,
:root[data-theme='dark'] .requirements,
:root[data-theme='dark'] .support-link>span { color: var(--theme-soft); }
:root[data-theme='dark'] .inline-link,
:root[data-theme='dark'] .support-link strong,
:root[data-theme='dark'] .copy-status { color: var(--theme-accent); }
:root[data-theme='dark'] .how-section {
  background: var(--theme-surface);
  border-color: var(--theme-border);
}
:root[data-theme='dark'] .interface-feature>button {
  background: var(--theme-raised);
  border-color: #4d415a;
  box-shadow: 0 12px 35px #08040d22;
}
:root[data-theme='dark'] .interface-feature>button>img { border-color: #655770; }
:root[data-theme='dark'] .interface-feature>button>span { color: #d0bfdf; }
:root[data-theme='dark'] .requirements strong { color: var(--theme-ink); }
:root[data-theme='dark'] .requirements span:before { background: #b098cc; }
:root[data-theme='dark'] .payment-more summary { color: #d7c4e8; }
:root[data-theme='dark'] .price-panel { background: #6743ba; color: #ffffff; }
:root[data-theme='dark'] .price-panel-label,
:root[data-theme='dark'] .no-subscription,
:root[data-theme='dark'] .price-panel>small { color: #f1e8ff; }
:root[data-theme='dark'] .price-panel .large-price { color: #ffffff; }
:root[data-theme='dark'] .purchase { color: #563299; background: #faf6ff; }
:root[data-theme='dark'] .purchase:hover { background: #eee1ff; }
:root[data-theme='dark'] .reading-links a { color: #d2c3df; }
:root[data-theme='dark'] .reading-links a:hover,
:root[data-theme='dark'] .reading-links a>span:last-child { color: var(--theme-accent); }
:root[data-theme='dark'] .closing p { color: var(--theme-muted); }

/* New article cards use these same surfaces without changing their image colors. */
:root[data-theme='dark'] .article-grid { color: var(--theme-ink); }
:root[data-theme='dark'] .article-card {
  background: var(--theme-surface);
  color: var(--theme-ink);
  border-color: var(--theme-border);
  box-shadow: 0 8px 24px #08060d14;
}
:root[data-theme='dark'] .article-card:hover { border-color: #6b577e; }
:root[data-theme='dark'] .article-image { background: #302a3b; border-color: var(--theme-border); }
:root[data-theme='dark'] .article-copy { color: var(--theme-ink); }
:root[data-theme='dark'] .article-meta { color: var(--theme-soft); }
:root[data-theme='dark'] .article-tag { color: #d2b6f7; background: #3b2b4e; border-color: #59416f; }
:root[data-theme='dark'] .article-title { color: var(--theme-ink); }
:root[data-theme='dark'] .article-description { color: var(--theme-muted); }
:root[data-theme='dark'] .article-more { color: var(--theme-accent); }

/* Footer and native dialogs. */
:root[data-theme='dark'] .footer-top p,
:root[data-theme='dark'] .footer-top>div,
:root[data-theme='dark'] .footer-bottom { color: var(--theme-soft); }
:root[data-theme='dark'] .footer a:hover { color: var(--theme-accent); }
:root[data-theme='dark'] dialog {
  background: var(--theme-page);
  color: var(--theme-ink);
  border-color: #51425e;
  box-shadow: 0 20px 100px #05020d77;
}
:root[data-theme='dark'] dialog::backdrop { background: #09060eb3; }
:root[data-theme='dark'] .dialog-heading button { background: var(--theme-raised); color: var(--theme-ink); }
:root[data-theme='dark'] .app-detail { border-color: #51425e; }
:root[data-theme='dark'] .dialog-caption,
:root[data-theme='dark'] .price-details p { color: var(--theme-muted); }
:root[data-theme='dark'] .price-details .dialog-price,
:root[data-theme='dark'] .price-details a { color: var(--theme-accent); }

@media (max-width: 760px) {
  :root[data-theme='dark'] { background: var(--theme-page); }
  #theme-toggle { width: 38px; height: 38px; padding: 8px; }
  #theme-menu { right: -74px; }
}

@media (prefers-reduced-motion: reduce) {
  #theme-toggle, #theme-menu, #theme-menu button { transition: none; }
}