/* Kohlrabi marketing site — night mode.
   Loaded on every page after the per-page stylesheet. Everything below is
   scoped to html.dark, so it is inert until the footer toggle adds the
   class (preference persists in localStorage as "cg-theme"). The variable
   swap carries every component that uses the site tokens; the rules after
   it cover the handful of surfaces with hardcoded light colors. */

html.dark {
  --paper: #151810;
  --paper-deep: #1c2115;
  --surface: #20261a;
  --ink: #edf1e3;
  --muted: #a6b098;
  --line: #2f3628;
  --line-strong: #525c46;
  --green: #8fce88;
  --green-deep: #b9e2b1;
  --green-soft: #26351f;
  --red: #e8928a;
  --warm: #e9a96d;
  --shadow: 0 22px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- theme toggle button (footer) ---------- */
.theme-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--line-strong); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .moon { display: block; }
.theme-toggle .sun { display: none; }
html.dark .theme-toggle .moon { display: none; }
html.dark .theme-toggle .sun { display: block; }
.footer-base .theme-toggle { width: 38px; height: 38px; border-radius: 11px; }

/* ---------- hardcoded light surfaces ---------- */
html.dark .site-nav {
  border-bottom-color: rgba(47, 54, 40, .9);
  background: rgba(21, 24, 16, .94);
}
html.dark .nav-links a { color: #d8ddcb; }
html.dark .hero::before {
  background: linear-gradient(180deg, #20261a 0%, #1a1f14 55%, #151810 100%);
}
html.dark .hero-copy > p { color: #c2c9b4; }
html.dark .button.primary,
html.dark .nav-cta,
html.dark .start-pill,
html.dark .set-check,
html.dark .pathway.training { color: #16210f; }
html.dark .button.secondary { border-color: var(--line-strong); }
html.dark .footer-col a { color: #c2c9b4; }
html.dark .cg-map-frame { background: var(--surface); }
html.dark .real-chart-card,
html.dark .real-map-card { background: var(--surface); border-color: var(--line); }
html.dark .hero-1rm-card { background: var(--surface); border-color: var(--line); }
html.dark .hero-1rm-card [data-cg-chart] svg > rect { fill: var(--surface); }
html.dark .real-chart-card .mock-card-head h3,
html.dark .real-map-card .mock-card-head h3,
html.dark .real-chart-card .chart-headline strong,
html.dark .hero-1rm-card .chart-headline strong { color: var(--ink); }
html.dark .real-chart-card .mock-card-head span,
html.dark .real-map-card .mock-card-head span,
html.dark .real-chart-card .chart-kicker,
html.dark .hero-1rm-card .chart-kicker { color: var(--muted); }
html.dark .mock-top { background: rgba(32, 38, 26, .94); }
html.dark .set-value,
html.dark .float-note { background: var(--surface); }
html.dark .ci-no { color: #e0a34e; }
html.dark ::selection { background: #3a522f; }