/* Optimal Drive — Cinematic Light V3: the Dark theme.
   Every rule is scoped to html[data-theme="dark"], so the approved Light theme is untouched (it has no data-theme).
   No inversion filters: photographs keep their colours; the logos switch to their light versions (v3.js).
   The yellow Business section stays yellow, with dark text, in both themes. */
html[data-theme="dark"] {
    color-scheme: dark;
    --v3d-bg: #101114;
    --v3d-surface: #17191c;
    --v3d-surface-2: #1e2125;
    --v3d-text: #f3f1ec;
    --v3d-soft: #a9aeb6;
    --v3d-line: rgba(255, 255, 255, .1);
    --v3d-line-strong: rgba(255, 255, 255, .2);
}
html[data-theme="dark"] body.v3 {
    background: var(--v3d-bg); color: var(--v3d-text);
    /* The shared tokens the light sections use for lines and secondary text. */
    --r2-line: var(--v3d-line); --r2-line-strong: var(--v3d-line-strong); --od-ink-soft: var(--v3d-soft);
}
/* The yellow section keeps the light tokens: dark text and lines on yellow. */
html[data-theme="dark"] .v3 .a-business { --r2-line: rgba(17, 22, 27, .1); --r2-line-strong: rgba(17, 22, 27, .18); --od-ink-soft: #4a5460; }

/* Header (already dark over the photographs): the solid bar takes the page's black. */
html[data-theme="dark"] .v3 .a-header.is-solid { background: rgba(16, 17, 20, .9); }

/* Hero: photographs with their own shade; the frame behind them matches the page. */
html[data-theme="dark"] .v3 .r2-hero { background: var(--v3d-bg); }

/* Common */
html[data-theme="dark"] .v3 .a-section .a-btn-line { border-color: var(--v3d-line-strong); color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-section .a-btn-line:hover { border-color: var(--od-yellow); color: var(--od-yellow); }
html[data-theme="dark"] .v3 .a-section .a-btn-yellow:hover { background: #fff; color: var(--od-ink); }

/* 01 · Brands */
html[data-theme="dark"] .v3 .a-brand { background: var(--v3d-bg); }
html[data-theme="dark"] .v3 .a-brand.has-media:hover .a-brand-logo img, html[data-theme="dark"] .v3 .a-brand.has-media:focus-within .a-brand-logo img { filter: none; }

/* 02 · Smart search */
html[data-theme="dark"] .v3 .a-count { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-pick select { color: var(--v3d-text); background-image: linear-gradient(45deg, transparent 50%, var(--od-yellow) 50%), linear-gradient(135deg, var(--od-yellow) 50%, transparent 50%); }
html[data-theme="dark"] .v3 .a-pick select option { background: var(--v3d-surface-2); color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-search input { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-search input::placeholder { color: rgba(243, 241, 236, .45); }
html[data-theme="dark"] .v3 .a-search input:focus { border-bottom-color: var(--od-yellow); }
html[data-theme="dark"] .v3 .a-reset:hover, html[data-theme="dark"] .v3 .a-empty button { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-chip span { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-poster { background: var(--v3d-surface); }
html[data-theme="dark"] .v3 .a-poster-media.is-cutout { background: radial-gradient(ellipse at 50% 70%, #2a2e34 0%, var(--v3d-surface) 72%); }
html[data-theme="dark"] .v3 .a-poster-media.is-cutout img { filter: drop-shadow(0 26px 20px rgba(0, 0, 0, .5)); }
html[data-theme="dark"] .v3 .a-poster-media.is-soon { background: repeating-linear-gradient(135deg, var(--v3d-surface) 0 14px, var(--v3d-surface-2) 14px 15px); }
html[data-theme="dark"] .v3 .a-poster:not(.is-photo) .a-poster-copy, html[data-theme="dark"] .v3 .a-poster:not(.is-photo) .a-poster-cta { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-poster:not(.is-photo) .a-poster-cta { color: var(--od-yellow); }
html[data-theme="dark"] .v3 .a-poster-tag { background: var(--v3d-surface-2); color: var(--v3d-text); border-color: var(--v3d-line-strong); }

/* 03 · New arrivals */
html[data-theme="dark"] .v3 .a-premiere { background: var(--v3d-surface); }

/* 04 · Offers */
html[data-theme="dark"] .v3 .a-offers { background: var(--v3d-bg); }
html[data-theme="dark"] .v3 .a-offer:hover h3 { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-offer-thumb { background: var(--v3d-surface); }

/* 05 · Why — the photograph veiled in the page's black; the numbers in yellow. */
html[data-theme="dark"] .v3 .a-why-media::after { background: linear-gradient(90deg, var(--v3d-bg) 0%, rgba(16, 17, 20, .68) 100%); }
html[data-theme="dark"] .v3 .a-why-steps span { color: var(--od-yellow); background: none; }

/* 07 · Test drive: unchanged (photograph with its own shade). */
html[data-theme="dark"] .v3 .a-drive { background: var(--v3d-bg); }

/* 08 · Service & After Sales, 09 · Blog */
html[data-theme="dark"] .v3 .a2-service { background: var(--v3d-surface); }
html[data-theme="dark"] .v3 .a2-service-no { color: var(--od-ink); }
html[data-theme="dark"] .v3 .a2-service:hover { box-shadow: 0 26px 44px -30px rgba(0, 0, 0, .9); }

/* 10 · Contact */
html[data-theme="dark"] .v3 .c2-contact-card { background: var(--v3d-surface); }
html[data-theme="dark"] .v3 .c2-contact-card a, html[data-theme="dark"] .v3 .c2-contact-card strong { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .c2-copy { background: rgba(255, 255, 255, .1); color: var(--v3d-text); }
html[data-theme="dark"] .v3 .c2-copy.is-done { background: var(--od-yellow); color: var(--od-ink); }
html[data-theme="dark"] .v3 .c2-map { background: var(--v3d-surface); }
html[data-theme="dark"] .v3 .c2-map-art::before { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .v3 .c2-pin { background: var(--v3d-text); }
html[data-theme="dark"] .v3 .c2-map-card { background: var(--v3d-surface-2); color: var(--v3d-text); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }

/* Footer */
html[data-theme="dark"] .v3 .a-footer { background: #0c0d0f; color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-footer-cols h3 { color: var(--v3d-text); }
html[data-theme="dark"] .v3 .a-footer-cols a:hover { color: var(--v3d-text); }

/* The theme switch (footer) — both themes. */
.v3-theme-row { display: flex; justify-content: flex-end; padding-top: 18px; }
.v3-theme { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--r2-line-strong); border-radius: 999px; }
.v3-theme button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--od-ink-soft); font: 600 11px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s; }
.v3-theme button svg { width: 14px; height: 14px; flex: none; }
.v3-theme button:hover { color: var(--od-ink); }
.v3-theme button[aria-pressed="true"] { background: var(--od-yellow); color: var(--od-ink); }
html[data-theme="dark"] .v3-theme button:hover { color: var(--v3d-text); }
html[data-theme="dark"] .v3-theme button[aria-pressed="true"] { color: var(--od-ink); }
@media (max-width: 640px) { .v3-theme-row { justify-content: flex-start; } }