/* =============================================================================
 * tokens.css - DIE Gestaltungswerte des Cockpits. EINE Datei fuer ALLE Seiten.
 * Farben (theme-abhaengig) + Typografie, Abstaende, Radien, Schatten (konstant).
 *
 * #199 (Design-Schulden der UI-Shell) / #651 Phase 1, Vorarbeit fuer #182
 * (finales UI-Design nach dem Branding).
 * Seit 2026-09-02 auf dem Stand der Design-Rueckgabe (#651 UI-Gesamtkonzept,
 * Runde 1 in reviews/PRUEFPROTOKOLL_und_EINBAUPLAN.md): dazugekommen sind
 * --errbg, --mono, --td-x/--td-x-dicht und --wrap-max - je mit Warum an Ort
 * und Stelle. Die FARBWERTE sind weiterhin Platzhalter; die Palette kommt
 * erst mit dem Branding (#182), damit der Einbau-Diff die echten Aenderungen
 * zeigt und nicht eine Farbentscheidung.
 *
 * WARUM ES DIESE DATEI GIBT: Dieselben 14 Basiswerte standen an vier Orten -
 * stil.css (Server-Vorlagen), struktur.html, review.html, login.html. Gemessen
 * am 2026-08-28 waren sie zwar wertgleich (0 Abweichungen), aber vier Kopien
 * koennen nur auseinanderlaufen, und ein Token-Austausch fuers Branding
 * haette vier Stellen anfassen muessen. Jetzt ist es EINE.
 *
 * ⛔ WARUM NICHT EINFACH stil.css UEBERALL EINBINDEN (der urspruengliche
 * #199-Vorschlag): stil.css enthaelt neben den Token auch ALLGEMEINE Regeln
 * (body, .card, button, table, .hidden, .muted ...). Gemessen wuerden davon
 * 9 Selektoren mit struktur.html kollidieren, 6 mit review.html, 4 mit
 * login.html - fremde Abstaende und Rahmen liefen still in Seiten hinein, die
 * ihre eigene Gestaltung mitbringen. Genau deshalb war "stil.css ueberall
 * verlinken" schon 2026-07-31 verworfen worden. Diese Datei enthaelt DESHALB
 * ausschliesslich :root-Bloecke - keine einzige Layout-Regel. Wer hier eine
 * ergaenzt, hebt die Trennung auf.
 *
 * FUER DAS BRANDING (#182): Die Palette aus der Design-Session ersetzt genau
 * die drei Bloecke unten - hell, OS-dunkel, Umschalter-dunkel. Die
 * seitenspezifischen Token bleiben, wo sie sind:
 *   --dok-*, --drop*        formatieren.css (Absatzrollen der Dokument-Ansicht,
 *                           Upload-Zone; seit #651 Runde 4 dort statt im
 *                           <style>-Block von struktur.html)
 *   --ins, --del, --delbg, --insbg, --trenner*, --markgelb*
 *                           review.css    (Diff-Farben, Trenner, Markierung;
 *                           seit #661, 2026-09-02, statt im <style>-Block
 *                           von review.html - der hatte keinen Dunkelpfad)
 *   --shell-*               shell.css     (Kopfleiste, laedt ui.js selbst)
 *
 * EINBINDEN: als ERSTES Stylesheet der Seite (die Seitenregeln kommen danach
 * und duerfen gewinnen). Statisch per <link>, nicht per JavaScript - sonst
 * blitzt die Seite im ersten Frame ungestylt auf.
 *
 * ⛔ /tokens.css IST OEFFENTLICH (seit #651 Runde 6, 2026-09-02): login.html
 * laedt diese Datei (vorher hatte die Anmeldeseite eine eigene Kopie von
 * acht Token). Im Betriebsmodus liegt sonst JEDES Static-Asset hinter der
 * Auth-Middleware; deshalb steht /tokens.css in _OEFFENTLICHE_PFADE
 * (web_basis.py). Wer den Pfad dort entfernt, wiederholt #243/B38: die
 * Login-Seite laedt etwas, das die Middleware wegleitet, und der Betrieb
 * steht ab dem Deploy. Waechter: test_181_s2_auth, test_651_anmeldung_einbau.
 * Diese Datei traegt NUR Farb-/Mass-Token - nichts, was oeffentlich schaden
 * koennte.
 * ========================================================================== */

/* ⛔ `color-scheme` MELDET DAS THEMA AN DEN BROWSER - bis 2026-09-06 fehlte es.
   Die Token darunter faerben nur, was WIR zeichnen. Alles, was der BROWSER
   selbst malt, richtete sich weiter nach dem BETRIEBSSYSTEM: Rollbalken,
   Standard-Steuerelemente - und der eingebaute PDF-Betrachter der
   Titelblock-Vorschau. Markus 2026-09-06: „rand ist dunkel (darkmode, da
   system dark ist, aber habe in cockpit hell gestellt)". Genau das.
   Die drei Bloecke unten spiegeln die Token-Bloecke Zeile fuer Zeile: hell als
   Grundfall, dunkel nach Systemvorgabe (sofern nicht ausdruecklich hell), und
   der Umschalter gewinnt in beide Richtungen. */
:root { color-scheme:light;
        --bg:#f5f6f8; --card:#fff; --fg:#1f2430; --muted:#6b7280;
        --accent:#2b5fd9; --accent-d:#1f49ab; --ok:#15803d; --err:#b91c1c;
        --warn:#92600a; --warnbg:#fff7e6; --line:#e3e6eb; --soft:#eef0f4;
        --okbg:#e7f6ec; --accentbg:#eef3ff;
        /* --errbg (Runde 1): .pill.err lieh sich bisher --warnbg -
           "fehlgeschlagen" und "zu pruefen" waren farblich nicht
           unterscheidbar. */
        --errbg:#fdeaea;
        /* Diff-Farben (aus review.css hierher, 2026-09-03): Review UND die
           Ergebnis-Vorschau der Formatieren-Seite (#660) zeigen Vorher/Nachher.
           Eigene Token trotz Wertgleichheit mit ok/err: eine Loeschung im Diff
           ist kein Fehler, eine Einfuegung kein Erfolg - die Palette darf sie
           spaeter trennen. */
        --del:#b91c1c; --ins:#15803d; --delbg:#fdeaea; --insbg:#e9f6ee; }

/* Dunkel: Systemvorgabe, sofern die Seite nicht ausdruecklich auf hell steht. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
        color-scheme:dark;
        --bg:#16181d; --card:#20242b; --fg:#e5e7eb; --muted:#9aa1ad;
        --accent:#4f7ad9; --accent-d:#a7c1f2; --ok:#5bc97d; --err:#f08a8a;
        --del:#f08a8a; --ins:#5bc97d; --delbg:#3f1d1d; --insbg:#173420;
        --warn:#f0c674; --warnbg:#3a2c0d; --line:#343a44; --soft:#2a2f37;
        --okbg:#173420; --accentbg:#1d2b4a;
        --errbg:#3f1d1d; } }

/* Der Umschalter in ui.js setzt data-theme und gewinnt in BEIDE Richtungen. */
:root[data-theme="dark"] {
        color-scheme:dark;
        --bg:#16181d; --card:#20242b; --fg:#e5e7eb; --muted:#9aa1ad;
        --accent:#4f7ad9; --accent-d:#a7c1f2; --ok:#5bc97d; --err:#f08a8a;
        --del:#f08a8a; --ins:#5bc97d; --delbg:#3f1d1d; --insbg:#173420;
        --warn:#f0c674; --warnbg:#3a2c0d; --line:#343a44; --soft:#2a2f37;
        --okbg:#173420; --accentbg:#1d2b4a;
        --errbg:#3f1d1d; }

/* -----------------------------------------------------------------------------
 * TYPOGRAFIE, ABSTAENDE, RADIEN, SCHATTEN - unabhaengig vom Hell/Dunkel-Modus,
 * deshalb nur EINMAL (kein Theme-Block noetig).
 *
 * QUELLE: Design-Session "JurFormat Identitaet", Runde 8 (Markus 2026-08-28) -
 * ausdruecklich der farb- und logofreie Teil des Entwurfs, den man vor der
 * Farbentscheidung einbauen kann. Er ersetzt die 144 verstreuten Pixelgroessen
 * durch sechs benannte Stufen; erst dadurch erreicht eine spaetere
 * Typo-Entscheidung ueberhaupt alle Seiten (#199 Punkt 3, #182).
 *
 * Die Zeilenhoehen gehoeren zur Stufe: eine Groesse ohne ihre Zeilenhoehe zu
 * uebernehmen, war der Grund, warum enge Tabellen und Fliesstext bisher
 * dieselbe 13px trugen und trotzdem verschieden wirkten.
 * -------------------------------------------------------------------------- */
:root {
  /* Schriftgroessen mit zugehoeriger Zeilenhoehe (--lh-* gehoert zu --fs-*). */
  --fs-xs:11px;   --lh-xs:1.4;    /* Badges, Tabellenkopf, UI-Fussnoten      */
  --fs-sm:13px;   --lh-sm:1.5;    /* Tabellenzelle, Label, Hilfetext         */
  --fs-md:15px;   --lh-md:1.6;    /* Fliesstext, Standard-UI-Text (Basis)    */
  --fs-lg:18px;   --lh-lg:1.4;    /* Karten-/Abschnittstitel (h2)            */
  --fs-xl:22px;   --lh-xl:1.3;    /* Seitentitel (h1)                        */
  --fs-2xl:28px;  --lh-2xl:1.25;  /* Login-Markenzeile                       */

  /* --mono (Runde 1): Artikel-IDs, Run-IDs, Kosten stehen ueberall; bisher
     setzte jede Seite ihren eigenen ui-monospace-Stack (admin.html .geheim,
     code). Eine Quelle statt vier. */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* Abstandsraster: sp-1/2 in Chips und Badges, sp-3/4 Formular und Karte,
     sp-5/6 Abschnitts- und Kartenraster, sp-7 Seitenrand. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* Tabellen-Dichte als Token (Runde 1): 15 Admin-Spalten brauchen bei 8/8
     schon 1422 px - auf dem 1366er-Laptop entscheidet allein das horizontale
     Zellen-Padding. Als Token ist die Dichte-Stufe EINE Stellschraube;
     stil.css schaltet sie ueber die Klasse .dicht um. */
  --td-x:var(--sp-2);       /* Standard: 8 px seitlich                       */
  --td-x-dicht:var(--sp-1); /* .dicht: 4 px -> 15 Spalten ~1302 px < 1366    */

  /* --wrap-max (Runde 1): die 1600px standen hart in stil.css; die
     diskutierte schmalere Inhaltsspalte (mit Tabellen-Ausbruch) wird damit
     spaeter ein Token-Tausch statt einer Regel-Suche. ⚠ Der WERT bleibt bei
     1600 - Archiv und Verwaltung leben von der Breite (15 Spalten). */
  /* #818 (Markus 2026-09-06: „rechts und links haben wir noch viel platz, den
     wir uns auf allen seiten abschneiden"). Gemessen bei 1920 px: der feste
     Deckel von 1600 liess je 160 px ungenutzt. Jetzt MITWACHSEND - er nimmt,
     was da ist, bis 1800, und haelt auf kleinen Schirmen 48 px Rand je Seite.
     ⚑ Das ist EIN Token fuer ALLE Masken: Archiv, Verwaltung, Einrichtung und
     Formatieren werden zugleich breiter. Fuer die Titelblock-Vorschau ist das
     der eigentliche Gewinn - sie skaliert die Seite auf die Rahmenbreite, mehr
     Breite heisst also groessere Schrift. */
  --wrap-max:min(1800px, calc(100vw - 2 * var(--sp-7)));

  /* radius-sm: Eingaben, Knoepfe. radius-md: Karten, Modals. pill: Badges. */
  --radius-sm:6px; --radius-md:10px; --radius-pill:999px;
  --border-w:1px;

  --shadow-card:0 1px 3px rgba(28,38,52,.06);
  --shadow-modal:0 12px 32px rgba(28,38,52,.18);
}