/* Dark mode (Nov 2026). On when <html data-theme="dark">, set by the script in the layout <head>
   from the visitor's choice (the 🌙/☀️ button) or, until they choose, their phone/computer setting.
   Kept out of theme.css so `sitectl update` can't wipe it. In dark mode --dark becomes the text colour
   and --light the raised-surface colour; places that used --dark as a background are put back below. */
html[data-theme="dark"] {
  color-scheme: dark;
  --dark: #e7e9ec;
  --light: #1e2328;
  --bg: #121518;
  --surface: #1a1e22;
  --deep: #0b0d0f;
  --ink-on-accent: #161a1d;
}
html[data-theme="dark"] body { background: var(--bg); }

/* surfaces that were white */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .car,
html[data-theme="dark"] .opt-plain .section,
html[data-theme="dark"] .vd-recalls details,
html[data-theme="dark"] .form input, html[data-theme="dark"] .form select, html[data-theme="dark"] .form textarea,
html[data-theme="dark"] .inv-tools input, html[data-theme="dark"] .inv-tools select { background: var(--surface); color: var(--dark); }
html[data-theme="dark"] .btn-light { background: var(--surface); color: var(--dark); }
html[data-theme="dark"] .form-sent { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
html[data-theme="dark"] .chip:has(input:checked) { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }

/* bands that used the dark brand colour as a background */
html[data-theme="dark"] .highlights,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .skip,
html[data-theme="dark"] .badge-360 { background: var(--deep); }
html[data-theme="dark"] .site-footer { border-top: 1px solid #2a3036; }

/* dark text on the yellow accent stays dark */
html[data-theme="dark"] .btn-accent,
html[data-theme="dark"] .car.is-sold .car-price::after { color: var(--ink-on-accent); }
html[data-theme="dark"] .car.is-sold .car-price::after { color: var(--dark); }

/* car pages */
html[data-theme="dark"] .vd-sold { background: #3a1714; color: #ffb4ab; }
html[data-theme="dark"] .vd-count.has { background: #3d2f0a; color: #ffd36b; }

/* credit application */
html[data-theme="dark"] .ca { --ca-surface: var(--surface); --ca-ink: var(--dark); --ca-muted: #a3acb6; --ca-line: #343b42; --ca-field: #22272c; }
html[data-theme="dark"] .ca-f.bad input, html[data-theme="dark"] .ca-f.bad select { background: #3a1a1a; }
html[data-theme="dark"] .ca-alert { background: #2a1616; }
html[data-theme="dark"] .ca-done { background: var(--surface); }
html[data-theme="dark"] .ca-done p { color: #a3acb6; }
html[data-theme="dark"] .ca-editnote { background: #3d2f0a; border-color: #6b5417; }
/* the signature pad stays white so the ink shows */

/* the 🌙 / ☀️ button */
.theme-toggle { background: none; border: 2px solid color-mix(in srgb, var(--dark) 25%, transparent); border-radius: 999px;
  width: 40px; height: 40px; display: inline-grid; place-items: center; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--dark); flex: none; }
.theme-toggle:hover { border-color: var(--accent); }