/* ── Loop CRM – Design Tokens ─────────────────────────────────── */

:root {
  /* Brand palette */
  --color-navy:       #010586;
  --color-primary:    #1047be;
  --color-mid-blue:   #4771cd;
  --color-sky:        #7cc9ea;
  --color-teal:       #5acec1;
  --color-red:        #f73d3d;

  /* Semantic – light mode */
  --bg:               #f4f6fb;
  --bg-surface:       #ffffff;
  --bg-surface-2:     #eef1f8;
  --bg-sidebar:       #010586;
  --bg-sidebar-item:  rgba(255,255,255,0.06);
  --bg-sidebar-hover: rgba(255,255,255,0.12);
  --bg-sidebar-active:rgba(90,206,193,0.18);

  --text-primary:     #0d1730;
  --text-secondary:   #4b5a7a;
  --text-muted:       #8a97b8;
  --text-sidebar:     rgba(255,255,255,0.75);
  --text-sidebar-active: #5acec1;

  --border:           #dce2f0;
  --border-strong:    #c0cce8;

  --accent:           var(--color-teal);
  --accent-secondary: var(--color-sky);

  /* Actions */
  --btn-primary-bg:   var(--color-primary);
  --btn-primary-text: #ffffff;
  --btn-primary-hover:#0e3da3;

  --btn-secondary-bg: var(--bg-surface-2);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-hover: var(--border-strong);

  --btn-danger-bg:    var(--color-red);
  --btn-danger-text:  #ffffff;
  --btn-danger-hover: #d42f2f;

  /* Status chips */
  --status-prospekt-bg:   #e8f0ff;
  --status-prospekt-text: #1047be;
  --status-aktiv-bg:      #d4f7f3;
  --status-aktiv-text:    #1a8a7e;
  --status-inaktiv-bg:    #ebebeb;
  --status-inaktiv-text:  #666;
  --status-pause-bg:      #fff4d4;
  --status-pause-text:    #956400;
  --status-tapt-bg:       #ffe5e5;
  --status-tapt-text:     #c02020;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(1,5,134,0.08);
  --shadow-md:   0 4px 16px rgba(1,5,134,0.10);
  --shadow-lg:   0 8px 32px rgba(1,5,134,0.14);
  --shadow-card: 0 2px 8px rgba(1,5,134,0.07), 0 0 0 1px var(--border);

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill:999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;

  /* Typography */
  --font-ui:      'DM Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'Syne', 'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* Layout */
  --sidebar-width: 224px;
  --navbar-height: 56px;
  --transition: 150ms ease;
}

/* ── Dark mode ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:               #080d1f;
  --bg-surface:       #0e1530;
  --bg-surface-2:     #141c3a;
  --bg-sidebar:       #06094a;
  --bg-sidebar-item:  rgba(255,255,255,0.04);
  --bg-sidebar-hover: rgba(255,255,255,0.09);
  --bg-sidebar-active:rgba(90,206,193,0.14);

  --text-primary:     #e8eeff;
  --text-secondary:   #8fa0cc;
  --text-muted:       #4d5f8a;

  --border:           #1e2a4a;
  --border-strong:    #2a3860;

  --btn-secondary-bg:   #141c3a;
  --btn-secondary-text: #e8eeff;
  --btn-secondary-hover:#1e2a4a;

  --status-prospekt-bg:   #0e1a40;
  --status-prospekt-text: #7cc9ea;
  --status-aktiv-bg:      #0a2420;
  --status-aktiv-text:    #5acec1;
  --status-inaktiv-bg:    #1a1a2e;
  --status-inaktiv-text:  #666;
  --status-pause-bg:      #2a1e00;
  --status-pause-text:    #f0b840;
  --status-tapt-bg:       #2a0a0a;
  --status-tapt-text:     #f73d3d;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px var(--border);
}