/*
 * SignalWealth app theme: one neutral frame for the CRM, Settings and Studio, in light and dark.
 * The firm's brand colour is an ACCENT only (main button, selected item, links, chart bars), never a
 * background. sw-theme.js sets data-theme on <html> and the firm's contrast-safe accent shades.
 *
 * Load order on a page: sw-theme.js in <head> (before paint), the page's own <style>, then this file,
 * then the page's override file (e.g. crm-ui.css). Legacy variable names (--bg, --bg2, --text-dim...)
 * are mapped at the bottom so older page CSS picks up the theme without being rewritten.
 */
:root {
  color-scheme: light;
  --sw-bg: #F6F7F9;
  --sw-surface: #FFFFFF;
  --sw-surface-2: #F1F3F6;
  --sw-border: #E3E6EB;
  --sw-border-strong: #D3D8DF;
  --sw-text: #0E1420;
  --sw-text-2: #525C6B;
  --sw-text-3: #687180;
  --sw-overlay-1: rgba(14, 20, 32, .035);
  --sw-overlay-2: rgba(14, 20, 32, .07);
  --sw-scrim: rgba(14, 20, 32, .45);
  --sw-shadow-sm: 0 1px 2px rgba(14, 20, 32, .06);
  --sw-shadow-md: 0 4px 14px rgba(14, 20, 32, .08);
  --sw-shadow-lg: 0 18px 44px rgba(14, 20, 32, .16);
  --sw-ok: #15803D;   --sw-ok-soft: #E8F5EE;
  --sw-warn: #B45309; --sw-warn-soft: #FDF1E3;
  --sw-err: #C53030;  --sw-err-soft: #FCEBEB;

  /* Firm accent: sw-theme.js replaces these per firm (brand + contrast-safe inks). */
  --sw-brand: #2563EB;
  --sw-ink-l: #2563EB;
  --sw-ink-d: #7EA6FF;
  --sw-accent: var(--sw-ink-l);
  --sw-btn: var(--sw-ink-l);
  --sw-on-accent: #FFFFFF;
  --sw-accent-soft: rgba(37, 99, 235, .08);
  --sw-accent-soft: color-mix(in srgb, var(--sw-brand) 9%, transparent);
  --sw-accent-dim: color-mix(in srgb, var(--sw-accent) 45%, var(--sw-surface));
  --sw-focus: 0 0 0 3px color-mix(in srgb, var(--sw-brand) 28%, transparent);

  /* Stage colours: mid tones that read on light and dark. */
  --sw-stage-lead: #2F6FDB;
  --sw-stage-prospect: #B7791F;
  --sw-stage-qualified: #7C4DCC;
  --sw-stage-proposal: #C2570C;
  --sw-stage-won: #15803D;
  --sw-stage-lost: #C53030;
  --sw-stage-inactive: #64748B;

  --sw-font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sw-font-display: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --sw-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sw-radius-sm: 7px;
  --sw-radius: 10px;
  --sw-radius-lg: 14px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sw-bg: #0A0E15;
  --sw-surface: #111723;
  --sw-surface-2: #161E2B;
  --sw-border: #1F2735;
  --sw-border-strong: #2A3445;
  --sw-text: #E7EAF0;
  --sw-text-2: #A3ACBA;
  --sw-text-3: #8B95A5;
  --sw-overlay-1: rgba(255, 255, 255, .035);
  --sw-overlay-2: rgba(255, 255, 255, .07);
  --sw-scrim: rgba(0, 0, 0, .6);
  --sw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sw-shadow-md: 0 4px 14px rgba(0, 0, 0, .35);
  --sw-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
  --sw-ok: #4ADE80;   --sw-ok-soft: rgba(74, 222, 128, .12);
  --sw-warn: #FBBF24; --sw-warn-soft: rgba(251, 191, 36, .12);
  --sw-err: #F87171;  --sw-err-soft: rgba(248, 113, 113, .12);
  --sw-accent: var(--sw-ink-d);
  --sw-accent-soft: rgba(126, 166, 255, .14);
  --sw-accent-soft: color-mix(in srgb, var(--sw-brand) 18%, transparent);
  --sw-stage-lead: #6B9BFF;
  --sw-stage-prospect: #E0A84A;
  --sw-stage-qualified: #B18CFF;
  --sw-stage-proposal: #F0894A;
  --sw-stage-won: #4ADE80;
  --sw-stage-lost: #F87171;
  --sw-stage-inactive: #94A3B8;
}

/* ── Legacy names used by the CRM and Settings page CSS ── */
:root, :root[data-theme="dark"] {
  --bg: var(--sw-bg);
  --bg2: var(--sw-surface);
  --bg3: var(--sw-surface-2);
  --border: var(--sw-border);
  --border2: var(--sw-border-strong);
  --accent: var(--sw-accent);
  --accent-dim: var(--sw-accent-dim);
  --accent-soft: var(--sw-accent-soft);
  --text: var(--sw-text);
  --text-dim: var(--sw-text-2);
  --text-faint: var(--sw-text-3);
  --lead: var(--sw-stage-lead);
  --prospect: var(--sw-stage-prospect);
  --qualified: var(--sw-stage-qualified);
  --proposal: var(--sw-stage-proposal);
  --won: var(--sw-stage-won);
  --lost: var(--sw-stage-lost);
  --error: var(--sw-err);
  --error-soft: var(--sw-err-soft);
  --radius: var(--sw-radius);
  --shadow-sm: var(--sw-shadow-sm);
  --shadow-lg: var(--sw-shadow-lg);
  --font-mono: var(--sw-font-mono);
}

/* ── Base ── */
html { background: var(--sw-bg); }
body {
  font-family: var(--sw-font-ui);
  font-weight: 400;
  color: var(--sw-text);
  background: var(--sw-bg);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: none; box-shadow: var(--sw-focus); }
::selection { background: color-mix(in srgb, var(--sw-brand) 22%, transparent); }

/* Theme switch button (any page). */
.sw-theme-btn {
  width: 38px; height: 38px; border-radius: var(--sw-radius);
  border: 1px solid var(--sw-border); background: var(--sw-surface); color: var(--sw-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.sw-theme-btn:hover { color: var(--sw-text); border-color: var(--sw-border-strong); }
.sw-theme-btn svg { width: 18px; height: 18px; }
.sw-theme-btn .sw-i-sun { display: none; }
:root[data-theme="dark"] .sw-theme-btn .sw-i-sun { display: block; }
:root[data-theme="dark"] .sw-theme-btn .sw-i-moon { display: none; }