/* ==========================================================================
   MARKENTRIX OS — Design Tokens
   Basis: identische CI-Werte aus markentrix_kommandozentrale.html
   (Farben, Radien, Statusfarben, Kategorie-Palette). Nicht eigenmächtig
   verändert — hier nur strukturiert benannt und um ein 8px-Grid sowie
   Spacing-/Radius-/Shadow-/Z-Index-Skalen für die App-Shell ergänzt.
   ========================================================================== */

:root, :root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Marken-Oberflächen (unverändert aus Kommandozentrale) ---- */
  --surface-1:        #0B1020;  /* Graphite Navy — Boxen, Karten, Sektionen */
  --surface-2:         #10182C; /* eine Stufe heller, für verschachtelte Flächen */
  --surface-raised:    #141D33; /* Modals/Drawer/Popover */
  --page:              #05070B; /* Markentrix Black — Hauptflächen */
  --text-primary:      #FFFFFF;
  --text-secondary:    #B8C0CC;
  --text-muted:        #667085;
  --gridline:          rgba(184,192,204,0.12);
  --baseline:          rgba(184,192,204,0.30);
  --border:            rgba(255,255,255,0.08);
  --border-strong:     rgba(255,255,255,0.16);

  --status-good:       #0ca30c;
  --status-good-text:  #0ca30c;
  --status-critical:   #e66767;
  --status-warning:    #fab219;
  --status-info:       #28C7F7;

  --bar-hue:           #28C7F7;  /* Automation Cyan — Buttons, CTAs, Links */
  --bar-hue-track:     rgba(255,255,255,0.08);

  --cat-1: #8356e8; --cat-2: #1887a8; --cat-3: #c9526c; --cat-4: #596ce4;
  --cat-5: #0e8d7f; --cat-6: #a946c8; --cat-7: #af7a2c; --cat-8: #167ed0;
  --cat-neutral: #667085;

  --overlay: rgba(3,5,10,0.72);
  --focus-ring: 0 0 0 3px rgba(40,199,247,0.45);

  /* ---- Spacing (8px-Grid) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;

  /* ---- Radien ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* ---- Schatten (dezent, sparsam eingesetzt) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;

  /* ---- Z-Index-Skala ---- */
  --z-sidebar: 30; --z-topbar: 40; --z-dropdown: 50; --z-drawer: 60;
  --z-modal: 70; --z-toast: 80; --z-palette: 90;
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-1:        #FFFFFF;
  --surface-2:        #F1F4F8;
  --surface-raised:    #FFFFFF;
  --page:              #F8FAFC;
  --text-primary:      #05070B;
  --text-secondary:    #4A5568;
  --text-muted:        #667085;
  --gridline:          rgba(5,7,11,0.08);
  --baseline:          rgba(5,7,11,0.20);
  --border:            rgba(5,7,11,0.10);
  --border-strong:     rgba(5,7,11,0.18);

  --status-good:       #0ca30c;
  --status-good-text:  #006300;
  --status-critical:   #d03b3b;
  --status-warning:    #b9790a;
  --status-info:       #167ed0;

  --bar-hue:           #167ed0;
  --bar-hue-track:     rgba(5,7,11,0.08);

  --cat-1: #8356e8; --cat-2: #1887a8; --cat-3: #c9526c; --cat-4: #596ce4;
  --cat-5: #0e8d7f; --cat-6: #a946c8; --cat-7: #af7a2c; --cat-8: #167ed0;
  --cat-neutral: #667085;

  --overlay: rgba(5,7,11,0.45);
  --focus-ring: 0 0 0 3px rgba(22,126,208,0.35);
  --shadow-sm: 0 1px 2px rgba(5,7,11,0.08);
  --shadow-md: 0 8px 24px rgba(5,7,11,0.12);
  --shadow-lg: 0 16px 48px rgba(5,7,11,0.18);
}