/* =====================================================================
   Design-System – Variablen (Spec Abschnitt 12)
   Dark Mode = Standard (:root), Light Mode via [data-theme="light"]
   ===================================================================== */

:root {
  /* Flächen (Dark) */
  --bg:   #0c0e13;
  --bg-s: #14171f;   /* surface */
  --bg-e: #1b1f2b;   /* elevated */
  --bg-h: #202533;   /* hover */
  --brd:  #252b3b;   /* border */
  --brd-s:#1a1e2c;   /* border subtle */

  /* Text (Dark) */
  --tp: #eef0f7;     /* primary */
  --ts: #7c839e;     /* secondary */
  --tt: #4a5068;     /* tertiary */

  /* Status / Akzent (theme-unabhängig) */
  --green:    #22c55e;
  --yellow:   #f59e0b;
  --red:      #ef4444;
  --cyan:     #06b6d4;
  --accent:   #6366f1;
  --accent-h: #818cf8;

  /* dezente Status-Hintergründe (mit Alpha) */
  --green-bg:  rgba(34, 197, 94, 0.14);
  --yellow-bg: rgba(245, 158, 11, 0.14);
  --red-bg:    rgba(239, 68, 68, 0.14);
  --cyan-bg:   rgba(6, 182, 212, 0.14);
  --accent-bg: rgba(99, 102, 241, 0.14);

  /* Stockwerk-Farben */
  --eg:  #f97316;
  --og1: #eab308;
  --og2: #3b82f6;
  --dg:  #a855f7;

  /* Maße */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow:    0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);

  /* Typografie */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Transitions */
  --t-fast: 120ms ease;
  --t: 200ms ease;
}

[data-theme="light"] {
  --bg:   #f3f4f9;
  --bg-s: #ffffff;
  --bg-e: #eceef6;
  --bg-h: #e6e8f2;
  --brd:  #dde0ee;
  --brd-s:#e8eaf3;

  --tp: #0f1623;
  --ts: #515a7a;
  --tt: #9199b8;

  --green-bg:  rgba(34, 197, 94, 0.12);
  --yellow-bg: rgba(245, 158, 11, 0.14);
  --red-bg:    rgba(239, 68, 68, 0.10);
  --cyan-bg:   rgba(6, 182, 212, 0.12);
  --accent-bg: rgba(99, 102, 241, 0.10);

  --shadow-sm: 0 1px 2px rgba(15, 22, 35, 0.06);
  --shadow:    0 6px 20px rgba(15, 22, 35, 0.10);
  --shadow-lg: 0 18px 50px rgba(15, 22, 35, 0.18);
}