/* ============================================================
   Dark theme — token remap under html.theme-dark.
   Page goes true black; frame bands read as raised panels;
   product demo screens stay light (they're software, not page).
   Toggle: fixed moon/sun button, persisted in localStorage.
   ============================================================ */

html.theme-dark {
  color-scheme: dark;
  --white: #000000;              /* page goes true black */
  --gray-50: #17171b;            /* neutral elevation ramp off black */
  --gray-100: #0b0b0d;
  --gray-200: rgba(255,255,255,.09);
  --gray-300: rgba(255,255,255,.16);
  --gray-500: rgba(255,255,255,.42);
  --text-strong: #f2f6f8;
  --text-body: rgba(255,255,255,.8);
  --text-muted: rgba(255,255,255,.64);
  --text-subtle: rgba(255,255,255,.5);
  --blue-700: #4cbde3;           /* accent text flips to light azure */
  --blue-50: rgba(4,151,202,.14);
  --rule: rgba(76,189,227,.22);  /* azure hairlines read hotter on black */
  --rule-faint: rgba(76,189,227,.12);
  --wash: #0b0b0d;               /* section wash goes one step off black */
  --shadow-card: 0 24px 60px rgba(0,0,0,.5);
  --shadow-frame: 0 18px 44px rgba(0,0,0,.55);
}

/* ---------- One black across the page ----------
   In light mode the section bands are what separate one idea from the next:
   --gray-50 tint, --wash azure whisper. Remapped for dark they became three
   near-blacks stacked down the page (#000, #0b0b0d, #17171b), which reads as
   banding rather than rhythm — visible seams, not sections.

   Dark mode drops the band step entirely and lets the page be one true black.
   Component surfaces (cards, stair cards, inputs, buttons) keep their own
   elevation values below, so they still read against it; separation comes from
   those surfaces and the azure hairlines instead of from the backdrop. */
html.theme-dark .section--tint,
html.theme-dark .sol-stairs { background: var(--white); }

/* Surfaces with literal light values */
html.theme-dark .card,
html.theme-dark .pcard,
html.theme-dark .team-card,
html.theme-dark .logo-cell { background: #121215; }
html.theme-dark .stair-card {
  background: #121215;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4);
}
html.theme-dark .stair-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.55); }
html.theme-dark .stair-ghost {
  border-color: rgba(76,189,227,.3); border-top-color: #4cbde3;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(76,189,227,.11) 9px 10px),
    linear-gradient(180deg, rgba(76,189,227,.16), rgba(76,189,227,.04));
}
html.theme-dark .stairs { border-bottom-color: #4cbde3; }
html.theme-dark .stair-card { border-color: rgba(76,189,227,.35); }

/* Buttons & controls */
html.theme-dark .btn--outline { border-color: rgba(255,255,255,.45); }
html.theme-dark .btn--outline:hover { background: rgba(255,255,255,.08); }
html.theme-dark .btn--solid { border-color: rgba(255,255,255,.28); }
html.theme-dark .field input,
html.theme-dark .field textarea,
html.theme-dark .field select { background: #121215; color: var(--text-strong); border-color: rgba(255,255,255,.22); }

/* Detail fixes for literal colors */
html.theme-dark .fcell { border-top-color: #4cbde3; }
html.theme-dark .compare .lane--trad .seg { background: rgba(255,255,255,.1); color: var(--text-muted); }

/* Client logo strip: plate stays white in both themes so every card reads as
   one uniform strip instead of a mix of white/dark cards (mixed seal art —
   some baked-background, some ink-only — made a per-card dark flip look like
   random inconsistency rather than intentional theming). */
html.theme-dark .lx, html.theme-dark .oldsys { color-scheme: light; }

/* ---------- Theme toggle (present in both themes) ---------- */
.theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 150;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gray-300); background: var(--white); color: var(--text-strong);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .15s ease, border-color .15s ease;
}
.theme-toggle:hover { transform: scale(1.06); border-color: var(--blue-500); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .sun { display: none; }
html.theme-dark .theme-toggle .sun { display: block; }
html.theme-dark .theme-toggle .moon { display: none; }