/* ─────────────────────────────────────────────────────────────────
   Dark theme — token overrides matched to the cartoon panel palette.

   Including this stylesheet on a page rebinds the FactoryLM design
   tokens (--fl-bg-50, --fl-card-0, etc.) to dark values. Existing
   selectors in _components.css and per-view <style> blocks that
   reference the tokens via var() flip to dark automatically — no
   per-component refactor required.

   Kept tiny on purpose. Page-specific layout/typography styles still
   live with their views; only the *palette* is shared here.

   Pages opted in: /, /cmms (and post-checkout /activated routes that
   render via the cmms view).
   ─────────────────────────────────────────────────────────────────*/

html {
  background: #09090c;   /* prevents viewport-edge white flash when body is shorter than viewport */
}
body {
  --fl-bg-50:     #09090c;   /* page background — matches cartoon bg */
  --fl-card-0:    #13141a;   /* cards / surfaces */
  --fl-rule-200:  rgba(255,255,255,.08);
  --fl-navy-900:  #ffffff;   /* primary headings / brand */
  --fl-navy-700:  #e8eaf0;
  --fl-ink-900:   #e8eaf0;   /* body text */
  --fl-muted-600: rgba(232,234,240,.55); /* muted text */
  --fl-orange-600:#a06800;   /* primary accent — darkened for WCAG AA contrast with white text (#f0a000 fails at 2.15:1; #a06800 passes at 4.54:1) */
  --fl-orange-500:#ffb547;
  --fl-sky-100:   #0d1320;   /* hero gradient top — deep navy fade */
  --fl-good:      #00d4aa;   /* lifted from FactoryLM green for dark contrast */
  --fl-bad:       #ff7a5c;   /* lifted from FactoryLM red for dark contrast */
  background: var(--fl-bg-50);
  color: var(--fl-ink-900);
  min-height: 100vh;
  margin: 0;
}

/* Safety / stop-card — lift border+text color for WCAG AA on dark card (#13141a).
   #B5341E on #13141a = 3.04:1 (fail). #e05535 on #13141a ≈ 4.55:1 (pass). */
body {
  --fl-safety-border: #e05535;
}

/* Compare columns hard-code light pink / green in _components.css for the
   light marketing theme. Override with red/teal-tinted dark surfaces so the
   ChatGPT-vs-MIRA contrast survives on the dark page. */
.fl-col-bad {
  background: rgba(255,122,92,0.07);
  border-color: rgba(255,122,92,0.28);
}
.fl-col-good {
  background: rgba(0,212,170,0.07);
  border-color: rgba(0,212,170,0.28);
}