/* Shared palette for interior pages. These independent tokens avoid local
   page variables overriding the selected theme. Keep status/error colors
   and actual vehicle paint swatches separate from decorative brand colors. */
:root {
  --ui-canvas: #fff;
  --ui-panel: #fff;
  --ui-subtle: #f3f8f9;
  --ui-text: #2c4569;
  --ui-muted: #526e7a;
  --ui-line: rgb(44 69 105 / 16%);
  --ui-link: #167879;
  --ui-action: #2c4569;
  --ui-action-hover: #20334e;
  --ui-on-action: #fff;
  --ui-accent-soft: rgb(51 181 182 / 10%);
  --ui-shadow: 0 8px 28px rgb(44 69 105 / 6%);
  --ui-warning-bg: #faa831;
  --ui-warning-text: #2c4569;
}
:root[data-theme="dark"] {
  --ui-canvas: #0d1726;
  --ui-panel: #2c4569;
  --ui-subtle: #20334e;
  --ui-text: #eef7f7;
  --ui-muted: #c7e1e4;
  --ui-line: rgb(199 225 228 / 20%);
  --ui-link: #33b5b6;
  --ui-action: #33b5b6;
  --ui-action-hover: #70cece;
  --ui-on-action: #152d43;
  --ui-accent-soft: rgb(51 181 182 / 12%);
  --ui-shadow: 0 8px 28px rgb(0 0 0 / 15%);
}

/* 1. Catalog, brand indexes, news, guides and editorial pages. */
.catalog { color: var(--ui-text); }
.catalog article {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  box-shadow: var(--ui-shadow);
}
.catalog :is(h1, h2, h3, dt) { color: var(--ui-text); }
.catalog :is(p, dd) { color: var(--ui-muted); }
.catalog a { color: var(--ui-link); }
.catalog article a:has(h2) { color: var(--ui-text); }
.catalog :is(input, select, textarea) {
  background: var(--ui-panel);
  color: var(--ui-text);
  border: 1px solid var(--ui-line);
  border-radius: 8px;
}
.catalog button {
  background: var(--ui-action);
  color: var(--ui-on-action);
  border: 1px solid transparent;
  border-radius: 8px;
  padding-inline: 18px;
}
.catalog button:hover { background: var(--ui-action-hover); }
.catalog :is(td, th) { border-color: var(--ui-line); }
.catalog th { background: var(--ui-subtle); color: var(--ui-text); }
.catalog :focus-visible { outline-color: #33b5b6; }

/* 2. Sales events and vehicle cards. Preserve photographic backgrounds. */
:root[data-theme] .ev-curtain .ev-desc {
  background: var(--ui-canvas);
  border-color: var(--ui-line);
  color: var(--ui-text);
}
:root[data-theme] :is(.ev-desc__title, .ev-vehicles__heading) { color: var(--ui-text); }
:root[data-theme] .ev-curtain .ev-desc__body { color: var(--ui-muted); }
:root[data-theme] .vehicle-card {
  --vc-border: var(--ui-line);
  --vc-text: var(--ui-text);
  --vc-muted: var(--ui-muted);
  --vc-stripe: var(--ui-line);
  --vc-badge: #2c4569;
  --vc-badge-text: #fff;
  --vc-stock: var(--ui-panel);
}
:root[data-theme] .ev-vehicles .vehicle-card {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
}
:root[data-theme] .ev-vehicles .vehicle-card__footer {
  background: var(--ui-panel);
  border-color: var(--ui-line);
  color: var(--ui-text);
}
:root[data-theme] .ev-vehicles :is(.vehicle-card__name, .vehicle-card__price strong) { color: var(--ui-text); }
:root[data-theme] .ev-vehicles :is(.vehicle-card__price-label, .vehicle-card__currency) { color: var(--ui-muted); }
:root[data-theme] .ev-vehicles .vehicle-card__price { border-color: var(--ui-line); }
:root[data-theme] .ev-vehicles .vehicle-card__footer::before { background: #33b5b6; }
:root[data-theme] .ev-vehicles .vehicle-card__cta {
  background: var(--ui-action);
  color: var(--ui-on-action);
  border-color: transparent;
  box-shadow: none;
}
:root[data-theme] .ev-vehicles .vehicle-card__cta:hover { background: var(--ui-action-hover); color: var(--ui-on-action); }
:root[data-theme] .ev-vehicles .vehicle-card__cta svg { background: transparent; color: inherit; }

/* 3. Vehicle detail and purchase options. */
:root[data-theme] .vehicle-design {
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --page: var(--ui-canvas);
  --paper: var(--ui-panel);
  --blue: var(--ui-action);
  --blue-hover: var(--ui-action-hover);
  --teal: var(--ui-link);
  --line: var(--ui-line);
  --soft: var(--ui-subtle);
  --shadow: var(--ui-shadow);
}
.vehicle-design :is(.hero, .hero-atmosphere, .gallery-section, .gallery-dialog) { background: #0d1726; }
.vehicle-design .gallery-shot { background: #2c4569; }
.vehicle-design :is(.brand-dot, .live-dot, .preview-label > span) { background: #33b5b6; }
.vehicle-design :is(.hero-eyebrow, .hero-description, .hero-top, .text-link, .scene-caption, .hero-detail p, .gallery-heading p) { color: #c7e1e4; }
.vehicle-design .hero-detail a { color: #33b5b6; }
.vehicle-design .button.primary { background: var(--ui-action); color: var(--ui-on-action); }
.vehicle-design .button.primary:hover { background: var(--ui-action-hover); }
.vehicle-design :is(.view-button.active, .lightbox-controls button.active) { background: #2c4569; color: #fff; }
.vehicle-design :is(.hotspot:hover, .hotspot[aria-expanded="true"]) { background: #33b5b6; color: #152d43; }
.vehicle-design :is(button, a, input):focus-visible { outline-color: #33b5b6; }

/* 4. About and Contact; shared foundations also cover after-sales pages. */
:root[data-theme] .ac-page {
  --ink: var(--ui-text);
  --blue: var(--ui-link);
  --deep: var(--ui-link);
  --ice: #c7e1e4;
  --bg: var(--ui-canvas);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --paper: var(--ui-panel);
  background: var(--ui-canvas);
  color: var(--ui-text);
}
.ac-page :is(.approach, .location-art) { background: var(--ui-subtle); }
.ac-page .studio-grid { background: var(--ui-panel); }
.ac-page :is(.about-hero, .belief-photo, .invitation, .contact-sidebar, .ticker) { background-color: #2c4569; color: #fff; }
.ac-page :is(.story-text p.lead, .field label, .visit-hours b) { color: var(--ui-text); }
.ac-page :is(.chapter .micro, .card-head, .clarity-graphic div, .journey-counter small,
  .step-index, .contact-hero-label > .micro, .contact-hero-bottom p, .hero-phone > span,
  .form-panel-top, .topic-options span, .field label > span, .field label small,
  .form-submit small, .visit-copy > p, .visit-hours > div, .city-label, .map-note,
  .contact-end > span, .contact-end > small) { color: var(--ui-muted); }
.ac-page :is(.hero-topline, .hero-title-wrap h1 > span, .hero-note p,
  .eyebrow.light, .invitation p, .sidebar-image > span,
  .contact-row small, .sidebar-hours) { color: #c7e1e4; }
.ac-page :is(.ticker b, .row-icon, .contact-row > .icon, .contact-row:hover) { color: #33b5b6; }
.ac-page :is(.tiny-line, .clarity-graphic i, .journey-meter i, .form-progress) { background: var(--ui-line); }
.ac-page .contact-orbit::before { background: var(--ui-accent-soft); }
.ac-page .big-invitation h2 > span { color: #33b5b6; }
.ac-page .invitation-circle { background: #33b5b6; color: #152d43; }
.ac-page .big-invitation:hover .invitation-circle { background: #faa831; }
.ac-page .sidebar-image::after { background: linear-gradient(transparent, #2c4569); }
.ac-page .form-progress i { background: #33b5b6; }
.ac-page .topic-options input:checked + span {
  background: var(--ui-accent-soft);
  color: var(--ui-link);
  border-color: #33b5b6;
}
.ac-page .field :is(input, textarea) { background: var(--ui-panel); color: var(--ui-text); border-color: var(--ui-line); }
.ac-page .field :is(input, textarea)::placeholder { color: var(--ui-muted); }
.ac-page .field :is(input, textarea):focus { border-color: #33b5b6; }
.ac-page :is(.form-feedback, .reset-demo, .contact-end > a) { color: var(--ui-link); }
.ac-page .form-feedback { background: var(--ui-accent-soft); }
.ac-page .button { background: var(--ui-action); color: var(--ui-on-action); }
.ac-page .button:hover { background: var(--ui-action-hover); }
.ac-page .button.dark { background: var(--ui-action); color: var(--ui-on-action); }
.ac-page .button.dark:hover { background: var(--ui-action-hover); }

/* 5. After-sales, warranty, dealership finder and resource pages. */
.as-page .as-action { background: var(--ui-panel); border-color: var(--ui-line); }
.as-page .as-actions .as-action:nth-child(odd),
.as-page .as-action--dark, .as-page .as-contact { background: #2c4569; color: #fff; }
.as-page .as-actions .as-action:nth-child(odd) :is(p, .as-card-number),
.as-page :is(.as-action--dark p, .as-action--dark .as-card-number, .as-contact p, .as-hero-bottom p) { color: #c7e1e4; }
.as-page .as-actions .as-action:nth-child(odd) .as-card-link,
.as-page .as-action--dark .as-card-link { border-color: rgb(199 225 228 / 25%); }
.as-page :is(.as-hero, .as-contact) .button { background: #33b5b6; color: #152d43; }
.as-page .as-image-note { color: #c7e1e4; }
.as-page .as-resources { background: var(--ui-canvas); }
.as-page .as-warranty {
  --soft: var(--ui-subtle);
  --teal: var(--ui-link);
  --blue: var(--ui-link);
  background: var(--ui-subtle);
}
.as-page .as-warranty-button { background: var(--ui-action); color: var(--ui-on-action); }
.as-page .as-warranty-button:hover { background: var(--ui-action-hover); }
.as-page .dealer-map-panel { background: var(--ui-panel); border-color: var(--ui-line); }
.as-page .dealer-map path { fill: #c7e1e4; stroke: var(--ui-panel); }
.as-page .dealer-page .dealer-map-panel { background: transparent; }
.as-page .dealer-page .dealer-map path { stroke: var(--ui-canvas); }
.as-page .dealer-map path.has-dealers { fill: #33b5b6; }
.as-page .dealer-map path:hover, .as-page .dealer-map path:focus,
.as-page .dealer-map path[aria-pressed="true"] { fill: #faa831; }
.as-page .dealer-map-key { color: var(--ui-muted); }
.as-page .dealer-map-key span::before { background: #33b5b6; }
.as-page .dealer-map-key span + span::before { background: #faa831; }

/* 6. Login, registration, complaints and satisfaction forms. */
:root[data-theme] .auth-page {
  --auth-bg: var(--ui-canvas);
  --auth-surface: var(--ui-panel);
  --auth-ink: var(--ui-text);
  --auth-muted: var(--ui-muted);
  --auth-line: var(--ui-line);
  --auth-input: var(--ui-subtle);
  --auth-action: var(--ui-action);
}
.auth-register-header, .auth-media { background: #2c4569; }
.auth-register-header__label { color: #c7e1e4; }
.auth-field input::placeholder { color: var(--ui-muted); }
.auth-field input:focus { border-color: #33b5b6; box-shadow: 0 0 0 3px rgb(51 181 182 / 15%); }
:root[data-theme] .auth-forgot, :root[data-theme] .auth-footer-link a { color: var(--ui-link); }
.auth-page .auth-btn { background: var(--ui-action); color: var(--ui-on-action); }
.auth-page .auth-btn:hover { background: var(--ui-action-hover); }
.auth-btn:focus-visible, .auth-check:focus-within { outline-color: #33b5b6; }
:root[data-theme] .auth-check:has(input:checked) { background: var(--ui-accent-soft); border-color: #33b5b6; }
.auth-check input { accent-color: #33b5b6; }
.auth-msg--info { background: var(--ui-subtle); color: var(--ui-text); }
:root[data-theme] body:has(.auth-page) .nav__cta { background: #33b5b6; color: #fff; }
:root[data-theme] body:has(.auth-page) .nav__cta:hover { background: #70cece; }

/* 7. Customer profile and seller workspace share the same component tokens. */
:root[data-theme] :is(.pf, .seller-workspace) {
  --brand: var(--ui-action);
  --brand-dark: var(--ui-action-hover);
  --brand-text: var(--ui-link);
  --brand-tint: var(--ui-accent-soft);
  --brand-soft: var(--ui-accent-soft);
  --brand-border: var(--ui-line);
  --pf-mix: var(--ui-panel);
  --pf-dark-mix: #20334e;
  --pf-bg: var(--ui-canvas);
  --pf-surface: var(--ui-panel);
  --pf-subtle: var(--ui-subtle);
  --pf-border: var(--ui-line);
  --pf-card-border: var(--ui-line);
  --pf-text: var(--ui-text);
  --pf-text2: var(--ui-muted);
  --pf-muted: var(--ui-muted);
  --pf-card-shadow: var(--ui-shadow);
  --pf-warn-soft: var(--ui-warning-bg);
  --pf-warn-text: var(--ui-warning-text);
}
.sp-hero { background: #2c4569; color: #fff; }
.sp-chart-commission .sp-chart-bar { background: #33b5b6; }
.seller-form :is(input, button):focus-visible { outline-color: #33b5b6; }
:root[data-theme] .sp-button { color: var(--ui-on-action) !important; }
:root[data-theme] .seller-filters [aria-current],
:root[data-theme] .seller-button:not(.seller-button-secondary) { background: var(--ui-action); color: var(--ui-on-action); }
.pf-hero { background: #2c4569; }
.pf-nav__item.is-active, .pf-btn--primary { color: var(--ui-on-action); }
.pf-status--review { color: var(--ui-link); }

/* 8. Password recovery and checkout. */
.auth-wrap { background: var(--ui-canvas); }
.auth-wrap::before { background: none; }
.auth-wrap .auth-card { background: var(--ui-panel); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); }
.auth-wrap .auth-card__bar { background: #33b5b6; }
.auth-wrap :is(.auth-icon, .auth-icon-wrap) { background: var(--ui-accent-soft); color: var(--ui-link); }
.auth-wrap .auth-field input:focus { background: var(--ui-panel); color: var(--ui-text); border-color: #33b5b6; }
.auth-wrap .auth-btn { background: var(--ui-action); color: var(--ui-on-action); }
.auth-wrap .auth-btn:hover { background: var(--ui-action-hover); }
.pay { color: var(--ui-text); }
.pay__card { background: var(--ui-panel); border-color: var(--ui-line); box-shadow: var(--ui-shadow); }
.pay :is(.pay__card h2, .pay__vehicle-model, .pay__price-row--total) { color: var(--ui-text); }
.pay :is(.pay__order-id, .pay__vehicle-company, .pay__price-row) { color: var(--ui-muted); }
.pay__price-row + .pay__price-row { border-color: var(--ui-line); }
.pay :is(.pay__thumb, .pay__vehicle-chip, .pay__method, .pay__method-badge) { background: var(--ui-subtle); color: var(--ui-muted); border-color: var(--ui-line); }
.pay .pay__method--active { background: var(--ui-accent-soft); color: var(--ui-link); border-color: #33b5b6; }
.pay .pay__method-badge--on { background: #33b5b6; color: #152d43; }
.pay__pay-btn { background: var(--ui-action); color: var(--ui-on-action); }
.pay__pay-btn:hover:not(:disabled) { background: var(--ui-action-hover); }
.pay__pay-btn:disabled { background: var(--ui-subtle); color: var(--ui-muted); }
.pay__timer:not(.is-expired) { background: #faa831; color: #2c4569; border-color: #faa831; }
.pay__timer:not(.is-expired)::before { background: #2c4569; }
.pay__notice { background: var(--ui-accent-soft); color: var(--ui-text); border-color: var(--ui-line); }
.purchase-confirmation button {
  padding: 12px 24px;
  margin-block: 20px;
  border: 0;
  border-radius: 10px;
  background: var(--ui-action);
  color: var(--ui-on-action);
  font: inherit;
  cursor: pointer;
}
.purchase-confirmation button:hover { background: var(--ui-action-hover); }
.purchase-confirmation a { color: var(--ui-link); }
.transaction-status { color: var(--ui-text); }
.transaction-status__panel { background: var(--ui-panel); border-color: var(--ui-line); }
:root[data-theme] .ev-vehicles .vehicle-card__cta:hover svg { background: transparent; color: inherit; }