/* ============================================================
   TOKENS.CSS — Design System (Mambagrün-Rebuild)
   Alle Variablen hier ändern → ganzes Design passt sich an
   ============================================================ */

:root {
  /* === SCHRIFTART (Arial) === */
  --font-base:         Arial, Helvetica, sans-serif;

  /* === FARBEN === */
  --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 */
  --clr-primary:        hsl(145, 100%, 45%);        /* #00e676 */
  --clr-primary-light:  hsl(145, 100%, 60%);
  --clr-primary-dark:   hsl(145, 100%, 35%);
  --clr-primary-glow:   rgba(0, 230, 118, 0.22);
  --clr-primary-subtle: rgba(0, 230, 118, 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);

  /* === 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 HEIGHTS & WIDTHS === */
  --sidebar-w: 260px;
  --nav-h:     70px;

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

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

  /* === TRANSITIONS & SHADOWS === */
  --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;
}

/* === HELLES DESIGN (LIGHT-MODE OVERRIDES) === */
body.light-mode {
  --clr-bg:            #f5f5f7; /* Helles Grau-Weiß */
  --clr-surface:       #ffffff; /* Reines Weiß */
  --clr-card:          #ffffff;
  --clr-card-hover:    #f5f5f7;
  --clr-border:        #e2e2e7;
  --clr-border-hover:  #c7c7cc;
  --clr-border-focus:  rgba(0, 230, 118, 0.6);

  /* Text */
  --clr-text:          #1d1d1f; /* Fast Schwarz */
  --clr-text-muted:    #636366;
  --clr-text-subtle:   #8e8e93;

  /* Primärfarbe leicht abgedunkelt für besseren Kontrast im Hellen */
  --clr-primary:        hsl(145, 100%, 30%);
  --clr-primary-light:  hsl(145, 100%, 40%);
  --clr-primary-dark:   hsl(145, 100%, 20%);
  --clr-primary-glow:   rgba(0, 180, 80, 0.15);
  --clr-primary-subtle: rgba(0, 180, 80, 0.05);

  --clr-success:       #00b050;
  --clr-success-light: #22d070;
  --clr-success-bg:    rgba(0, 176, 80, 0.1);

  /* Topbar-Hintergrund für Light-Mode */
  --clr-topbar-bg:      rgba(255, 255, 255, 0.88);

  /* Hover-Effekte für Tabellen und Aktivitäten */
  --clr-table-hover:    rgba(0, 0, 0, 0.02);
  --clr-activity-hover: rgba(0, 0, 0, 0.02);
}