/* 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 .filter-chip.active,
html.dark .pathway.training { color: #16210f; }
html.dark .button.secondary { border-color: var(--line-strong); }
html.dark .footer-col a { color: #c2c9b4; }

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 .nav-links a.nav-cta.button.primary,
html.dark .nav-links a.nav-cta.button.primary:hover { color: #16210f; }
html.dark .resume-go { color: #16210f; }
html.dark .set-check.open { color: transparent; }
html.dark .wset-field { background: var(--surface); }
html.dark .progress-demo,
html.dark .cg-chart { background: var(--surface); border-color: var(--line); }
html.dark .progress-demo svg > rect,
html.dark .cg-chart svg > rect { fill: var(--surface); }

html.dark ::selection { background: #3a522f; }

/* Audit 2026-11: readable step numbers and CTA on the light-green dark accent; screenshots sit on the dark surface. */
html.dark .step-num{color:#151810}
html.dark .button.fcard-cta{color:#151810}
html.dark .shot{background:var(--surface)}

/* Owner review pass (2026-11): the app-mirror fragments (.ka,
   .demo-share, .appfrag) carry their own light token sets, so in dark
   mode they rendered as paper cards floating on the dark page. They
   now swap to the site's dark values. The share poster (.scard) is a
   faithful copy of the real (light) poster, so it stays paper and is
   mounted on a dark panel instead of floating. */
html.dark .ka {
  --a-bg: #151810;
  --a-surface: #20261a;
  --a-surface-2: #1c2115;
  --a-raised: #262d1e;
  --a-ink: #edf1e3;
  --a-strong: #ffffff;
  --a-muted: #a6b098;
  --a-meta: rgba(237, 241, 227, .72);
  --a-line: #2f3628;
  --a-line-strong: #525c46;
  --a-accent: #8fce88;
  --a-accent-hover: #b9e2b1;
  --a-soft: #26351f;
  --a-shadow-soft: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
html.dark .ka-btn { color: #16210f; }
html.dark .ka-set.done .ka-box .ka-tick { stroke: #16210f; }
html.dark .ka-blind-label { color: rgba(237, 241, 227, .85); }
html.dark .demo-share {
  --sh-surface: #20261a;
  --sh-surface-2: #1c2115;
  --sh-ink: #edf1e3;
  --sh-muted: #a6b098;
  --sh-line: #2f3628;
  --sh-accent: #8fce88;
  --sh-accent-soft: #26351f;
  --sh-on-accent: #16210f;
}
html.dark .appfrag { --on-accent: #16210f; }
html.dark .gs-frag .primary-button,
html.dark .gs-frag .start-inline-button,
html.dark .gs-card-num { color: #16210f; }
html.dark .gs-phone .complete-set[aria-pressed="true"] .tick,
html.dark .gs-frag .complete-set[aria-pressed="true"] .tick { stroke: #16210f; }
html.dark .cshot { background: var(--paper-deep); box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 48px rgba(0, 0, 0, .45); }
html.dark .collage-item { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .4); }
html.dark .cg-map [data-muscle] { stroke: rgba(237, 241, 227, .28); }
html.dark .cg-map .heat-0 { fill: #2b3423; }
html.dark .cg-map .heat-1 { fill: #2c4423; }
html.dark .cg-map .heat-2 { fill: #35652c; }
html.dark .cg-map .heat-3 { fill: #47873c; }
html.dark .cg-map .heat-4 { fill: #5da464; }
html.dark .cg-map .heat-5 { fill: #8fce88; }
html.dark .pr-tag { background: #3d2f14; border-color: #8a6414; color: #eed49f; }
html.dark .share-preview { background: var(--paper-deep); border: 1px solid var(--line); border-radius: 26px; padding: 16px; }
html.dark .scard { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
html.dark .phone { border-color: #3a4132; }
html.dark .ai-band { border: 1px solid var(--line); }

/* v4 /trainers: sticky join bar */
html.dark .join-bar{box-shadow:0 -10px 28px rgba(0,0,0,.4)}
html.dark .join-bar .button{border-color:var(--green);box-shadow:3px 3px 0 var(--green)}