/* ============================================================================
 * theme.css — shared light/dark CSS variables.
 *
 * Loaded by every page (dashboard, customer profile, login). The page's own
 * <style> block uses these variables; this file just defines them.
 *
 * Status colors swap between light and dark per the palette Josh signed off
 * on. Add new tokens here (not in per-page styles) so light + dark stay
 * in lockstep.
 * ============================================================================ */

:root {
  --bg:        #eef1f5;
  --card:      #ffffff;
  --card-2:    #f8fafc;
  --text:      #0f1b2d;
  --muted:     #64748b;
  --label:     #475569;
  --border:    #e5e9f0;
  --border-strong: #cbd5e1;
  --action:    #f59e0b;
  --action-h:  #d97706;
  --action-ink:#1f2937;
  --hover-bg:  #f1f5fb;
  --shadow:    0 1px 2px rgba(15,27,45,0.04), 0 1px 3px rgba(15,27,45,0.08);
  --shadow-lift: 0 4px 12px rgba(15,27,45,0.10), 0 2px 4px rgba(15,27,45,0.05);
  --radius:    12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --error:     #dc2626;
  --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

  --st-new:        #378add;
  --st-demo:       #1d9e75;
  --st-called:     #ba7517;
  --st-interested: #639922;
  --st-closed:     #0f6e56;
  --st-lost:       #888780;
}

[data-theme="dark"] {
  --bg:        #0f1623;
  --card:      #1a2436;
  --card-2:    #222d42;
  --text:      #e8edf5;
  --muted:     #8a97ad;
  --label:     #94a3b8;
  --border:    #2a3548;
  --border-strong: #3a455c;
  --action:    #f59e0b;
  --action-h:  #fbbf24;
  --action-ink:#0a0e16;
  --hover-bg:  #222d42;
  --shadow:    0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.40);
  --shadow-lift: 0 6px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35);
  --error:     #f87171;

  --st-new:        #5ba3e8;
  --st-demo:       #5dcaa5;
  --st-called:     #ef9f27;
  --st-interested: #97c459;
  --st-closed:     #5dcaa5;
  --st-lost:       #888780;
}

/* Sun / moon icon swap — used by the theme-toggle button in the topbar.
 * Pages without a toggle (login) load this rule harmlessly. */
[data-theme="light"] .icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="dark"]  .icon-sun  { display: block; }