/* Design tokens — the single source of truth for the prototype.
 * Change a value here and every flow updates.
 * See docs/DESIGN-SYSTEM.md for the rules.
 *
 * Note: additional tokens are still declared inline in index.html,
 * scoped to components. They get promoted into this file as each
 * flow is carved out into src/screens/.
 */

:root{--brand-blue:#004CE6;--brand-blue-strong:#196AFF;--brand-blue-soft:#EFF8FF;--sb-bg:#F8F8F8;--sb-text:#1A1A1A;--sb-text-dim:#5E5E5E;--sb-divider:#E8E8E6;--sb-selected:#E4E4E7;--sb-hover:#E4E4E7;--sb-left-accent:transparent;--sb-section-label:#8A8A88;--sb-accent:#1A1A1A;--credit-bg:#1C2838;--credit-border:#344054;--credit-pill-bg:#196AFF;--credit-add-border:#12B76A;--surface:#FFFFFF;--surface-alt:#F9FAFB;--surface-panel:#F2F4F7;--border:#E4E7EC;--border-strong:#D0D5DD;--text-primary:#101828;--text-secondary:#667085;--text-tertiary:#98A2B3;--success:#12B76A;--error:#F04438;--pink-new:#EE46BC;--shadow-100:0 1px 2px rgba(16,24,40,0.05);--shadow-card:0 1px 2px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.1)}

/* ── Dark values for the same tokens ─────────────────────────────────────────
   Until now these were defined once and never overridden, so dark mode was
   carried entirely by ~1,000 hand-written `body.theme-dark .thing{...}` rules.
   That made "use the design tokens" — which CONTRIBUTING tells every designer —
   quietly insufficient: token-based UI still came out white in dark mode, and
   every new screen needed a second pass to fix it.

   With the tokens flipping here, anything built on them is dark-ready by
   construction. The existing explicit overrides still win where they exist, so
   this is additive: nothing that already worked changes.

   Literal hex is still needed for colours that carry meaning rather than
   surface — a status green, a channel tint — and those need their own
   body.theme-dark rule. tools/check-dark-mode.py enforces that. */
body.theme-dark{
  --surface:#191A1C;
  --surface-alt:#1F2023;
  --surface-panel:#23262C;
  --border:#2A2D33;
  --border-strong:#3F4653;
  --text-primary:#F4F4F5;
  --text-secondary:#9BA1AC;
  --text-tertiary:#71767F;
  --brand-blue:#196AFF;
  --brand-blue-soft:#17233A;
  --shadow-100:0 1px 2px rgba(0,0,0,.4);
  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.6);
}