/* Day mode retains the approved website. Theme colors never filter artwork. */
:root[data-theme="light"] { color-scheme: light; }

/* R85: brand emphasis in day mode; preserve the approved R84 night treatment. */
:root:not([data-theme="dark"]) #plan-product {
  --vi-on-dark-secondary: #fff;
  --vi-dark-border: rgb(255 255 255 / 25%);
  --vi-link: #fff;
  background: var(--vi-accent);
  border-color: var(--vi-accent);
  color: #fff;
}
:root:not([data-theme="dark"]) #plan-product li > .ui-symbol { color: currentColor; }
:root:not([data-theme="dark"]) #plan-product .plan-action {
  background: #fff;
  color: #050609;
  box-shadow: none;
}
:root:not([data-theme="dark"]) #plan-product .plan-action:hover {
  background: #fff;
  color: var(--vi-accent-hover);
}
.site-header .theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.site-header .theme-toggle[hidden] { display: none; }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; pointer-events: none; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
.site-header .theme-toggle:hover { background: rgb(255 255 255 / 8%); }
.site-header .theme-toggle:focus-visible { outline: 2px solid var(--vi-focus-dark); outline-offset: 2px; }
.pricing-page .site-header .theme-toggle:hover { background: var(--vi-surface); }
.pricing-page .site-header .theme-toggle:focus-visible { outline-color: var(--vi-link); }

/* Keep every header control usable at small widths. */
@media (max-width: 520px) {
  .site-header { gap: 8px; }
  .site-header .wordmark { flex: 0 1 auto; min-width: 0; }
  .site-header .wordmark img { max-width: 100%; }
  .site-header .header-actions { flex: 0 0 auto; gap: 4px; }
  .site-header .header-language { width: 68px; flex-basis: 68px; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Two neutral surfaces: the hero's closing black and one shared charcoal. */
  --theme-black: #050609;
  --theme-gray: #1b1d22;
  --vi-ink: #f2f2f7;
  --vi-secondary: #adb0bc;
  --vi-heading-muted: #989ca8;
  --vi-paper: var(--theme-black);
  --vi-surface: var(--theme-gray);
  --vi-dark: var(--theme-black);
  --vi-border: #343740;
  --vi-link: #a6b5ff;
  --theme-raised: var(--theme-gray);
  --theme-control: var(--theme-black);
  --theme-border-strong: #515663;
  --collection-ink: var(--vi-ink);
  --collection-muted: var(--vi-secondary);
  --collection-line: var(--vi-border);
  --collection-paper: var(--vi-paper);
  --paper: var(--vi-paper);
  --text: var(--vi-ink);
  --sub: var(--vi-secondary);
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] :is(.gallery-paper, .pricing-page) {
  background: var(--vi-paper);
  color: var(--vi-ink);
  color-scheme: dark;
}
:root[data-theme="dark"] :is(.work-chapter, .services-section, .creator-section) {
  background: var(--vi-surface);
  color: var(--vi-ink);
}
:root[data-theme="dark"] .work-chapter .featured-slot { background: var(--vi-surface); }
:root[data-theme="dark"] .creator-activity { background: var(--vi-paper); }
:root[data-theme="dark"] .pricing-overview { background: var(--vi-paper); }
:root[data-theme="dark"] .skip-link { background: var(--vi-surface); color: var(--vi-ink); }
:root[data-theme="dark"] .collection-toast { background: var(--vi-surface); color: var(--vi-ink); }
:root[data-theme="dark"] :is(.site-header .theme-toggle:hover, .hero .motion-toggle:hover) { background: var(--vi-surface); }
:root[data-theme="dark"] :is(.collection-eyebrow, .collection-count, .empty-filter, .creator-identity small) { color: var(--vi-secondary); }

/* Website chrome follows the theme; supplied website screenshots do not. */
:root[data-theme="dark"] .work-cover { background: var(--vi-paper); }
:root[data-theme="dark"] .browser-top { background: var(--theme-raised); border-color: var(--vi-border); }
:root[data-theme="dark"] .window-dots i { background: #646975; }
:root[data-theme="dark"] .window-address { background: var(--theme-control); color: var(--vi-secondary); }
:root[data-theme="dark"] .window-expand { color: var(--vi-secondary); }
:root[data-theme="dark"] .work-cover::after { border-color: var(--theme-border-strong); }
:root[data-theme="dark"] .site-card .card-stage:not(.has-work) { background: var(--theme-raised); }
:root[data-theme="dark"] :is(.browser-window, .window-canvas) { background: var(--vi-paper); border-color: var(--vi-border); }
:root[data-theme="dark"] .placeholder-grid { border-color: var(--vi-border); }
:root[data-theme="dark"] .placeholder-grid::before,
:root[data-theme="dark"] .placeholder-grid::after { background: var(--vi-surface); }
:root[data-theme="dark"] .empty-window-contents small { color: var(--vi-secondary); }
:root[data-theme="dark"] .empty-window .window-add-icon { color: var(--vi-secondary); border-color: var(--theme-border-strong); }
:root[data-theme="dark"] .card-action { color: var(--vi-ink); background: var(--vi-paper); border-color: var(--theme-border-strong); }
:root[data-theme="dark"] .card-action:hover { background: var(--vi-surface); color: var(--vi-link); border-color: var(--theme-border-strong); }
:root[data-theme="dark"] .filter-group button:hover { background: var(--vi-surface); color: var(--vi-link); }
:root[data-theme="dark"] .filter-group button[aria-pressed="true"] { background: var(--vi-surface); color: var(--vi-ink); }
:root[data-theme="dark"] .quiet-button:hover { color: var(--vi-link); }

/* Night pricing keeps neutral surfaces quiet and emphasizes the whole featured card. */
:root[data-theme="dark"] .plan-card { background: var(--theme-gray); }
:root[data-theme="dark"] .plan-card:hover { border-color: var(--theme-border-strong); }
/* Card-local colors keep every label and its focus ring readable on brand blue. */
:root[data-theme="dark"] #plan-product {
  --vi-on-dark-secondary: #fff;
  --vi-dark-border: rgb(255 255 255 / 25%);
  --vi-link: #fff;
  background: var(--vi-accent);
  border-color: var(--vi-accent);
  color: #fff;
}
:root[data-theme="dark"] #plan-product li > .ui-symbol { color: currentColor; }
:root[data-theme="dark"] .plan-action {
  background: transparent;
  color: var(--vi-ink);
  box-shadow: inset 0 0 0 1px var(--theme-border-strong);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
:root[data-theme="dark"] .plan-action:hover {
  background: transparent;
  color: var(--vi-link);
  box-shadow: inset 0 0 0 1px var(--vi-link);
}
:root[data-theme="dark"] #plan-product .plan-action {
  background: #fff;
  color: var(--theme-black);
  box-shadow: none;
}
:root[data-theme="dark"] #plan-product .plan-action:hover {
  background: #fff;
  color: var(--vi-accent-hover);
}
:root[data-theme="dark"] .comparison-scroll { border-color: var(--vi-border); }
:root[data-theme="dark"] .comparison-scroll thead th { background: var(--vi-surface); }
:root[data-theme="dark"] .pricing-page .pricing-band .comparison-scroll th:first-child { box-shadow: 5px 0 8px rgb(27 29 34 / 60%); }
:root[data-theme="dark"] .plan-selection textarea { background: var(--vi-paper); }
:root[data-theme="dark"] .collection-footer.site-footer { color: var(--vi-ink); }
:root[data-theme="dark"] .collection-footer.site-footer a:hover { color: var(--vi-ink); }
:root[data-theme="dark"] .collection-footer.site-footer .footer-backtop { color: var(--vi-secondary); }

/* The hero keeps its original rendering; surrounding chrome shares its black. */
:root[data-theme="dark"] .pricing-page .site-header { background: var(--vi-paper); color: var(--vi-ink); border-color: var(--vi-border); }
:root[data-theme="dark"] .pricing-page .site-header .header-actions { color: var(--vi-ink); }
:root[data-theme="dark"] .pricing-page .desktop-nav a:hover,
:root[data-theme="dark"] .pricing-page .desktop-nav a[aria-current] { color: var(--vi-ink); }
:root[data-theme="dark"] .pricing-page .menu-toggle span { background: var(--vi-ink); }
:root[data-theme="dark"] .mobile-nav { background: var(--vi-surface); color: var(--vi-ink); border-color: var(--vi-border); }
:root[data-theme="dark"] .site-header .header-language {
  --language-panel: var(--theme-raised);
  --language-hover: var(--theme-control);
  --language-selected: var(--theme-control);
  --language-text: var(--vi-ink);
  --language-border: var(--vi-border);
  --language-shadow: 0 12px 32px rgb(0 0 0 / 20%);
}
:root[data-theme="dark"] .site-header .language-menu { color-scheme: dark; }
:root[data-theme="dark"] .site-header .language-select option { background: var(--vi-surface); color: var(--vi-ink); }
:root[data-theme="dark"] .site-header :is(.language-trigger, .language-select):hover { color: var(--vi-link); }
:root[data-theme="dark"] #work-image-dialog { color-scheme: dark; }

/* Owner-only editing dialogs also remain readable in the selected mode. */
:root[data-theme="dark"] :is(#site-dialog, #preview-dialog) { background: var(--vi-paper); color: var(--vi-ink); color-scheme: dark; border-color: var(--vi-border); }
:root[data-theme="dark"] :is(.circle-close, #site-form input:not([type="file"]), #site-form select) { background: var(--vi-surface); color: var(--vi-ink); border-color: var(--vi-border); }
:root[data-theme="dark"] :is(.dialog-description, #site-form label, .cover-label span, .storage-note, .preview-note) { color: var(--vi-secondary); }
:root[data-theme="dark"] :is(.owner-toolbar, .draft-notice) { background: var(--vi-surface); color: var(--vi-secondary); border-color: var(--vi-border); }
@media (prefers-reduced-motion: reduce) { .site-header .theme-toggle { transition: none; } }
@media (forced-colors: active) {
  .site-header .theme-toggle { color: ButtonText; }
  .site-header .theme-toggle:focus-visible { outline-color: Highlight; }
}