/* Alternate dark version. Applies when <html data-theme="dark">, which assets/js/theme.js
   sets from ?theme=dark (dark.html is a shortcut). Loaded after styles.css and car.css.
   Three tones: page (deepest), bands (header, importing, contact), surfaces (cards, forms). */

:root[data-theme="dark"] {
  color-scheme: dark;
  --concrete: #0a0f17;   /* page */
  --ink: #111926;        /* bands */
  --ink-2: #1b2534;
  --paper: #172131;      /* cards and panels */
  --line: #2a3648;
  --text: #edf0f4;
  --slate: #9ca7b6;
  --blue: #8fb0ff;
  --blue-soft: #1a2b52;
  --crimson-text: #ff5c85;
}

[data-theme="dark"] .site-header { border-bottom: 1px solid var(--line); }

/* Hero: night photo of the same scene, fading into the dark page */
[data-theme="dark"] .hero-media img { content: url("../img/hero-night.jpg"); }
[data-theme="dark"] .hero-media::after {
  background: linear-gradient(0deg, rgba(10,15,23,.9) 0%, rgba(10,15,23,.35) 14%, rgba(10,15,23,0) 30%);
}
@media (max-width: 720px) { [data-theme="dark"] .hero-media::after { background: none; } }
[data-theme="dark"] .btn-outline { background: rgba(10,15,23,.6); border-color: #fff; color: #fff; }
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-ghost:hover { background: #fff; border-color: #fff; color: #0a0f17; }

/* Crimson as text needs more light on dark surfaces; buttons keep the brand crimson */
[data-theme="dark"] .match-count,
[data-theme="dark"] .form-status.error,
[data-theme="dark"] .buy-form .form-status.error,
[data-theme="dark"] .faq-list summary::after,
[data-theme="dark"] .parts-more:hover { color: var(--crimson-text); }

/* Form controls */
[data-theme="dark"] .filter-box select,
[data-theme="dark"] .sort select {
  background-color: var(--concrete);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23edf0f4' stroke-width='2'/%3E%3C/svg%3E");
}
[data-theme="dark"] .sort select,
[data-theme="dark"] .kw { background-color: var(--paper); }
[data-theme="dark"] .checker-form select,
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .buy-form input,
[data-theme="dark"] .buy-form textarea { background: var(--concrete); color: var(--text); }
[data-theme="dark"] .checker-form select:hover,
[data-theme="dark"] .contact-form input:hover,
[data-theme="dark"] .contact-form textarea:hover { border-color: #56637a; }

[data-theme="dark"] .view-toggle button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #0a0f17; }

/* Chips that sit on photos stay light so they read on any picture */
[data-theme="dark"] .badge,
[data-theme="dark"] .badge-inline { background: #fff; color: #121a26; }
[data-theme="dark"] .badge.soon,
[data-theme="dark"] .badge-inline.soon { background: #0a0f17; color: #fff; }
[data-theme="dark"] .gal-all { background: #fff; color: #121a26; }
[data-theme="dark"] .gal-all:hover { background: #0a0f17; color: #fff; }

/* Panels that sit on a band of similar tone get a hairline to hold their edge */
[data-theme="dark"] .checker,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .import-block { box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .buy { box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0,0,0,.7); }
[data-theme="dark"] .buy-bar { box-shadow: 0 -1px 0 var(--line); }

[data-theme="dark"] .checker .checker-result { color: #c3d3ff; }
[data-theme="dark"] .checker .checker-result.wait { background: #3a1422; color: #ff9db5; }
[data-theme="dark"] .import-status { background: var(--blue-soft); }

[data-theme="dark"] .sold-strip img,
[data-theme="dark"] .services-intro img { filter: brightness(.94); }