/* Explicit user preference overrides skin surface tokens, preserving brand accents. */
html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark'] {
  color-scheme: dark;
  --zf-ink: #f0f3f5;
  --zf-muted: #b0bbc5;
  --zf-accent: #6edbbd;
  --zf-soft: #263b36;
  --zf-surface: #1b222a;
  --zf-page: #11161c;
  --zf-line: #394550;
  --zf-danger: #ffaaa2;
  --zf-shadow: 0 12px 36px #0006;
}
html[data-theme='dark'] .sf {
  --sf-paper: #11161c;
  --sf-surface: #1b222a;
  --sf-ink: #f0f3f5;
  --sf-muted: #b0bbc5;
  --sf-rule: #394550;
  --sf-tint: #263b36;
  --sf-accent: #6edbbd;
  --sf-brand: #8fd987;
  background: var(--sf-paper);
}
html[data-theme='dark'] .ft-storefront { --sf-accent: #8ab8ff; }
html[data-theme='dark'] .rw-storefront { --sf-accent: #8ab8ff; }
html[data-theme='dark'] .yx-storefront { --sf-accent: #c9b0ff; }
html[data-theme='dark'] .pe-storefront { --sf-accent: #f2d16c; }
html[data-theme='dark'] .ve-storefront { --sf-accent: #e7dc60; }
html[data-theme='dark'] .sf .sf-primary { background: var(--sf-accent); color: #11161c; }
html[data-theme='light'] :is(.pe-storefront, .ve-storefront) {
  --sf-paper: #faf9f6;
  --sf-surface: #fff;
  --sf-ink: #24231e;
  --sf-muted: #615d51;
  --sf-rule: #dcd8ca;
  --sf-tint: #f7efd1;
  --sf-accent: #7b5e00;
}
html[data-theme='light'] :is(.pe-storefront, .ve-storefront) .sf-primary { color: #fff; }
html[data-theme='light'] .ve-storefront .sf-hero { background: linear-gradient(135deg, #faf3d8, #faf9f6); }
html[data-theme='dark'] :is(.zf-account-center, .service-shell, .ca-auth) {
  --zf-ink: #f0f3f5;
  --zf-muted: #b0bbc5;
  --zf-accent: #6edbbd;
  --zf-soft: #263b36;
  --zf-line: #394550;
  --zf-page: #11161c;
  --service-accent: #6edbbd;
  --ca-ink: #f0f3f5;
  --ca-muted: #b0bbc5;
  --ca-line: #394550;
  background: var(--zf-page);
  color: var(--zf-ink);
}
html[data-theme='dark'] :is(.commerce-panel, .commerce-cart-sync, .service-card, .service-order, .service-header, .zf-source-footer, .zf-source-header) {
  background: var(--zf-surface);
  color: var(--zf-ink);
  border-color: var(--zf-line);
}
html[data-theme='dark'] .sf :is(.sf-featured, .sf-featured li, .sf-category, .sf-product, .sf-purchase, .sf-package, .sf-header, .sf-faq, .sf-editorial-product, .sf-step-controls) {
  background: var(--sf-surface);
  border-color: var(--sf-rule);
  color: var(--sf-ink);
}
html[data-theme='dark'] .sf :is(.sf-featured h2, .sf-featured a) { color: var(--sf-ink); }
html[data-theme='dark'] .ft-storefront .sf-hero { background: linear-gradient(145deg, #192838, #252239); }
html[data-theme='dark'] .fans-tool-page {
  --tool-ink: #f0f3f5;
  --tool-muted: #b0bbc5;
  --tool-border: #394550;
  --tool-surface: #1b222a;
  --tool-bg: #11161c;
  --tool-accent: #91baff;
  --tool-accent-soft: #26344b;
}
html[data-theme='dark'] :is(.service-card, .commerce-panel, .ca-auth) :is(input, select, textarea, button) {
  background-color: var(--zf-surface);
  color: var(--zf-ink);
  border-color: var(--zf-line);
}
.zf-theme-toggle .zf-theme-sun { display: none; }
html[data-theme='dark'] .zf-theme-toggle .zf-theme-sun { display: block; }
html[data-theme='dark'] .zf-theme-toggle .zf-theme-moon { display: none; }
.zf-global-footer .sf-ai-resources { max-width: 1200px; padding: 24px 0 0; margin: 24px auto 0; border-top: 1px solid var(--zf-line); }
.zf-global-footer .sf-ai-resources h3 { margin: 0 0 12px; }
.zf-global-footer .sf-ai-resources nav { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 12px 0; }
.zf-global-footer .sf-ai-resources a { overflow-wrap: anywhere; }

html[data-theme='dark'] .ca-auth :is(.ca-auth-layout, .ca-auth-form, .ca-input, .ca-google, .commerce-activation) { background: var(--zf-surface); color: var(--zf-ink); border-color: var(--zf-line); }
html[data-theme='dark'] .ca-auth :is(input, .ca-input input) { background: var(--zf-surface); color: var(--zf-ink); }
html[data-theme='dark'] .service-shell :is(.card-summary, .card-address, .partner-code, .service-status) {
  background: var(--zf-soft);
  color: var(--zf-ink);
  border-color: var(--zf-line);
}
html[data-theme='dark'] .service-shell :is(small, .service-muted, .service-metrics span, .service-order dt, .card-table-hint) { color: var(--zf-muted); }
html[data-theme='dark'] .ca-auth :is(.ca-submit, .commerce-activation form button),
html[data-theme='dark'] .service-shell button { background: var(--zf-accent); color: #11161c; }