/* ============================================================
   TOKENS.CSS — Design System
   Frontend: Original Authentisches Dark Theme (Mambagrün #00e676)
   Backend (body.light-mode): Handwerklich sauberes Enterprise-Design (#779A20)
   ============================================================ */

:root {
  /* === SCHRIFTART FRONTEND (Arial) === */
  --font-base:         Arial, Helvetica, sans-serif;
  --font-mono:         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* === FARBEN FRONTEND (ORIGINAL DARK CYBERPUNK / MAMBAGRÜN) === */
  --clr-bg:            #0a0a0c; /* Tiefes Schwarz */
  --clr-surface:       #121216; /* Anthrazit */
  --clr-card:          #181822;
  --clr-card-hover:    #20202e;
  --clr-border:        rgba(255, 255, 255, 0.06);
  --clr-border-hover:  rgba(255, 255, 255, 0.12);
  --clr-border-focus:  rgba(0, 230, 118, 0.4);

  /* Primärfarbe — Mambagrün (#76B82A) */
  --clr-primary:        #76B82A;
  --clr-primary-light:  #8cb426;
  --clr-primary-dark:   #628216;
  --clr-primary-glow:   rgba(118, 184, 42, 0.22);
  --clr-primary-subtle: rgba(118, 184, 42, 0.08);

  /* Text */
  --clr-text:          #f3f4f6;
  --clr-text-muted:    #9ca3af;
  --clr-text-subtle:   #6b7280;

  /* Status Farben */
  --clr-success:       #00e676;
  --clr-success-light: #66ffa6;
  --clr-success-bg:    rgba(0, 230, 118, 0.1);

  --clr-warning:       #ffb300;
  --clr-warning-light: #ffe54c;
  --clr-warning-bg:    rgba(255, 179, 0, 0.1);

  --clr-error:         #f44336;
  --clr-error-light:   #ff7961;
  --clr-error-bg:      rgba(244, 67, 54, 0.1);

  --clr-topbar-bg:      rgba(10, 10, 12, 0.88);
  --clr-table-hover:    rgba(255, 255, 255, 0.03);
  --clr-activity-hover: rgba(255, 255, 255, 0.03);

  /* === ABSTÄNDE === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* === LAYOUT HÖHEN & BREITEN === */
  --sidebar-w: 260px;
  --nav-h:     70px;
  --max-w:     1600px;

  /* === BORDER RADIUS === */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* === SCHRIFTGRÖSSEN === */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-xxl:  24px;

  /* === TRANSITIONS & SCHATTEN === */
  --ease-fast:  0.15s ease;
  --ease-base:  0.25s ease;
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
}

/* === GLOBALE STYLES === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   BACKEND: HANDWERKLICH SAUBERES ENTERPRISE-DESIGN (LIGHT-MODE)
   Hochwertige, klare Schweizer/Österreichische ERP-Ästhetik
   Seriöses Slate-Fundament mit dezentem tempusfugit Mambagrün
   ============================================================ */
body.light-mode {
  color-scheme: light;

  /* Typografie (Clean System / Enterprise Font Stack) */
  --font-base:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:         ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Enterprise Light Farbpalette */
  --clr-bg:            #f8fafc; /* Mattes Slate-50: Ruhig, augenschonend, kein grelles Weiß */
  --clr-surface:       #ffffff; /* Reines Weiß für Cards, Sidebar & Topbar */
  --clr-card:          #ffffff;
  --clr-card-hover:    #f1f5f9; /* Slate-100 */
  --clr-border:        #e2e8f0; /* Slate-200: Feine, gestochen scharfe 1px Linien */
  --clr-border-hover:  #cbd5e1; /* Slate-300 */
  --clr-border-focus:  #779a20; /* Tempus Fugit Mambagrün */

  /* Primärfarbe — Authentisches Tempus Fugit Mambagrün (#779A20) */
  --clr-primary:        #779a20;
  --clr-primary-light:  #8cb426;
  --clr-primary-dark:   #628216;
  --clr-primary-glow:   rgba(119, 154, 32, 0.14);
  --clr-primary-subtle: rgba(119, 154, 32, 0.06);

  /* Typografie & Kontraste (Optimale Lesbarkeit) */
  --clr-text:          #0f172a; /* Slate-900: Tiefes Schiefergrau, gestochen scharf */
  --clr-text-muted:    #475569; /* Slate-600: Dezent für Metadaten & Labels */
  --clr-text-subtle:   #94a3b8; /* Slate-400 */

  /* Enterprise Statusfarben (Gediegen, nicht überzeichnet) */
  --clr-success:       #16a34a;
  --clr-success-light: #22c55e;
  --clr-success-bg:    #f0fdf4;

  --clr-warning:       #d97706;
  --clr-warning-light: #f59e0b;
  --clr-warning-bg:    #fffbeb;

  --clr-error:         #dc2626;
  --clr-error-light:   #ef4444;
  --clr-error-bg:      #fef2f2;

  --clr-topbar-bg:      rgba(255, 255, 255, 0.96);
  --clr-table-hover:    #f8fafc;
  --clr-activity-hover: #f8fafc;

  /* Saubere Radien für Handwerkliches Enterprise-Design */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   10px;

  /* Typografie Skala */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-xxl:  22px;

  /* Dezente Schatten */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
}

/* ============================================================
   BACKEND: DEZENTER DARK-MODE
   Für Benutzer, die im Dashboard manuell auf Dunkel umschalten
   ============================================================ */
body.dark-mode {
  color-scheme: dark;
  --clr-bg:            #0f172a; /* Slate-900 */
  --clr-surface:       #1e293b; /* Slate-800 */
  --clr-card:          #1e293b;
  --clr-card-hover:    #334155;
  --clr-border:        #334155;
  --clr-border-hover:  #475569;
  --clr-border-focus:  #779a20;

  --clr-primary:        #779a20;
  --clr-primary-light:  #8cb426;
  --clr-primary-dark:   #628216;
  --clr-primary-glow:   rgba(119, 154, 32, 0.2);
  --clr-primary-subtle: rgba(119, 154, 32, 0.12);

  --clr-text:          #f8fafc;
  --clr-text-muted:    #94a3b8;
  --clr-text-subtle:   #64748b;

  --clr-success-bg:    rgba(22, 163, 74, 0.18);
  --clr-warning-bg:    rgba(217, 119, 6, 0.18);
  --clr-error-bg:      rgba(220, 38, 38, 0.18);

  --clr-topbar-bg:      rgba(30, 41, 59, 0.94);
  --clr-table-hover:    #334155;
  --clr-activity-hover: #334155;
}