/* ============================================================
   RACETUNE — light theme variant (v3 / v3a / v3b)
   Self-contained: blue accents (from the original logo) + light
   surfaces. The dyno panel and footer stay dark as contrast
   anchors. Load AFTER style.css.

   Every rule is scoped to html:not([data-theme="dark"]) so a
   page can flip to the base dark theme by setting
   <html data-theme="dark"> (see js/theme.js).
   ============================================================ */

/* HP Tuners blue: darker on light surfaces for contrast,
   original brand tone on the dark footer */
html:not([data-theme="dark"]) .hp { color: #0089cf; }
html:not([data-theme="dark"]) .site-footer .hp { color: #00a7ea; }

html:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #f4f5f8;
  --bg-2: #eceef3;
  --surface: #ffffff;
  --surface-2: #f0f1f5;
  --line: rgba(15, 20, 50, 0.1);
  --line-strong: rgba(15, 20, 50, 0.22);
  --text: #171a24;
  --muted: #59606f;
  --red: #3245b8;          /* accent base */
  --red-bright: #2447d8;   /* accent bright — darker than dark-theme variant for contrast on white */
}

/* dark mode keeps the blue accents (base dark theme is red)
   and lifts the backgrounds ~15% from near-black to soft dark gray */
html[data-theme="dark"] {
  color-scheme: dark;
  --red: #3245b8;
  --red-bright: #5b7bff;
  --bg: #15171c;
  --bg-2: #1c1f26;
  --surface: #21242c;
  --surface-2: #272c35;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --muted: #a0a6b1;
}
html[data-theme="dark"] body::before {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 6px),
    radial-gradient(1200px 600px at 80% -10%, rgba(50, 69, 184, 0.12), transparent 60%),
    var(--bg);
}
html[data-theme="dark"] .site-header.scrolled,
html[data-theme="dark"] .site-header.nav-open {
  background: rgba(21, 23, 28, 0.88);
}
@media (max-width: 1060px) {
  html[data-theme="dark"] .site-nav { background: rgba(21, 23, 28, 0.97); }
}
html[data-theme="dark"] .site-footer { background: #131519; }
html[data-theme="dark"] .cta-band::before { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07); }
/* the dark theme uses blue + yellow only: replace the base red leftovers */
html[data-theme="dark"] .step::before { -webkit-text-stroke: 1.5px rgba(251, 233, 27, 0.55); }
html[data-theme="dark"] .marquee-track > span::after { color: rgba(251, 233, 27, 0.5); }
html[data-theme="dark"] .page-hero::before { background: radial-gradient(700px 360px at 80% 0%, rgba(91, 123, 255, 0.12), transparent 65%); }
html[data-theme="dark"] .prose a { border-bottom-color: rgba(91, 123, 255, 0.4); }
html[data-theme="dark"] .prose a:hover { border-bottom-color: var(--red-bright); }
html[data-theme="dark"] .member::after { border-color: transparent transparent rgba(91, 123, 255, 0.6) transparent; }
html[data-theme="dark"] .bar.tuned i { box-shadow: 0 0 14px rgba(91, 123, 255, 0.45); }

/* atmosphere: light paper instead of carbon */
html:not([data-theme="dark"]) body::before {
  background:
    repeating-linear-gradient(45deg, rgba(20, 30, 80, 0.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(20, 30, 80, 0.012) 0 2px, transparent 2px 6px),
    radial-gradient(1200px 600px at 80% -10%, rgba(50, 69, 184, 0.08), transparent 60%),
    var(--bg);
}
html:not([data-theme="dark"]) body::after { opacity: 0.25; }

/* ---------- header ---------- */
html:not([data-theme="dark"]) .site-header.scrolled,
html:not([data-theme="dark"]) .site-header.nav-open {
  background: rgba(247, 248, 251, 0.88);
}
html:not([data-theme="dark"]) .site-nav a:hover { color: #0a0d18; }
html:not([data-theme="dark"]) .site-nav a[aria-current="page"] { color: #0a0d18; }
html:not([data-theme="dark"]) .breadcrumbs a:hover { color: #0a0d18; }
html:not([data-theme="dark"]) .nav-toggle i,
html:not([data-theme="dark"]) .nav-toggle i::before,
html:not([data-theme="dark"]) .nav-toggle i::after { background: #171a24; }
html:not([data-theme="dark"]) .sub { border: 1px solid var(--line); border-top: 2px solid var(--red); box-shadow: 0 14px 34px rgba(15, 20, 50, 0.12); }
html:not([data-theme="dark"]) .sub a:hover { background: rgba(50, 69, 184, 0.08); }
@media (max-width: 1060px) {
  html:not([data-theme="dark"]) .site-nav { background: rgba(247, 248, 251, 0.97); }
  /* opaque while the menu is open — the header no longer blurs (see style.css) */
  html:not([data-theme="dark"]) .site-header.nav-open { background: #f7f8fb; }
  html[data-theme="dark"] .site-header.nav-open { background: #15171c; }
}

/* ---------- hero ---------- */
html:not([data-theme="dark"]) .hero {
  background-image:
    linear-gradient(rgba(20, 30, 80, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 30, 80, 0.05) 1px, transparent 1px);
}
html:not([data-theme="dark"]) .hero::before {
  background: radial-gradient(900px 480px at 18% 30%, rgba(50, 69, 184, 0.1), transparent 65%);
}
html:not([data-theme="dark"]) .page-hero {
  background-image:
    linear-gradient(rgba(20, 30, 80, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 30, 80, 0.04) 1px, transparent 1px);
}
html:not([data-theme="dark"]) .page-hero::before {
  background: radial-gradient(700px 360px at 80% 0%, rgba(50, 69, 184, 0.09), transparent 65%);
}

/* ---------- dyno panel stays dark (instrument screen) ---------- */
html:not([data-theme="dark"]) .dyno {
  --line: rgba(255, 255, 255, 0.08);
  --muted: #9aa1ab;
  background: #101216;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(15, 20, 50, 0.25);
}
html:not([data-theme="dark"]) .dyno .curve-hp { stroke: #5b7bff; filter: drop-shadow(0 0 8px rgba(91, 123, 255, 0.75)); }

/* ---------- components ---------- */
html:not([data-theme="dark"]) .stat::before { background: var(--red); }
html:not([data-theme="dark"]) .marquee-track > span { color: rgba(15, 20, 50, 0.28); }
html:not([data-theme="dark"]) .marquee-track > span:hover { color: var(--red-bright); }
html:not([data-theme="dark"]) .marquee-track > span::after { color: rgba(50, 69, 184, 0.45); }
html:not([data-theme="dark"]) .marquee-track > span .hp { color: inherit; }

html:not([data-theme="dark"]) .card { box-shadow: 0 2px 10px rgba(15, 20, 50, 0.04); }
html:not([data-theme="dark"]) .card:hover { box-shadow: 0 18px 40px rgba(15, 20, 50, 0.12); }

html:not([data-theme="dark"]) .band,
html[data-theme="dark"] .band {
  background: linear-gradient(120deg, #20255f, #2c3691 55%, #3a4cc9);
}
html:not([data-theme="dark"]) .band .lead { color: rgba(255, 255, 255, 0.85); }
html:not([data-theme="dark"]) .band .btn { background: #fff; color: #171a24; }
html:not([data-theme="dark"]) .band .btn:hover { background: var(--yellow); }

html:not([data-theme="dark"]) .step::before { -webkit-text-stroke: 1.5px rgba(50, 69, 184, 0.5); }

html:not([data-theme="dark"]) .prose strong { color: #0a0d18; }
html:not([data-theme="dark"]) .note { background: rgba(251, 233, 27, 0.16); }

html:not([data-theme="dark"]) td.price { color: var(--red-bright); }
html:not([data-theme="dark"]) .gain-row .delta { color: var(--red-bright); }
html:not([data-theme="dark"]) .calc::before,
html:not([data-theme="dark"]) .form::before { background: linear-gradient(90deg, #20255f, #3a4cc9); }
html:not([data-theme="dark"]) .bar.stock i { background: #c4c9d4; }
html:not([data-theme="dark"]) .calc-vals b { color: var(--text); }
html:not([data-theme="dark"]) .calc-vals .tuned-val b { color: var(--red-bright); }
html:not([data-theme="dark"]) .bar.tuned i { background: linear-gradient(90deg, var(--red), #4d6df0); box-shadow: 0 0 14px rgba(50, 69, 184, 0.4); }
html:not([data-theme="dark"]) .form-status { color: #8a6d00; }
html:not([data-theme="dark"]) .member::after { border-color: transparent transparent rgba(50, 69, 184, 0.55) transparent; }
html:not([data-theme="dark"]) tbody tr:hover { background: rgba(50, 69, 184, 0.06); }
html:not([data-theme="dark"]) .socials a:hover { background: rgba(50, 69, 184, 0.12); }
html:not([data-theme="dark"]) .map-frame { filter: none; }

html:not([data-theme="dark"]) .cta-band::before { -webkit-text-stroke: 1px rgba(15, 20, 50, 0.07); }

/* ---------- footer stays dark ---------- */
html:not([data-theme="dark"]) .site-footer {
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --muted: #9aa1ab;
  --text: #eceef0;
  color: #eceef0;
  background: #0c0e14;
  border-top: none;
}
html:not([data-theme="dark"]) .site-footer .socials svg { fill: #eceef0; }
html:not([data-theme="dark"]) .site-footer a:hover { color: #fff; }

/* ---------- logo image ---------- */
.brand-logo::before { display: none; }
.brand-logo img { height: 36px; width: auto; }
.site-footer .brand-logo img { height: 32px; }
@media (max-width: 640px) {
  .brand-logo img { height: 30px; }
}

/* light/dark logo swap: pages with a theme toggle carry both imgs */
.brand-logo .logo-dark { display: none; }
html[data-theme="dark"] .brand-logo .logo-light { display: none; }
html[data-theme="dark"] .brand-logo .logo-dark { display: block; }

/* ---------- theme toggle button ---------- */
.theme-toggle {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { border-color: var(--red-bright); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }

@media (max-width: 1060px) {
  .theme-toggle { margin-left: auto; }
  .nav-toggle { margin-left: 12px; }
}