/* SellerPulse Design-Tokens — einzige Quelle für Farben, Radien, Schatten, Z-Ebenen.
   Verbindliche Werte und Einsatzregeln: docs/design-system.md (Abschnitt 1).
   Light-Mode schaltet ausschließlich diese Variablen um — keine neuen
   html.light-mode-Selektoren mehr anlegen. */

:root {
  /* Farben (Dunkel = Standard) */
  --sp-bg: #171D2B;            --sp-bg-rgb: 23 29 43;
  --sp-panel: #202737;         --sp-panel-rgb: 32 39 55;
  --sp-panel2: #2A3142;        --sp-panel2-rgb: 42 49 66;
  --sp-border: #353F54;        --sp-border-rgb: 53 63 84;
  --sp-border-strong: #42506B;
  --sp-text: #F2F5F8;          --sp-text-rgb: 242 245 248;
  --sp-muted: #94A1B5;         --sp-muted-rgb: 148 161 181;
  --sp-accent: #3C83F6;        --sp-accent-rgb: 60 131 246;
  --sp-accent-hover: #5B98F8;
  --sp-accent2: #8B5CF6;       --sp-accent2-rgb: 139 92 246;
  --sp-ok: #22C55E;            --sp-ok-rgb: 34 197 94;
  --sp-warn: #F59E0B;          --sp-warn-rgb: 245 158 11;
  --sp-bad: #EF4444;           --sp-bad-rgb: 239 68 68;
  --sp-bad-hover: #DC2626;
  --sp-hover: rgba(42, 49, 66, 0.4);
  /* Papierfläche: Vorschau von Inhalten, die auf Papier oder in einer E-Mail
     landen (Beleg-Logo). Bewusst in beiden Themes weiß — die Vorschau zeigt
     das Ziel, nicht die App. */
  --sp-paper: #FFFFFF;    --sp-paper-fg: #111827;
  /* Navigationsschrift: eine eigene Helligkeitsstufe zwischen muted und text —
     Kopfzeile, Menues, Mobil-Filterschalter. */
  --sp-nav-fg: #C8D2DC;
  /* Scrollbalken (nur WebKit) */
  --sp-scrollbar: #353F54;
  --sp-scrollbar-hover: #3E4A63;
  /* Schattenfarbe als Tripel: im Dunkeln Schwarz, im Hellen Schieferblau.
     Die Deckkraft setzt jede Regel selbst. */
  --sp-shadow-rgb: 0 0 0;

  /* Radien */
  --sp-radius-badge: 6px;   /* Badges, Chips */
  --sp-radius-btn: 8px;     /* Buttons, Icon-Buttons */
  --sp-radius-input: 12px;  /* Inputs, Selects, Zeilenkarten, Toasts */
  --sp-radius-panel: 16px;  /* Panels, Modals, Tabellen-Wrapper */

  /* Schatten (nur schwebende Elemente: Modal, Toast, Dropdown, Tooltip) */
  --sp-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Z-Ebenen */
  --sp-z-topbar: 40;
  --sp-z-dropdown: 60;
  --sp-z-modal: 70;
  --sp-z-lightbox: 75;      /* Foto-Betrachter – liegt ueber einem Modal */
  --sp-z-toast: 80;
}

html.light-mode {
  --sp-bg: #F6F7F9;            --sp-bg-rgb: 246 247 249;
  --sp-panel: #FFFFFF;         --sp-panel-rgb: 255 255 255;
  --sp-panel2: #F1F5F9;        --sp-panel2-rgb: 241 245 249;
  --sp-border: #E2E8F0;        --sp-border-rgb: 226 232 240;
  --sp-border-strong: #CBD5E1;
  --sp-text: #111827;          --sp-text-rgb: 17 24 39;
  --sp-muted: #64748B;         --sp-muted-rgb: 100 116 139;
  --sp-accent: #3C83F6;        --sp-accent-rgb: 60 131 246;
  --sp-accent-hover: #2563EB;
  --sp-accent2: #8B5CF6;       --sp-accent2-rgb: 139 92 246;
  --sp-ok: #16A34A;            --sp-ok-rgb: 22 163 74;
  --sp-warn: #D97706;          --sp-warn-rgb: 217 119 6;
  --sp-bad: #DC2626;           --sp-bad-rgb: 220 38 38;
  --sp-bad-hover: #B91C1C;
  --sp-hover: #F8FAFC;
  --sp-paper: #FFFFFF;    --sp-paper-fg: #111827;
  --sp-nav-fg: #4B5563;
  --sp-scrollbar: #CBD5E1;
  --sp-scrollbar-hover: #94A3B8;
  --sp-shadow-rgb: 15 23 42;

  --sp-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.12);
}