/* VOLK light / dark theme. Dark is the base design; light overrides live here.
   The inline script in each page's <head> sets data-theme before first paint. */

:root { color-scheme: dark; }

/* ── Theme toggle button ──────────────────────────────────────── */
.theme-toggle {
  order: 3;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: 10px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); background: var(--surface-2); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.nav-links { order: 2; margin-left: auto; }
.nav-toggle { order: 4; }
@media (max-width: 768px) {
  .theme-toggle { margin-left: auto; margin-right: 6px; }
}

/* ── Light theme tokens ───────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f9f9;
  --surface: #ffffff;
  --surface-2: #edf3f2;
  --accent: #0f7d74;
  --accent-hover: #0b655e;
  --glow-primary: 0 0 40px rgba(15, 125, 116, 0.12);
  --glow-primary-strong: 0 0 60px rgba(15, 125, 116, 0.2);
  --text: #0f1a19;
  --text-muted: #43524f;
  --text-dimmed: #5c6b68;
  --border: #d8e2e0;
  --border-light: #c2d0cd;
}

/* Hero "complete system" panel: a light engineering sheet in light mode. */
:root[data-theme="light"] .engineering-visual {
  border-color: var(--border);
  background: linear-gradient(145deg, #ffffff, #edf6f5);
  box-shadow: 0 24px 70px rgba(15, 26, 43, 0.10);
}
:root[data-theme="light"] .engineering-visual:hover { border-color: #94cbc4; box-shadow: 0 28px 90px rgba(10, 80, 74, 0.16); }
:root[data-theme="light"] .visual-top,
:root[data-theme="light"] .visual-bottom { color: var(--text-muted); border-color: var(--border); }
:root[data-theme="light"] .live-dot { color: var(--accent); }
:root[data-theme="light"] .board { background-image: radial-gradient(rgba(15, 125, 116, 0.22) 1px, transparent 1px); }
:root[data-theme="light"] .engineering-visual[data-mode="firmware"] .board { background-color: #e9f3f6; }
:root[data-theme="light"] .chip {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 9px #dff1ee, 0 0 0 10px #9fd3cd, 0 18px 40px rgba(15, 125, 116, 0.18);
}
:root[data-theme="light"] .engineering-visual[data-mode="validation"] .chip {
  box-shadow: 0 0 0 9px #e0f3ea, 0 0 0 10px #4fae8a, 0 18px 40px rgba(15, 125, 116, 0.18);
}
:root[data-theme="light"] .pin { background: #ffffff; color: #1f4e4a; border-color: #bfdcd8; }
:root[data-theme="light"] .system-mode { color: var(--text-muted); }
:root[data-theme="light"] .system-mode:hover,
:root[data-theme="light"] .system-mode.active { color: var(--text); background: rgba(15, 125, 116, 0.08); }
:root[data-theme="light"] .system-detail { background: #f2f7f6; }
:root[data-theme="light"] .orbit-board { --orbit-line: #9fd3cd; --orbit-link: #0f7d74; --orbit-glow: #6cd5c938; }
:root[data-theme="light"] .engineering-visual[data-mode="validation"] .orbit-board { --orbit-glow: #73c6a84d; }
:root[data-theme="light"] .orbit-node.is-active { color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 125, 116, 0.12), 0 8px 20px rgba(15, 125, 116, 0.18); }

/* ── Light theme: surfaces with hard-coded dark colours ─────────── */
:root[data-theme="light"] .nav { background: rgba(247, 249, 249, 0.92); }
:root[data-theme="light"] .dropdown-menu { box-shadow: 0 12px 32px rgba(15, 26, 43, 0.12); }
:root[data-theme="light"] .hero {
  background-image: radial-gradient(ellipse at 85% 40%, rgba(15, 125, 116, 0.12), transparent 55%);
}
:root[data-theme="light"] .hero::before {
  background: linear-gradient(90deg, transparent 49.8%, rgba(15, 125, 116, 0.06) 50%, transparent 50.2%);
  background-size: 80px 100%;
}
:root[data-theme="light"] .hero-label::before { box-shadow: 0 0 12px rgba(15, 125, 116, 0.5); }
:root[data-theme="light"] .expertise-rail { background: var(--surface); }
:root[data-theme="light"] .expertise-rail .container { color: var(--text-muted); }
:root[data-theme="light"] .service-card {
  background: linear-gradient(145deg, #ffffff, #edf5f4);
  box-shadow: 0 10px 30px rgba(15, 26, 43, 0.06);
}
:root[data-theme="light"] .process-section { background: #e2eeec; }
:root[data-theme="light"] .industries-strip,
:root[data-theme="light"] .page-header {
  background: radial-gradient(ellipse at right, rgba(15, 125, 116, 0.1), transparent 65%), var(--bg);
}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .nav-links .nav-cta { color: #fff !important; }
:root[data-theme="light"] .form-status.error { color: #b42318; }
:root[data-theme="light"] .form-status.success { color: #137a4a; }
:root[data-theme="light"] .industry-card:hover { box-shadow: 0 16px 40px rgba(15, 26, 43, 0.08); }

/* Motion components */
:root[data-theme="light"] .comet-source {
  background: linear-gradient(145deg, #ffffff, #e3f3f1);
  box-shadow: 0 0 30px rgba(15, 125, 116, 0.15);
}
:root[data-theme="light"] .comet-core { stroke: var(--accent); filter: none; }
:root[data-theme="light"] .comet-map .industry-tag::after { color: #fff; }
:root[data-theme="light"] .comet-map .industry-tag.is-flash { color: #fff; box-shadow: 0 6px 20px rgba(15, 125, 116, 0.28); }
:root[data-theme="light"] .comet-map .industry-tag.is-flash::after { background: #fff; color: var(--accent); }
:root[data-theme="light"] .comet-source.is-firing { animation-name: comet-fire-light; }
@keyframes comet-fire-light { 30% { box-shadow: 0 0 0 6px rgba(15, 125, 116, 0.15), 0 0 40px rgba(15, 125, 116, 0.3); } }