/* Additive local-preview theme. Mixed legacy --paper / --ink stay unchanged. */
html[data-theme="light"] { color-scheme: only light; }
.theme-control {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  min-width: 0; max-width: 100%; font: 14px/1.4 Arial, Helvetica, sans-serif;
}
.theme-control select {
  box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 44px;
  padding: 9px 10px; border: 1px solid #737879; border-radius: 8px;
  background: #fff; color: #181a1c; font: inherit; cursor: pointer;
}
.theme-control select:focus-visible { outline: 3px solid #155aa6; outline-offset: 3px; }
.theme-control--header { margin-block: 12px; }
.theme-control--footer { margin-block: 16px; }
@media (max-width: 600px) {
  .theme-control select { font-size: 16px; }
  .theme-control--header { justify-content: space-between; }
}
html[data-theme="dark"] {
  color-scheme: only dark;
  --theme-bg: #141719; --theme-surface: #202627; --theme-raised: #2b3335;
  --theme-text: #f4f3ef; --theme-muted: #b9bfc1; --theme-line: #414b4e;
  --theme-control-line: #849094; --theme-accent: #ff858d;
  --theme-button: #d5212b; --theme-focus: #a8d0ff;
  --gray: #b9bfc1; --line: #414b4e;
  background: var(--theme-bg);
}
html[data-theme="dark"] body { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="dark"] body :focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 4px; }
html[data-theme="dark"] body ::selection { color: #141719; background: #a8d0ff; }
/* Surfaces use explicit text pairs; image containers are deliberately excluded. */
html[data-theme="dark"] body :is(
  .site-header, .site-header #mobile-menu, footer, footer#visit,
  .price-section, .generation-detail, .process-panel, .vag-packages,
  .air-restoration, .air-teaser, .vag-diag-teaser, .service-car-picker,
  .to-page-link, .to-timing, .warranty-section, .advisor-panel,
  .advisor-panel header, .mobile-service-switch, .mobile-actions,
  .analytics-choice, .analytics-feedback, .callback-dialog
) { background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-line); }
html[data-theme="dark"] body :is(.air-service, .legal-body) { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="dark"] body :is(
  .model-card, .brand-option, .vp-card, #service-maintenance .vp-card,
  .service-choice-panel, .motor-card, .offer-card, .air-service-card,
  .air-model, .to-promise, .to-extra-work, .to-timing-note,
  .warranty-grid article, .touareg-specialist .generation-summary,
  .footer-route-options, .contact-entry-card
) { background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-line); }
html[data-theme="dark"] body .brand-family { background: transparent; color: var(--theme-text); }
html[data-theme="dark"] body :is(.model-card:hover, .brand-option:hover, .brand-option:focus-visible,
  .service-option[aria-expanded="true"], .generation.active,
  .workshop-tabs button[aria-pressed="true"], .mobile-service-switch button[aria-pressed="true"],
  .footer-route-options a:hover, .footer-route summary:hover) {
  background: var(--theme-raised); color: var(--theme-text); border-color: var(--theme-control-line);
}
html[data-theme="dark"] body :is(.generation, .service-option, .mobile-service-switch button,
  .brand-volkswagen a.model-card[data-request-mode], .generation-code, .generation-label,
  .touareg-specialist .generation-label, .touareg-specialist .generation-summary p,
  .touareg-specialist .specialist-approach, .offer-body summary, .warranty-details summary,
  .arrival-copy .arrival-address, .home-help strong, .muted a,
  .ruble-package-total, .vp-card .ruble-package-total, .vp-card .ruble-max-eligibility) {
  color: var(--theme-text);
}
html[data-theme="dark"] body :is(
  .panel-top, .process-panel>p, .price-grid p, .tag, .gen-number,
  .engine-years, .motor-code, .feature-years, .generation-features p,
  .generation-summary p, .touareg-work-grid p, .transmission-scope,
  .touareg-specialist .generation-code, .workshop-photo-grid figcaption span,
  .workshop-slide figcaption span, .workshop-count, .workshop-controls>span,
  .offers-heading>p, .offer-body>p, .offer-body details p, .offer-body ul,
  .warranty-intro, .warranty-mileage, .warranty-details, .warranty-limit,
  .diagnostics-content .maintenance-group p, #service-diagnostics .diagnostics-tools-note,
  .workshop-expertise p, .arrival-copy p, .workshop-about-copy p, .workshop-facts span,
  .footer-maps-desktop>span, .footer-bottom, .site-header .header-phone small,
  .vp-purpose, .vp-materials, .vp-note, .vp-card .vp-regular-price,
  .to-package-comparison, .to-three p, .to-two p, .to-steps p,
  .ruble-max-heading .ruble-old-price, .vp-card .ruble-max-explain, .vp-card .ruble-max-terms,
  .air-intro, .air-service-card p, .air-muted, .air-teaser-copy>p:not(.air-eyebrow),
  .vag-diag-teaser-copy p, .advisor-panel header p, .advisor-body .advisor-status,
  .contact-map-frame p, .contact-map-frame p a
) { color: var(--theme-muted); }
/* Quiet typography: hierarchy comes from size and weight, not pink text. */
html[data-theme="dark"] body :is(
  .home-section-head .eyebrow, .family-num, .home-step>span, .model-help,
  .model-help-note p a:not(.model-help-booking), .car-picker-link,
  .price-index, .process-evidence>span, .service-pictogram, .service-option-action,
  .service-choice-panel li:before, .expertise-accent, .workshop-facts strong,
  .vp-price, #service-maintenance .vp-card .vp-price, .vp-card .vp-first-visit,
  .ruble-work-prices strong, .air-warranty strong, .air-model-link,
  .air-service-card li:before, .faq details[open] summary span,
  .warranty-grid svg, .brand-models .model-card::after, .legal-body a
) { color: var(--theme-text); }
html[data-theme="dark"] body :is(.entry>a:hover h2, .entry>a:hover .arrow,
  .service-list>a:hover, .site-header a:hover, .site-header #mobile-menu a[data-request-mode="price"],
  .model-card:hover svg, .brand-option:hover i) { color: var(--theme-text); }
html[data-theme="dark"] body :is(.service-icon-frame, .to-package-icon) {
  background: var(--theme-raised); color: var(--theme-accent); border-color: var(--theme-line);
}
html[data-theme="dark"] body .entry-services>a:hover .service-icon-frame {
  background: var(--theme-raised); border-color: var(--theme-accent);
}
html[data-theme="dark"] body :is(.booking-discount, .to-discount) { background: #48262b; color: #ffb9bd; }
html[data-theme="dark"] body :is(.service-option, .generation-layout, .ruble-work-prices li,
  .footer-bottom, footer#visit .footer-bottom, .site-header #mobile-menu a,
  .vp-card-checks, .to-three span, .to-steps li>span) { border-color: var(--theme-line); }
/* Primary controls: fixed approved red, independent of legacy animations. */
html[data-theme="dark"] body :is(.button.red, .service-booking, .offer-cta, .booking-submit,
  .mobile-booking, .model-help-booking, .vp-card .vp-action, .to-response .to-book,
  .contact-entry-button, .advisor-call, .inquiry-receipt-done, .analytics-choice button[data-choice="yes"],
  .mobile-actions>a:last-child) {
  background: var(--theme-button)!important; border-color: var(--theme-button); color: #fff; animation: none!important;
}
html[data-theme="dark"] body :is(.button.red, .service-booking, .offer-cta, .booking-submit,
  .mobile-booking, .model-help-booking, .vp-card .vp-action, .to-response .to-book,
  .contact-entry-button, .advisor-call, .inquiry-receipt-done, .analytics-choice button[data-choice="yes"],
  .mobile-actions>a:last-child):hover {
  background: #bd1d27!important; border-color: #bd1d27; color: #fff;
}
html[data-theme="dark"] body :is(.button.red, .service-booking, .offer-cta, .booking-submit,
  .mobile-booking, .model-help-booking, .vp-card .vp-action, .to-response .to-book,
  .contact-entry-button, .advisor-call, .inquiry-receipt-done, .analytics-choice button[data-choice="yes"],
  .mobile-actions>a:last-child):active { background: #a81922!important; border-color: #a81922; }
html[data-theme="dark"] body :is(.button.dark, .home-help .button:not(.red),
  .to-response .to-price, .service-response-actions .service-booking-secondary,
  .offers-carousel-controls button, .workshop-controls button, .workshop-tabs button,
  .analytics-choice button:not([data-choice="yes"]), .contact-map-links a,
  .footer-route summary, .arrival-links a, .callback-dialog-close, .advisor-close,
  .theme-control select, .car-picker-fields select) {
  background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-control-line);
}
html[data-theme="dark"] body :is(.to-response .to-price, .service-response-actions .service-booking-secondary,
  .offers-carousel-controls button, .workshop-controls button, .analytics-choice button:not([data-choice="yes"]),
  .contact-map-links a, .callback-dialog-close, .advisor-close):hover {
  background: var(--theme-raised); color: var(--theme-text); border-color: var(--theme-control-line);
}
html[data-theme="dark"] body .site-header .menu-toggle {
  background: var(--theme-raised); color: var(--theme-text); box-shadow: 0 0 0 1px var(--theme-control-line);
}
html[data-theme="dark"] body .site-header #mobile-menu a:hover { background: var(--theme-raised); }
/* Header wordmark only: remove the white raster backing on the dark header. */
html[data-theme="dark"] body .site-header .brand-original {
  background: transparent; border-radius: 0; outline: none;
}
html[data-theme="dark"] body .site-header .brand-original small { color: var(--theme-muted); }
html[data-theme="dark"] body .site-header .brand-art img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
html[data-theme="dark"] body :is(.logo-slot, .brand-option>svg, .brand-option>img) {
  background: transparent; color: #f4f3ef; border-radius: 0;
}
html[data-theme="dark"] body .logo-slot svg { color:#f4f3ef; }
html[data-theme="dark"] body .logo-slot image {
  filter: grayscale(1) invert(1) brightness(3); mix-blend-mode: screen;
}
html[data-theme="dark"] body .brand-option>img {
  filter: grayscale(1) invert(1) brightness(3); mix-blend-mode: screen;
}
html[data-theme="dark"] body :is(.contact-map, footer#visit .contact-map) { background: transparent; color: var(--theme-text); }
html[data-theme="dark"] body .contact-map a { color: var(--theme-text); }
html[data-theme="dark"] body .contact-map .contact-map-schematic { background: #eceee8; border-radius: 8px; }
html[data-theme="dark"] body .contact-map-frame p a { color: var(--theme-muted); }
html[data-theme="dark"] body .footer-social-item { border-color: var(--theme-control-line); }
html[data-theme="dark"] body .social-logo-rutube { color: var(--theme-text); }
/* Request forms retain their contract and geometry. */
html[data-theme="dark"] body .request-layout :is(input, select, textarea) {
  background: var(--theme-bg); color: var(--theme-text); border-color: var(--theme-control-line);
  accent-color: var(--theme-accent);
}
html[data-theme="dark"] body .request-layout :is(input, textarea)::placeholder { color: var(--theme-muted); opacity: 1; }
html[data-theme="dark"] body :is(.request-layout label, .callback-dialog .callback-field>label,
  .callback-dialog-intro, .request-layout .optional-label, .request-layout .phone-hint) { color: var(--theme-muted); }
html[data-theme="dark"] body .request-layout :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--theme-accent); }
html[data-theme="dark"] body :is(.request-result, .contact-entry-status) { color: var(--theme-text); }
html[data-theme="dark"] body .skip { background: var(--theme-text); color: var(--theme-bg); }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body :is(.theme-control select, .contact-entry-button, .to-response a) { transition: none; }
}
/* Dedicated diagnostics/service template uses separate semantic variables. */
html[data-theme="dark"] body.service-landing {
  --sl-ink: #f4f3ef; --sl-muted: #b9bfc1; --sl-line: #414b4e; --sl-paper: #202627;
}
html[data-theme="dark"] body.service-landing .sl-card {
  background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-line);
}
html[data-theme="dark"] body.service-landing :is(.sl-price, .sl-text-link) { color: var(--theme-text); }
html[data-theme="dark"] body.service-landing .sl-index { color: var(--theme-muted); }
html[data-theme="dark"] body.service-landing .sl-light-button {
  background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-control-line);
}
html[data-theme="dark"] body.service-landing .sl-light-button:hover { background: var(--theme-raised); }
/* Theme chooser is an extra header control; retain existing navigation breakpoints. */
body .site-header .desktop-nav .theme-control--header {
  margin: 0; flex-wrap: nowrap; font-size: 12px;
}
body .site-header .desktop-nav .theme-control select { max-width: 160px; font-size: 12px; }
@media (min-width: 1101px) {
  body .site-header .desktop-nav:has(.theme-control) { gap: 14px; align-items: center; white-space: normal; }
}

/* Dynamically inserted inquiry status UI; no submission behavior changes. */
html[data-theme="dark"] body .inquiry-receipt {
  background: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-line);
}
html[data-theme="dark"] body .inquiry-receipt h2 { color: var(--theme-text); }
html[data-theme="dark"] body .inquiry-receipt p { color: var(--theme-muted); }
html[data-theme="dark"] body :is(.inquiry-receipt-close, .rumo-inquiry-action) {
  background: var(--theme-raised); color: var(--theme-text); border: 1px solid var(--theme-control-line);
}
html[data-theme="dark"] body .inquiry-receipt .inquiry-receipt-icon {
  background: var(--theme-raised); color: var(--theme-muted);
}
html[data-theme="dark"] body .inquiry-receipt[data-state="error"] .inquiry-receipt-icon {
  background: #48262b; color: var(--theme-accent);
}
html[data-theme="dark"] body .inquiry-receipt[data-state="accepted"] .inquiry-receipt-icon {
  background: #193e2f; color: #7dd3a8;
}

/* Keep discount captions neutral as well; red remains on primary actions. */
html[data-theme="dark"] body :is(.booking-discount,.to-discount,.sl-cta-discount){color:#fff;background:#ffffff18}


/* Two-position theme switch. System mode remains the initial default. */
.theme-control { display:inline-flex; padding:0; border:0; background:transparent; width:max-content; }
.theme-toggle { position:relative; display:flex; align-items:center; justify-content:space-between; width:76px; height:44px; padding:0 9px; border:1px solid #899194; border-radius:24px; background:#dce0df; color:#323a3d; cursor:pointer; }
.theme-toggle::before { content:""; position:absolute; top:4px; left:4px; width:34px; height:34px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0003; transition:transform .18s ease; }
.theme-toggle span { position:relative; z-index:1; display:grid; place-items:center; width:24px; font:24px/1 Arial,sans-serif; }
.theme-toggle[aria-checked="true"] { background:#141719; border-color:#697579; color:#b9bfc1; }
.theme-toggle[aria-checked="true"]::before { transform:translateX(32px); background:#e9edee; }
.theme-toggle[aria-checked="true"] .theme-toggle-moon { color:#202627; }
.theme-toggle:focus-visible { outline:3px solid #699dc9; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .theme-toggle::before { transition:none; } }
/* Preserve crest and wing details rather than clipping their tonal range. */
html[data-theme="dark"] body :is(.logo-porsche,.logo-genesis,.logo-chery,.logo-changan) image {
  filter:grayscale(1) invert(1) brightness(1.5);
}
/* Apply monochrome to the complete rendered emblem, including SVG raster children.
   Some mobile renderers do not consistently filter the nested SVG image. */
html[data-theme="light"] body .home-brands .logo-slot svg,
html[data-theme="light"] body .home-brands .brand-option > img,
html[data-theme="light"] body .home-brands .brand-option > svg {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}