/* GiB-Portal: Gestaltungs-Token (Pflichtenheft v1 Kapitel 4.9, CC.09; Welle 3, 11.10.2026).

   Die EINE Quelle für sichtbare Stilwerte. Portal (index.html, alle Seiten), Kundenseite
   (kunde.html), Memo, Diagramme und Excel lesen ihre Farben von hier; Hex-Werte stehen
   nur in dieser Datei (Prüfung: tests/test_design_tokens.py).

   Wechsel des Erscheinungsbilds (etwa wenn Max das Design-System liefert): nur diese
   Datei tauschen, dann e2e_gestaltung.py laufen lassen (Bildvergleich aller Menüseiten
   und der Musterseite #gestaltung gegen die Grundlage). Komponenten bleiben unberührt.

   Werte heute: GiB-CI (Navy #1A1C54, Grün #3DA64A, Sand #f4f2ec, Gill Sans) und die
   bisher im Portal verwendeten Farben, unverändert übernommen. */
:root {
  /* ---- Farbpaletten (50 hell bis 900 dunkel) ---- */
  --gib-color-navy-50: #f6f7fb;
  --gib-color-navy-100: #e2e3ec;
  --gib-color-navy-200: #c6c6d4;
  --gib-color-navy-300: #9fa0b7;
  --gib-color-navy-400: #2a2d6e;
  --gib-color-navy-500: #1A1C54;
  --gib-color-navy-600: #161847;
  --gib-color-navy-700: #12143b;
  --gib-color-navy-800: #0e0f2e;
  --gib-color-navy-900: #0a0b22;

  --gib-color-green-50: #f3faf3;
  --gib-color-green-100: #d8e8d8;
  --gib-color-green-200: #cee9d2;
  --gib-color-green-300: #8ad694;
  --gib-color-green-400: #77c180;
  --gib-color-green-500: #3DA64A;
  --gib-color-green-600: #2f8f3c;
  --gib-color-green-700: #2c7d37;
  --gib-color-green-800: #1f6b2a;
  --gib-color-green-900: #18421e;

  --gib-color-sand-50: #fcfcfa;
  --gib-color-sand-100: #f4f2ec;
  --gib-color-sand-200: #eae6db;
  --gib-color-sand-300: #e3e1d8;
  --gib-color-sand-400: #d9d2bf;
  --gib-color-sand-500: #c9bfa3;
  --gib-color-sand-600: #aba28b;
  --gib-color-sand-700: #8d8672;
  --gib-color-sand-800: #6f695a;
  --gib-color-sand-900: #504c41;

  --gib-color-white: #ffffff;
  --gib-color-neutral-50: #f8f9f9;
  --gib-color-neutral-100: #eff0f1;
  --gib-color-neutral-200: #dcdce2;
  --gib-color-neutral-300: #cccccc;
  --gib-color-neutral-400: #a0a2ad;
  --gib-color-neutral-450: #999999;
  --gib-color-neutral-500: #8b8e99;
  --gib-color-neutral-600: #6c6f7a;
  --gib-color-neutral-700: #666677;
  --gib-color-neutral-800: #44454b;
  --gib-color-neutral-900: #313237;

  /* ---- Dokumente aus dem Backend (Memo, Einseiter), Werte wie bisher ---- */
  --gib-color-sand-250: #e2ded4;
  --gib-color-sand-350: #d8d4ca;
  --gib-color-neutral-650: #666666;
  --gib-color-neutral-750: #555555;
  --gib-color-dunkelgruen: #1a2b1a;
  --gib-color-green-25: #f2f7f2;
  --gib-color-hervorhebung: #eaf5ea;
  --gib-color-amber-50: #fff8e1;
  --gib-color-amber-600: #f9a825;
  --gib-color-linie-kuehl: #ccdddd;

  /* ---- Bedeutungsfarben ---- */
  --gib-color-success: var(--gib-color-green-600);
  --gib-color-success-700: #2e7d32;
  --gib-color-info: #3a6ea5;
  --gib-color-warning: #d4a017;
  --gib-color-warning-600: #c98a2b;
  --gib-color-warning-700: #b3541e;
  --gib-color-danger-500: #c0392b;
  --gib-color-danger: #b04a3a;
  --gib-color-danger-650: #b23b3b;
  --gib-color-danger-700: #aa3333;
  --gib-color-violet: #7a5ea0;
  --gib-color-umspannwerk: #22357a;
  --gib-color-schatten: rgba(26, 28, 84, .10);
  --gib-color-schatten-tief: rgba(26, 28, 84, .06);
  --gib-color-fokus: rgba(61, 166, 74, .18);
  --gib-color-abdeckung: rgba(26, 28, 84, .45);
  --gib-color-hell-auf-dunkel: rgba(255, 255, 255, .15);
  --gib-color-ablage: rgba(61, 166, 74, .10);
  --gib-color-gewaehlt: rgba(47, 143, 60, .06);

  /* ---- Schrift ---- */
  --gib-font-sans: "Gill Sans", "Gill Sans MT", Calibri, system-ui, sans-serif;
  --gib-font-mono: "SF Mono", Menlo, monospace;
  --gib-font-diagramm: sans-serif;
  --gib-font-diagramm-zahlen: Inter, Arial, sans-serif;
  --gib-text-xs: 12px;
  --gib-text-sm: 13.5px;
  --gib-text-base: 14.5px;
  --gib-text-md: 16px;
  --gib-text-lg: 18px;
  --gib-text-xl: 22px;
  --gib-text-2xl: 28px;
  --gib-text-3xl: 36px;
  --gib-text-4xl: 48px;
  --gib-leading-tight: 1.18;
  --gib-leading-normal: 1.5;
  --gib-leading-relaxed: 1.7;
  --gib-tracking-tight: -.02em;
  --gib-tracking-normal: 0;
  --gib-tracking-wide: .14em;

  /* ---- Abstände (4-Pixel-Raster) ---- */
  --gib-space-0: 0;
  --gib-space-1: 4px;
  --gib-space-2: 8px;
  --gib-space-3: 12px;
  --gib-space-4: 16px;
  --gib-space-5: 20px;
  --gib-space-6: 24px;
  --gib-space-8: 32px;
  --gib-space-10: 40px;
  --gib-space-12: 48px;
  --gib-space-16: 64px;
  --gib-space-20: 80px;
  --gib-space-24: 96px;

  /* ---- Radien ---- */
  --gib-radius-none: 0;
  --gib-radius-xs: 3px;
  --gib-radius-sm: 6px;
  --gib-radius-md: 8px;
  --gib-radius-lg: 12px;
  --gib-radius-xl: 14px;
  --gib-radius-pill: 999px;

  /* ---- Schatten (zweistufig: Kante und Tiefe) ---- */
  --gib-shadow-sm: 0 1px 3px var(--gib-color-schatten), 0 6px 18px var(--gib-color-schatten-tief);
  --gib-shadow-md: 0 2px 6px var(--gib-color-schatten), 0 10px 24px var(--gib-color-schatten-tief);
  --gib-shadow-lg: 0 4px 12px var(--gib-color-schatten), 0 16px 40px var(--gib-color-schatten-tief);
  --gib-shadow-xl: 0 10px 40px rgba(0, 0, 0, .3);

  /* ---- Ebenen ---- */
  --gib-z-base: 0;
  --gib-z-dropdown: 10;
  --gib-z-sticky: 30;
  --gib-z-drawer: 45;
  --gib-z-toast: 50;
  --gib-z-modal: 100;

  /* ---- Umbruchbreiten (Merkwerte; Medienabfragen können keine Variablen lesen) ---- */
  --gib-bp-sm: 640px;
  --gib-bp-menu: 760px;
  --gib-bp-md: 768px;
  --gib-bp-lg: 1024px;
  --gib-bp-xl: 1280px;
  --gib-bp-2xl: 1536px;

  /* ---- Rollen im Portal (Komponenten lesen diese Namen) ---- */
  --navy: var(--gib-color-navy-500);
  --navy-700: var(--gib-color-navy-400);
  --green: var(--gib-color-green-500);
  --green-600: var(--gib-color-green-600);
  --sand: var(--gib-color-sand-100);
  --line: var(--gib-color-sand-300);
  --card: var(--gib-color-white);
  --muted: var(--gib-color-neutral-600);
  --ink: var(--gib-color-navy-500);
  --bg: var(--gib-color-sand-100);
  --font: var(--gib-font-sans);
  --sh: var(--gib-shadow-sm);
  --rot: var(--gib-color-danger);
  --gelb: var(--gib-color-warning);

  /* Vertriebsstufen (Pipeline) */
  --st-zielkunde: var(--gib-color-neutral-500);
  --st-lead: var(--gib-color-info);
  --st-qualifizierung: var(--gib-color-warning);
  --st-angebot: var(--gib-color-violet);
  --st-verhandlung: var(--gib-color-warning-600);
  --st-beauftragt: var(--gib-color-green-600);
  --st-in_umsetzung: var(--gib-color-green-600);
  --st-abgeschlossen: var(--gib-color-green-800);
  --st-ruhend: var(--gib-color-neutral-450);
  --st-verloren: var(--gib-color-danger);

  /* Status einer Fläche */
  --lg-neu: var(--gib-color-neutral-500);
  --lg-in_recherche: var(--gib-color-info);
  --lg-kontaktiert: var(--gib-color-warning);
  --lg-qualifiziert: var(--gib-color-green-600);
  --lg-abgelehnt: var(--gib-color-danger);
}