/* ============================================================================
   Design-Tokens – die EINE Quelle für Farbe, Abstand, Radius und Schrift.

   Willst du das Aussehen der Anwendung ändern, änderst du diese Datei. Sonst
   nichts. Genau dafür ist sie da: vorher lagen dieselben Farben in 24 Templates
   je eigenständig, und eine Änderung hätte 24 Stellen bedeutet – von denen man
   erfahrungsgemäß zwei vergisst.

   REGELN
   - In Templates und Komponenten stehen NUR `var(--…)`, nie Rohwerte wie
     `#2f52e0` oder `12px`. `scripts/architektur_check.py` weist Rohfarben
     zurück.
   - Neue Tokens kommen hierher, nicht in ein `<style>` der Seite.
   - Die Werte hier sind die des bisherigen Standes – die Einführung der Datei
     ändert die Optik NICHT. Wer das Design ändern will, tut das bewusst danach.

   Eingebunden über `templates/_appheader.html`, damit auch noch nicht auf
   `base.html` umgestellte Seiten sie bekommen.
   ============================================================================ */

:root {
  /* ── Farbe: Marke ───────────────────────────────────────────────────────── */
  --accent:        #1a3a5c;   /* Navy – Kopfzeile, Marke                     */
  --accent2:       #2f52e0;   /* Blau – primäre Aktion, Fokus, Verweise      */

  /* ── Farbe: Flächen ─────────────────────────────────────────────────────── */
  --bg:            #f3f6fb;   /* Seitenhintergrund                           */
  --card:          #ffffff;   /* Karten, Eingabefelder                       */
  --surface:       #eef2f7;   /* abgesetzte Fläche: Detailzeilen, Kopfzeilen */
  --border:        #e2e6ee;   /* Trennlinien und Rahmen                      */

  /* ── Farbe: Text ────────────────────────────────────────────────────────── */
  --text:          #2b3240;   /* Fließtext                                   */
  --muted:         #8a93a6;   /* Nebensache: Hinweise, Einheiten, Platzhalter*/
  --on-accent:     #ffffff;   /* Text auf --accent / --accent2               */

  /* ── Farbe: Bedeutung ───────────────────────────────────────────────────
     Vier Stufen, mehr nicht. Wer eine fünfte braucht, braucht meist keine
     Farbe, sondern einen klareren Satz. */
  --success:       #218a47;   /* erledigt, gespeichert, freigegeben          */
  --success-strong:#0a7d33;   /* Ergebniszahlen (Restnutzungsdauer u. Ä.)    */
  --warn:          #c9820a;   /* Aufmerksamkeit, aber kein Fehler            */
  --danger:        #c0392b;   /* Fehler, Löschen, Unwiderrufliches           */
  --info:          var(--accent2);

  /* Hintergründe zu den Bedeutungsfarben (dezent, für Chips und Banner) */
  --success-bg:    #eaf6ee;
  --warn-bg:       #fff8e6;
  --danger-bg:     #fdeceb;
  --info-bg:       #eef1fd;

  /* ── Abstand ────────────────────────────────────────────────────────────
     Vierer-Raster. Zwischenwerte gibt es nicht – das ist der Punkt. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ── Touch (docs/STANDARD-MOBIL.md) ─────────────────────────────────────
     Mindestgröße eines Ziels, das ein Daumen treffen soll. min-height:
     var(--tap-min) statt je Seite geratener Pixel. */
  --tap-min: 44px;

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --r-sm:  6px;   /* Eingabefeld, kleiner Knopf                              */
  --r-md:  8px;   /* Knopf, Chip                                             */
  --r-lg: 12px;   /* Karte, Dialog                                           */
  --r-pill: 999px;

  /* ── Schrift ────────────────────────────────────────────────────────────── */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs:  11px;   /* Spaltenüberschrift, Fußnote                           */
  --fs-sm: 12.5px;  /* Nebentext, Tabellenzelle                              */
  --fs-md:   13px;  /* Knopf, Formularfeld                                   */
  --fs-base: 14px;  /* Fließtext                                             */
  --fs-lg:   16px;  /* Abschnittsüberschrift                                 */
  --fs-xl:   22px;  /* Seitenüberschrift                                     */
  --fs-num:  26px;  /* herausgestellte Ergebniszahl                          */

  /* ── Schatten ───────────────────────────────────────────────────────────── */
  /* ── Dunkle Arbeitsflaeche ──────────────────────────────────────────────
     NICHT der Anfang eines Dunkelmodus (der waere VALDURA-491), sondern die
     Farben fuer eine Vollbild-Arbeitsflaeche, die dunkel sein MUSS: Wer
     Belichtung und Kontrast eines Fotos beurteilt, darf daneben keine helle
     Flaeche haben, an die sich das Auge adaptiert. Der Foto-Editor
     (VALDURA-492) benutzt sie; der Grundriss-Editor duerfte folgen.

     Sie stehen hier und nicht im <style> der Seite, weil sonst genau das
     zurueckkaeme, wogegen diese Datei angelegt wurde: dieselben Grautoene in
     zwei Templates, und beim naechsten Mal in drei. */
  --work-bg:      #111111;   /* hinter der Leinwand – so neutral wie moeglich */
  --work-panel:   #222222;   /* Seitenleiste, Werkzeugflaechen               */
  --work-sunk:    #1c1c1c;   /* abgesetzt im Panel: OCR-Text, Eingabefeld    */
  --work-border:  #333333;   /* Trennlinien auf dunklem Grund                */
  --work-control: #333333;   /* Werkzeugknopf, unbetont                      */
  --work-text:    #eeeeee;   /* Fliesstext auf dunklem Grund                 */
  --work-muted:   #999999;   /* Nebensache auf dunklem Grund                 */

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 14px rgba(16,24,40,.10);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.18);

  /* ── Höhen und Stapelreihenfolge ────────────────────────────────────────
     Die z-Werte stehen hier, damit sich Kopfzeile, Toolbar, Dialog und
     schwebende Knöpfe nicht gegenseitig verdecken. Nie eigene Zahlen. */
  --appheader-h: 56px;
  --z-toolbar:   35;
  --z-appheader: 40;
  /* Das Vollbild eines Arbeitsbereichs (VALDURA-990): ueber der Kopfzeile,
     unter den schwebenden Knoepfen. Wer ein Dokument gross liest, soll den
     ?- und den Ideen-Knopf trotzdem noch erreichen. */
  --z-vollbild:  45;
  --z-fab:       50;
  --z-toast:     900;
  --z-drawer:  1000;
  --z-modal:   1100;
}