/* igroupWEB – admin/tokens.css
   Das Designsystem des Backends (Motor 1.10.1, Auftrag 2.0 Stufe 1.10.4).
   Die einzige Datei mit Farbwerten: alles andere unter admin/ leitet ab.

   Drei Schichten:
   1. Kunden-CI: --t-primary, --t-accent, --t-on-primary, --t-bg, --t-text,
      --t-font-head, --t-font-body setzt admin/server.js als style-Attribut
      am <html> (abgeleitet in admin/theme.js aus content/config.md).
      Darauf bauen :root.light und :root.dark die Arbeitsflaechen.
   2. Werkzeuge in der Vorschau (Editor-Leiste, Fenster, Sprechblasen):
      immer dunkel, gleich welches CI der Kunde hat, Praefix --ed-. Die
      CI-Farben darin setzt admin/editor.js aus window.__EDITOR.theme.
      Geteilte Fenster (Verlauf, Meldung, Health, Assistent) stehen im
      Backend hell und in der Vorschau dunkel: var(--t-x, var(--ed-x)).
   3. Zustaende: ok, Fehler, Warnung, Ampel.

   Breakpoints (in Media Queries, Custom Properties gelten dort nicht):
     480 px  Handy quer, schmale Zeilen brechen um
     760 px  Handy: Navigation als Schublade, Tabellen als Karten
    1000 px  Tablet: Assistent einspaltig, kurze Beschriftungen
    1300 px  Schreibtisch: Navigation in eigener Zeile darunter
   Einzige Ausnahme: 1500 px in admin.css fuer die Kopfleiste. */

:root {
  /* Schrift */
  --t-font-ui: -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-font-head: var(--t-font-ui);
  --t-font-body: var(--t-font-ui);
  --schrift-xs: .76rem;
  --schrift-sm: .84rem;
  --schrift-md: .9rem;
  --schrift-base: 1rem;
  --schrift-lg: 1.05rem;
  --schrift-xl: 1.55rem;

  /* Abstaende */
  --ab-1: 4px;
  --ab-2: 8px;
  --ab-3: 12px;
  --ab-4: 16px;
  --ab-5: 20px;
  --ab-6: 24px;
  --ab-8: 32px;

  /* Rundungen und Tiefe */
  --radius: 10px;
  --radius-klein: 8px;
  --radius-gross: 14px;
  --radius-rund: 999px;
  --schatten-1: 0 10px 30px rgba(0, 0, 0, .4);
  --schatten-2: 0 18px 50px rgba(0, 0, 0, .45);
  --schatten-3: 0 24px 70px -18px rgba(0, 0, 0, .55);

  /* Zustaende */
  --ok: #1a7f4e;
  --ok-text: #1e7a46;
  --err: #c0392b;
  --err-flaeche: #fff4f2;
  --err-rand: #e8b4ab;
  --err-text: #7a1f14;
  --warn: #d4a72c;
  --warn-flaeche: #fff8e1;
  --warn-rand: #e5c76b;
  --warn-text: #3d2c00;
  --warn-text-2: #6b5200;
  --warn-text-hell: #f0c560;
  --ampel-rot: #d93036;
  --ampel-gelb: #e5a000;
  --ampel-gruen: #23885a;

  /* Helle Flaechen, die auch in der Vorschau gelten (Dialog der Seitenleiste, Katalogbilder) */
  --hell-flaeche: #ffffff;
  --hell-flaeche-2: #e9ecf1;
  --hell-linie: #cfd4dc;
  --hell-text: #1d2433;

  /* Werkzeuge in der Vorschau: dunkle Flaeche, CI-Farbe als Signal */
  --ed-font: -apple-system, "Segoe UI", Roboto, sans-serif;
  --ed-primary: var(--t-primary, #3454d1);
  --ed-accent: var(--t-accent, var(--ed-primary));
  --ed-on-primary: var(--t-on-primary, #ffffff);
  --ed-panel: #17171b;
  --ed-panel-hover: #26262c;
  --ed-line: #33333b;
  --ed-ink: #eef0f2;
  --ed-ink-2: #b7bac2;
  --ed-muted: #8b8e95;
  --ed-field: #0f0f12;
  --ed-ok-flaeche: #1d2a22;
  --ed-ok-rand: #2c4a38;
  --ed-ok-text: #7ddba3;
  --ed-err-flaeche: #2f1c1a;
  --ed-err-rand: #5a2f28;
  --ed-err-text: #e0967f;
  --ed-err-text-2: #e0796b;
  --ed-warn-text: #ffb4b4;
  --ed-ampel-rot: #e5484d;
  --ed-ampel-gelb: #f5b301;
  --ed-ampel-gruen: #30a46c;

  /* Marke igroupWEB (Anmeldung): Himmel und Tunnel von igroupweb.de v7, Feuer-Lila */
  --igw-rot: #c8141e;
  --igw-lila: #9e2ab8;
  --igw-violett: #7b3cf0;
  --igw-nacht: #060208;
  --igw-nacht-2: #2c0f52;
  --igw-karte: #0d0814;
  --igw-hell: #f4f4f6;
  --igw-hell-2: #e4e5ea;
  --igw-hell-3: #d5d6dc;
  --igw-grau: #b4b5bd;
  --igw-fehler-text: #ffdadd;
}

/* Helles Kunden-CI: neutrale Arbeitsflaeche, dunkle Markenleiste oben. */
:root.light {
  --t-panel: #ffffff;
  --t-panel-2: #fafbfc;
  --t-line: #e3e6ec;
  --t-muted: #667085;
  --t-topbar: #121212;
  --t-topbar-ink: #ffffff;
  --t-shadow: 0 1px 2px rgba(20, 22, 26, .04);
}

/* Dunkles Kunden-CI: Flaechen aus dessen Hintergrund abgeleitet. */
:root.dark {
  --t-panel: color-mix(in srgb, var(--t-bg) 93%, white);
  --t-panel-2: color-mix(in srgb, var(--t-bg) 96%, white);
  --t-line: color-mix(in srgb, var(--t-text) 15%, var(--t-bg));
  --t-muted: color-mix(in srgb, var(--t-text) 58%, var(--t-bg));
  --t-topbar: color-mix(in srgb, var(--t-bg) 88%, black);
  --t-topbar-ink: var(--t-text);
  --t-shadow: none;
}