/* ============================================================================
   Eventures Cockpit – Design-Tokens (zentrale Grundlage, Punkt: Designsystem)
   Nur hier stehen Farben, Schriftgrößen, Abstände, Radien, Schatten. Ansichten
   und Komponenten verwenden ausschließlich diese Variablen – keine hart codierten
   Werte. Struktur ist Dark-Mode-fähig (Dark Mode wird jetzt NICHT gebaut).
   ============================================================================ */

:root {
  /* --- Marken- und Flächenfarben --- */
  --primaer: #009FE3;          /* Eventures Blau (HKS 50) */
  --primaer-dunkel: #0084BE;   /* Hover/aktiv */
  --primaer-weich: #E6F5FC;    /* aktive Navigation, weiche Akzentflächen */

  --text: #1A1A1A;             /* Haupttext (Anthrazit) */
  --text-sek: #5B6472;         /* sekundärer Text */
  --text-schwach: #8A93A0;     /* Hilfstext/Captions */

  --bg-seite: #F7F8FA;         /* Seitenhintergrund */
  --flaeche: #FFFFFF;          /* Karten */
  --flaeche-2: #F7F8FA;        /* Tabellenkopf, dezente Flächen */
  --rand: #E5E5E5;             /* Trennlinien, Rahmen, inaktiv */
  --rand-stark: #D5D9DF;

  /* --- Semantische Farben (Text/Icon-Ton, weiche Fläche, Rand) --- */
  --erfolg: #16A34A;   --erfolg-weich: #E7F6ED;
  --warnung: #F59E0B;  --warnung-weich: #FEF3E2; --warnung-text: #B9770B;
  --fehler: #DC2626;   --fehler-weich: #FDECEC;
  --info: var(--primaer); --info-weich: var(--primaer-weich);

  /* Alias auf die semantischen Töne (Rückwärtskompatibilität bestehender Klassen) */
  --gruen: var(--erfolg);
  --gelb: var(--warnung);
  --rot: var(--fehler);
  --grau: var(--text-sek);
  --blau: var(--primaer);
  --karte: var(--flaeche);
  --bg: var(--bg-seite);
  --hoch: var(--fehler-weich);

  /* --- Radien --- */
  --radius-s: 8px;
  --radius: 10px;
  --radius-l: 12px;
  --radius-pill: 999px;

  /* --- Schatten (dezent) --- */
  --schatten-s: 0 1px 2px rgba(16, 24, 40, 0.05);
  --schatten: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --schatten-l: 0 8px 24px rgba(16, 24, 40, 0.12);
  --schatten-overlay: 0 20px 60px rgba(15, 20, 30, 0.35);

  /* --- Abstände (4er-Raster) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* --- Typografie --- */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Nur für technische Werte, die zeichenweise stimmen müssen (z. B. Content-Hashes) */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-h1: 32px;   --lh-h1: 40px;
  --fs-h2: 24px;   --lh-h2: 32px;
  --fs-h3: 20px;   --lh-h3: 28px;
  --fs-body: 16px; --lh-body: 24px;
  --fs-small: 14px; --lh-small: 20px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* --- Layout --- */
  --sidebar-breite: 248px;
  --topbar-hoehe: 60px;
  --inhalt-max: 1180px;
  --fokus-ring: 0 0 0 3px rgba(0, 159, 227, 0.25);
}