/*
 * Final color ownership layer.
 *
 * Components use the semantic UI tokens below so light and dark modes keep the
 * same hierarchy and contrast across catalog, editorial, lead and utility pages.
 */
:root {
  --drive-ui-accent: #c94224;
  --drive-ui-accent-hover: #9f2f18;
  --drive-ui-on-accent: #fff;
  --drive-ui-focus: #2563eb;
}

html[data-drive-theme="light"] body.drive-ma-site {
  --drive-ui-canvas: #f3f6fa;
  --drive-ui-surface: #fff;
  --drive-ui-surface-soft: #edf2f7;
  --drive-ui-surface-raised: #fff;
  --drive-ui-heading: #111827;
  --drive-ui-text: #334155;
  --drive-ui-muted: #59677a;
  --drive-ui-border: #d3dce8;
  --drive-ui-border-strong: #aebbc9;
  --drive-ui-link: #1558c0;
  --drive-ui-link-hover: #0b3d91;
  --drive-ui-success-bg: #e8f7f1;
  --drive-ui-success-text: #0d6b50;
  --drive-ui-warning-bg: #fff5df;
  --drive-ui-warning-text: #87530c;
  --drive-ui-shadow: 0 12px 34px rgb(15 23 42 / 9%);
  --drive-color-primary: var(--drive-ui-link);
  --drive-color-primary-strong: var(--drive-ui-link-hover);
  --drive-color-accent: var(--drive-ui-accent);
  --drive-color-surface: var(--drive-ui-surface);
  --drive-color-surface-muted: var(--drive-ui-surface-soft);
  --drive-color-ink: var(--drive-ui-heading);
  --drive-color-heading: var(--drive-ui-heading);
  --drive-color-body: var(--drive-ui-text);
  --drive-color-muted: var(--drive-ui-muted);
  --drive-color-border: var(--drive-ui-border);
  --drive-portal-bg: var(--drive-ui-canvas);
  --drive-portal-panel: var(--drive-ui-surface);
  --drive-portal-ink: var(--drive-ui-heading);
  --drive-portal-muted: var(--drive-ui-muted);
  --drive-portal-border: var(--drive-ui-border);
  --drive-market-surface: var(--drive-ui-canvas);
  --drive-market-panel: var(--drive-ui-surface);
  --drive-market-card: var(--drive-ui-surface);
  --drive-market-ink: var(--drive-ui-heading);
  --drive-market-muted: var(--drive-ui-muted);
  --drive-market-border: var(--drive-ui-border);
  --drive-layout-bg: var(--drive-ui-canvas);
  --drive-layout-card: var(--drive-ui-surface);
  --drive-layout-ink: var(--drive-ui-heading);
  --drive-layout-muted: var(--drive-ui-muted);
  --drive-layout-border: var(--drive-ui-border);
}

html[data-drive-theme="dark"] body.drive-ma-site {
  --drive-ui-canvas: #080e18;
  --drive-ui-surface: #111a28;
  --drive-ui-surface-soft: #0d1522;
  --drive-ui-surface-raised: #182438;
  --drive-ui-heading: #f7f9fc;
  --drive-ui-text: #d0d9e6;
  --drive-ui-muted: #a9b6c8;
  --drive-ui-border: #2d3c51;
  --drive-ui-border-strong: #48617e;
  --drive-ui-link: #91b7ff;
  --drive-ui-link-hover: #c2d6ff;
  --drive-ui-success-bg: #123c31;
  --drive-ui-success-text: #8ce6c4;
  --drive-ui-warning-bg: #34230d;
  --drive-ui-warning-text: #ffd994;
  --drive-ui-focus: #91b7ff;
  --drive-ui-shadow: 0 16px 42px rgb(0 0 0 / 32%);
  --drive-color-primary: var(--drive-ui-link);
  --drive-color-primary-strong: var(--drive-ui-link-hover);
  --drive-color-accent: #ff8a68;
  --drive-color-surface: var(--drive-ui-surface);
  --drive-color-surface-muted: var(--drive-ui-surface-soft);
  --drive-color-ink: var(--drive-ui-heading);
  --drive-color-heading: var(--drive-ui-heading);
  --drive-color-body: var(--drive-ui-text);
  --drive-color-muted: var(--drive-ui-muted);
  --drive-color-border: var(--drive-ui-border);
  --drive-portal-bg: var(--drive-ui-canvas);
  --drive-portal-panel: var(--drive-ui-surface);
  --drive-portal-ink: var(--drive-ui-heading);
  --drive-portal-muted: var(--drive-ui-muted);
  --drive-portal-border: var(--drive-ui-border);
  --drive-market-surface: var(--drive-ui-canvas);
  --drive-market-panel: var(--drive-ui-surface);
  --drive-market-card: var(--drive-ui-surface);
  --drive-market-ink: var(--drive-ui-heading);
  --drive-market-muted: var(--drive-ui-muted);
  --drive-market-border: var(--drive-ui-border);
  --drive-layout-bg: var(--drive-ui-canvas);
  --drive-layout-card: var(--drive-ui-surface);
  --drive-layout-ink: var(--drive-ui-heading);
  --drive-layout-muted: var(--drive-ui-muted);
  --drive-layout-border: var(--drive-ui-border);
}

body.drive-ma-site {
  background: var(--drive-ui-canvas);
  color: var(--drive-ui-text);
}

.drive-ma-site :where(.site, .site-main) {
  color: var(--drive-ui-text);
}

.drive-ma-site :where(a, button, input, select, textarea, summary) {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.drive-ma-site :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--drive-ui-focus) !important;
  outline-offset: 3px;
}

.drive-ma-site :where(input, select, textarea) {
  accent-color: var(--drive-ui-accent);
}

/* Primary actions remain the same business color in both modes. */
.drive-ma-site :where(
  .drive-button--primary,
  .drive-search-form button,
  .drive-native-lead button[type="submit"],
  .drive-model-test-drive button[type="submit"]
) {
  background: var(--drive-ui-accent) !important;
  border-color: var(--drive-ui-accent) !important;
  color: var(--drive-ui-on-accent) !important;
}

.drive-ma-site :where(
  .drive-button--primary,
  .drive-search-form button,
  .drive-native-lead button[type="submit"],
  .drive-model-test-drive button[type="submit"]
):hover,
.drive-ma-site :where(
  .drive-button--primary,
  .drive-search-form button,
  .drive-native-lead button[type="submit"],
  .drive-model-test-drive button[type="submit"]
):focus-visible {
  background: var(--drive-ui-accent-hover) !important;
  border-color: var(--drive-ui-accent-hover) !important;
  color: var(--drive-ui-on-accent) !important;
}

/* Secondary actions use a real surface instead of inherited transparent colors. */
.drive-ma-site :where(.drive-button--secondary, .drive-button--ghost, .drive-compare-toggle) {
  background: var(--drive-ui-surface) !important;
  border-color: var(--drive-ui-border-strong) !important;
  color: var(--drive-ui-heading) !important;
}

.drive-ma-site :where(.drive-button--secondary, .drive-button--ghost, .drive-compare-toggle):hover,
.drive-ma-site .drive-compare-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--drive-ui-link) 12%, var(--drive-ui-surface)) !important;
  border-color: var(--drive-ui-link) !important;
  color: var(--drive-ui-link-hover) !important;
}

html[data-drive-theme="light"] .drive-ma-site :where(.drive-button--secondary, .drive-button--ghost, .drive-compare-toggle):hover,
html[data-drive-theme="light"] .drive-ma-site .drive-compare-toggle[aria-pressed="true"] {
  color: var(--drive-ui-link-hover) !important;
}

.drive-ma-site :where(button, .drive-button, .drive-compare-toggle)[disabled],
.drive-ma-site :where(.drive-button--disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: .58;
}

/* Stable, high-contrast comparator: it lives outside main and must own its colors. */
.drive-ma-site .drive-comparison-tray {
  background: #111c2e !important;
  border-color: #38506d !important;
  color: #f8fafc !important;
}

.drive-ma-site .drive-comparison-tray__count {
  background: #2563d9 !important;
  color: #fff !important;
}

.drive-ma-site .drive-comparison-tray__summary > div > strong {
  color: #fff !important;
}

.drive-ma-site .drive-comparison-tray__summary span {
  color: #bcc9d9 !important;
  opacity: 1;
}

.drive-ma-site .drive-comparison-tray__actions a {
  background: var(--drive-ui-accent) !important;
  border: 1px solid var(--drive-ui-accent) !important;
  color: #fff !important;
}

.drive-ma-site .drive-comparison-tray__actions a:hover,
.drive-ma-site .drive-comparison-tray__actions a:focus-visible {
  background: var(--drive-ui-accent-hover) !important;
  border-color: #ff9b7d !important;
  color: #fff !important;
}

.drive-ma-site .drive-comparison-tray__actions button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #d7e0eb !important;
}

.drive-ma-site .drive-comparison-tray__actions button:hover,
.drive-ma-site .drive-comparison-tray__actions button:focus-visible {
  background: rgb(255 255 255 / 10%) !important;
  border-color: rgb(255 255 255 / 22%) !important;
  color: #fff !important;
}

/* Shared surfaces and data presentation. */
html[data-drive-theme="dark"] .drive-ma-site :where(
  .drive-brand-block,
  .drive-card,
  .drive-filter-panel,
  .drive-model-panel,
  .drive-comparison-panel,
  .drive-community-model,
  .drive-commercial-formats,
  .drive-commercial-cta
) {
  background-color: var(--drive-ui-surface) !important;
  border-color: var(--drive-ui-border) !important;
  color: var(--drive-ui-text) !important;
}

html[data-drive-theme="dark"] .drive-ma-site .drive-brand-block {
  box-shadow: inset 0 0 0 1px var(--drive-ui-border);
}

html[data-drive-theme="dark"] .drive-ma-site :where(.drive-ad-slot__available, .drive-empty-state) {
  background: var(--drive-ui-surface-soft) !important;
  border-color: var(--drive-ui-border-strong) !important;
  color: var(--drive-ui-muted) !important;
}

html[data-drive-theme="dark"] .drive-ma-site :where(.drive-ad-slot__available strong, .drive-ad-slot__watermark) {
  color: var(--drive-ui-text) !important;
}

html[data-drive-theme="dark"] .drive-ma-site :where(.drive-ad-slot__available small, .drive-ad-slot__disclosure) {
  color: var(--drive-ui-muted) !important;
}

html[data-drive-theme="dark"] .drive-ma-site :where(th, thead td) {
  background: var(--drive-ui-surface-raised) !important;
  color: var(--drive-ui-heading) !important;
}

html[data-drive-theme="dark"] .drive-ma-site :where(td, tbody th) {
  background: var(--drive-ui-surface-soft);
  border-color: var(--drive-ui-border) !important;
  color: var(--drive-ui-text) !important;
}

html[data-drive-theme="dark"] .drive-ma-site tbody tr:nth-child(even) :where(td, th) {
  background: var(--drive-ui-surface) !important;
}

html[data-drive-theme="dark"] .drive-ma-site :where(input, select, textarea) {
  background: #0b1320 !important;
  border-color: var(--drive-ui-border-strong) !important;
  color: var(--drive-ui-heading) !important;
}

html[data-drive-theme="dark"] .drive-ma-site :where(input, textarea)::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

html[data-drive-theme="dark"] .drive-ma-site :where(.drive-availability, .drive-status--verified) {
  background: var(--drive-ui-success-bg) !important;
  border-color: #28745d !important;
  color: var(--drive-ui-success-text) !important;
}

html[data-drive-theme="dark"] .drive-ma-site .drive-native-lead__notice {
  background: var(--drive-ui-warning-bg) !important;
  border-color: #7d5820 !important;
  color: var(--drive-ui-warning-text) !important;
}

html[data-drive-theme="dark"] .drive-ma-site .drive-breadcrumbs a,
html[data-drive-theme="dark"] .drive-ma-site .drive-media-breadcrumbs a {
  color: var(--drive-ui-link) !important;
}

@media (prefers-reduced-motion: reduce) {
  .drive-ma-site :where(a, button, input, select, textarea, summary) {
    transition: none;
  }
}

@media (forced-colors: active) {
  .drive-ma-site .drive-comparison-tray,
  .drive-ma-site .drive-comparison-tray__actions a,
  .drive-ma-site :where(.drive-button, .drive-compare-toggle) {
    border: 1px solid ButtonText !important;
  }
}