/* Gemeinsames Fundament aller Oberflächen von LKChat.
 *
 * WARUM ES DIESE DATEI GIBT
 * Der Bestand vor dem 2026-08-04: rund 1.040 harte Farbwerte, 196 verschiedene
 * Hex-Töne, drei konkurrierende Primärgrüns, 22 kaum unterscheidbare
 * Blassgrüns, sechs Rots für "Fehler". Ein Token-Satz existierte zwar
 * (`base.css`), wurde aber NUR von der Admin-Seite geladen - Chat, Agent,
 * Video und Widget kamen gar nicht an ihn heran und schrieben deshalb alles
 * hart hin.
 *
 * REGEL AB JETZT
 * Diese Datei wird von JEDER Seite als erstes Stylesheet geladen. Neue Farben,
 * Radien, Abstände und Schatten kommen hierher, nicht in die Bereichsdatei.
 * Ein Bereich darf Tokens ÜBERSCHREIBEN (etwa eine wärmere Fläche), aber
 * keinen eigenen Farbwert erfinden, den es hier schon gibt.
 *
 * LEITFARBE ist das Grün der Landwirtschaftskammer #007E46. Das früher im
 * Chat und im Widget verwendete Material-Grün #2e7d32 war nie eine bewusste
 * Wahl, sondern ein Vorgabewert - es entfällt.
 */

:root {
    /* ---------- Leitfarbe ---------- */
    --lk-gruen: #007E46;
    --lk-gruen-dunkel: #00612F;
    --lk-gruen-tief: #004F27;          /* gedrückter Zustand */
    --lk-gruen-hell: #e8f1ec;          /* Fläche hinter Grün, z.B. aktiver Tab */
    --lk-gruen-blass: #f2f8f4;         /* ganz leichte Tönung, Hover auf Weiß */
    /* Als Kanäle, wo Transparenz gebraucht wird - spart die zwölf
       Alpha-Varianten, die vorher jede für sich hart dastanden. */
    --lk-gruen-rgb: 0, 126, 70;
    /* 5,2:1 - trägt weiße Schrift auf Grün und grüne Schrift auf Weiß. */

    /* ---------- Neutrale ---------- */
    /* Gemessene Kontraste auf weißer Fläche (WCAG AA verlangt 4,5:1 für
       Fließtext). Wer diese Werte ändert, misst nach - der erste Entwurf
       hatte #607d8b und lag mit 4,37:1 knapp darunter, also durchgefallen. */
    --lk-text: #1c2226;                /* Fließtext            16,1:1 */
    --lk-text-leise: #546e7a;          /* Nebeninfo, Zeitstempel 5,4:1 */
    /* NUR für Platzhalter, deaktivierte Bedienelemente und leere Zustände -
       2,6:1 reicht für nichts, das man wirklich lesen muss. */
    --lk-text-schwach: #90a4ae;
    --lk-linie: #d8dcdd;               /* sichtbare Trennlinie */
    --lk-linie-fein: rgba(28, 34, 38, .09);
    --lk-flaeche: #ffffff;             /* Karte, Dialog, Composer */
    --lk-flaeche-leise: #f5f6f5;       /* eingesenkter Bereich, Chip */
    --lk-grund: #f7f3ec;               /* Seitenhintergrund, warm */
    --lk-grund-satt: #e7e4dd;          /* Hintergrund mit mehr Kontrast */
    /* Grund, gegen den Farbtönungen aufgehellt werden (color-mix). Im
       Dunkelmodus MUSS das die dunkle Fläche sein - eine Tönung, die fest
       gegen Weiß mischt, wird dort zur weißen Fläche mit hellem Text darauf.
       Genau das passierte beim Überfahren einer Listenzeile: der Eintrag
       wurde weiß und der Text unlesbar. */
    --lk-mischgrund: #ffffff;
    /* Schrift und Zeichen AUF einer farbigen Fläche (grüner Knopf, rotes
       Abzeichen). Nicht mit --lk-flaeche verwechseln: das ist die Fläche
       selbst, das hier ist der Kontrast darauf. */
    --lk-auf-farbe: #ffffff;
    --lk-auf-farbe-leise: #eaf3ea;     /* Nebentext auf farbigem Grund */

    /* ---------- Zustände ---------- */
    /* Je Zustand GENAU ein Vordergrund und eine Fläche. Vorher: sechs Rots,
       achtzehn Orangetöne, fünf Blaus - ohne Unterschied in der Bedeutung. */
    --lk-fehler: #b3261e;
    --lk-fehler-dunkel: #8f1e18;       /* Hover auf einem roten Knopf */
    --lk-fehler-rgb: 179, 38, 30;      /* für Ränder und Schleier mit Alpha */
    --lk-fehler-flaeche: #fdf1ee;
    --lk-warnung: #b45309;
    --lk-warnung-flaeche: #fff8e1;
    --lk-erfolg: #00612F;
    --lk-erfolg-flaeche: #e8f1ec;
    --lk-info: #1565c0;
    --lk-info-flaeche: #e3f2fd;
    /* Alle vier Zustandsfarben liegen auf Weiß zwischen 5,0:1 und 6,5:1. */

    /* Für Ränder und Schleier mit Alpha, wo die deckende Farbe zu kräftig
       wäre - ohne diese Kanäle bleiben harte rgba()-Werte im Code stehen. */
    --lk-info-rgb: 21, 101, 192;
    --lk-warnung-rgb: 180, 83, 9;

    /* ---------- Akzente ----------
       Für Kennzeichnungen, die KEIN Zustand sind: Modus-Abzeichen, Ablauf-
       Knoten, Entwurfs-Marken. Vorher standen dafür ein Dutzend harte Töne
       (#7b1fa2, #00838f, #ffd54f, #ad1457 …) quer über app.css - im
       Dunkelmodus blieben sie hell und trugen keinen Text mehr. */
    --lk-violett: #7b1fa2;
    --lk-violett-flaeche: #f3e5f5;
    --lk-cyan: #00838f;
    --lk-cyan-flaeche: #f1fafb;
    --lk-bernstein: #c47f00;
    --lk-bernstein-flaeche: #fffdf3;
    --lk-rosa: #ad1457;
    --lk-rosa-flaeche: #fce4ec;

    /* Schleier hinter einem Overlay und die Fläche eines Log-Fensters.
       Beide waren als rohe rgba()/Hex-Werte über die Dateien verteilt. */
    --lk-schleier: rgba(20, 30, 40, .5);
    --lk-code-grund: #1e1e1e;
    --lk-code-text: #d4d4d4;

    /* ---------- Form ---------- */
    /* Vorher zehn verschiedene Radien und neun Knopfhöhen. Drei Stufen
       reichen: klein für Felder und Chips, mittel für Karten, rund für
       Pillen und Icon-Knöpfe. */
    --lk-radius-klein: 9px;
    --lk-radius: 14px;
    --lk-radius-rund: 999px;

    /* Bedienhöhen: eine für den Regelfall, eine für gedrängte Leisten.
       Alles unter 36 Pixel ist auf einem Telefon nicht sicher zu treffen. */
    --lk-hoehe: 40px;
    --lk-hoehe-klein: 34px;
    --lk-tastziel: 44px;

    --lk-schatten-1: 0 1px 2px rgba(28, 34, 38, .06);
    --lk-schatten-2: 0 1px 2px rgba(28, 34, 38, .05), 0 8px 24px -18px rgba(28, 34, 38, .5);
    --lk-schatten-3: 0 12px 40px rgba(0, 0, 0, .3);

    /* ---------- Bewegung ---------- */
    /* Eine Kurve für alles, zwei Dauern. Animiert werden nur transform,
       opacity, clip-path und filter. */
    --lk-kurve: cubic-bezier(.16, 1, .3, 1);
    --lk-dauer: 180ms;
    --lk-dauer-lang: 300ms;

    /* ---------- Fokus ---------- */
    /* EINE Technik. Vorher standen drei nebeneinander: box-shadow-Ring,
       outline mit Versatz, und "outline: none" plus eingefärbter Rand - das
       letzte macht die Tastaturbedienung stellenweise unsichtbar. */
    --lk-fokus: 2px solid var(--lk-gruen);
    --lk-fokus-abstand: 2px;

    /* ---------- Schrift ---------- */
    --lk-schrift: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --lk-schrift-fest: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---------- Schriftskala ----------
       Gezählt am 2026-08-10: 194 verschiedene Schriftgrößen im Bestand, die
       meisten unterscheiden sich um ein halbes Pixel. Sieben Stufen decken
       alles ab. Wer eine achte braucht, braucht sie nicht.
       Alles unter --lk-s-mini ist nur für Randnotizen, nie für Fließtext. */
    --lk-s-mini: 11px;      /* Zeitstempel, Zähler, Randnotiz */
    --lk-s-klein: 12.5px;   /* Nebentext, Listenmeta, Knopf in Leisten */
    --lk-s-text: 14px;      /* Fließtext, Bedienelemente, Standardknopf */
    --lk-s-gross: 15.5px;   /* Eingabefelder, hervorgehobener Fließtext */
    --lk-s-titel: 18px;     /* Kartentitel, Dialogtitel */
    --lk-s-kopf: 22px;      /* Seitentitel */
    --lk-s-schau: 28px;     /* Kennzahl, Leerzustand */

    /* Etiketten: die Großbuchstaben-Überschrift über einer Gruppe.
       Drei Werte an einer Stelle statt in jeder Regel neu erfunden. */
    --lk-etikett-groesse: 11px;
    --lk-etikett-abstand: .1em;
    --lk-etikett-fett: 800;

    /* ---------- Abstandsskala ----------
       Vorher 1.508 harte Pixelwerte. Sechser-Raster, weil die Bedienhöhen
       (34/40/44) darauf aufgehen und 6 sich halbieren lässt. */
    --lk-a-1: 3px;
    --lk-a-2: 6px;
    --lk-a-3: 9px;
    --lk-a-4: 12px;
    --lk-a-5: 16px;
    --lk-a-6: 22px;
    --lk-a-7: 30px;
    --lk-a-8: 42px;

    /* Innenabstände, die immer zusammen auftreten - erspart das Paar-Raten */
    --lk-p-karte: var(--lk-a-4) var(--lk-a-5);
    --lk-p-leiste: var(--lk-a-3) var(--lk-a-5);
    --lk-p-knopf: var(--lk-a-2) var(--lk-a-4);

    /* ---------- Zeilenhöhen ---------- */
    --lk-zeile-eng: 1.25;   /* Überschriften, Knopfbeschriftung */
    --lk-zeile: 1.55;       /* Fließtext */
    --lk-zeile-weit: 1.7;   /* Langer Lesetext, Antwortkarte */
}

/* ====================================================================
   DUNKELMODUS
   ====================================================================
   Möglich geworden durch die Schrift- und Abstandsskala oben: solange
   1.508 harte Pixelwerte und 194 Schriftgrößen im Bestand standen, war
   nicht die Farbe das Hindernis, sondern die fehlende Ordnung.

   Umgeschaltet wird über `data-theme` am <html>. Drei Zustände:
   nichts gesetzt = der Wunsch des Systems, "hell" und "dunkel" = die
   ausdrückliche Wahl des Nutzers, die das System sticht.

   Grundsatz: NUR Farben werden hier neu belegt. Radien, Abstände,
   Schriftgrößen und Bewegung bleiben, wie sie sind - ein Dunkelmodus,
   der auch das Layout ändert, ist ein zweites Design.

   Die Leitfarbe wird angehoben: #007E46 auf dunklem Grund liegt bei
   2,1:1 und ist als Schrift unlesbar. #2FA46B trägt auf --lk-grund
   6,3:1 und bleibt erkennbar dasselbe Grün. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lk-gruen: #2FA46B;
        --lk-gruen-dunkel: #4FC088;
        --lk-gruen-tief: #6BD3A0;
        --lk-gruen-hell: #17352a;
        --lk-gruen-blass: #12261f;
        --lk-gruen-rgb: 47, 164, 107;

        --lk-text: #e8ece9;
        --lk-text-leise: #a3b2ab;
        --lk-text-schwach: #6d7d76;
        --lk-linie: #2b3833;
        --lk-linie-fein: rgba(232, 236, 233, .10);
        --lk-flaeche: #182220;
        --lk-flaeche-leise: #131b19;
        --lk-grund: #0e1614;
        --lk-grund-satt: #1c2624;
        --lk-auf-farbe: #0b1210;
        --lk-auf-farbe-leise: #1c2b24;
        --lk-mischgrund: #182220;

        --lk-fehler: #f28b82;
        --lk-fehler-dunkel: #f6a49d;
        --lk-fehler-rgb: 242, 139, 130;
        --lk-fehler-flaeche: #2b1a19;
        --lk-warnung: #e0a458;
        --lk-warnung-flaeche: #2b2317;
        --lk-warnung-rgb: 224, 164, 88;
        --lk-erfolg: #4FC088;
        --lk-erfolg-flaeche: #17352a;
        --lk-info: #7fb3f0;
        --lk-info-flaeche: #16232f;
        --lk-info-rgb: 127, 179, 240;

        /* Akzente im Dunkelmodus: aufgehellter Ton, abgedunkelte Fläche. */
        --lk-violett: #c9a0dc;
        --lk-violett-flaeche: #251a2b;
        --lk-cyan: #6fc7d1;
        --lk-cyan-flaeche: #14262a;
        --lk-bernstein: #e0a458;
        --lk-bernstein-flaeche: #2b2317;
        --lk-rosa: #efa0bd;
        --lk-rosa-flaeche: #2c1a22;

        --lk-schleier: rgba(0, 0, 0, .65);
        --lk-code-grund: #101715;
        --lk-code-text: #cdd7d2;

        /* Schatten tragen auf dunklem Grund nicht - dort trennt die Linie.
           Ein weicher schwarzer Schatten auf Schwarz ist unsichtbar und
           kostet nur Rechenzeit. */
        --lk-schatten-1: 0 1px 2px rgba(0, 0, 0, .45);
        --lk-schatten-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .9);
        --lk-schatten-3: 0 12px 40px rgba(0, 0, 0, .6);

        color-scheme: dark;
    }
}

/* Ausdrückliche Wahl sticht das System - in beide Richtungen. Die Werte
   stehen bewusst ein zweites Mal statt in einer geteilten Klasse: eine
   Variablendefinition, die nur in einer Media-Query steht, gilt sonst
   beim Umschalten am Tag nicht. */
:root[data-theme="dark"] {
    --lk-gruen: #2FA46B;
    --lk-gruen-dunkel: #4FC088;
    --lk-gruen-tief: #6BD3A0;
    --lk-gruen-hell: #17352a;
    --lk-gruen-blass: #12261f;
    --lk-gruen-rgb: 47, 164, 107;

    --lk-text: #e8ece9;
    --lk-text-leise: #a3b2ab;
    --lk-text-schwach: #6d7d76;
    --lk-linie: #2b3833;
    --lk-linie-fein: rgba(232, 236, 233, .10);
    --lk-flaeche: #182220;
    --lk-flaeche-leise: #131b19;
    --lk-grund: #0e1614;
    --lk-grund-satt: #1c2624;
    --lk-auf-farbe: #0b1210;
    --lk-auf-farbe-leise: #1c2b24;
    --lk-mischgrund: #182220;

    --lk-fehler: #f28b82;
    --lk-fehler-dunkel: #f6a49d;
    --lk-fehler-rgb: 242, 139, 130;
    --lk-fehler-flaeche: #2b1a19;
    --lk-warnung: #e0a458;
    --lk-warnung-flaeche: #2b2317;
    --lk-warnung-rgb: 224, 164, 88;
    --lk-erfolg: #4FC088;
    --lk-erfolg-flaeche: #17352a;
    --lk-info: #7fb3f0;
    --lk-info-flaeche: #16232f;
    --lk-info-rgb: 127, 179, 240;

    /* Akzente im Dunkelmodus: aufgehellter Ton, abgedunkelte Fläche. */
    --lk-violett: #c9a0dc;
    --lk-violett-flaeche: #251a2b;
    --lk-cyan: #6fc7d1;
    --lk-cyan-flaeche: #14262a;
    --lk-bernstein: #e0a458;
    --lk-bernstein-flaeche: #2b2317;
    --lk-rosa: #efa0bd;
    --lk-rosa-flaeche: #2c1a22;

    --lk-schleier: rgba(0, 0, 0, .65);
    --lk-code-grund: #101715;
    --lk-code-text: #cdd7d2;

    --lk-schatten-1: 0 1px 2px rgba(0, 0, 0, .45);
    --lk-schatten-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .9);
    --lk-schatten-3: 0 12px 40px rgba(0, 0, 0, .6);

    color-scheme: dark;
}

/* ---------- Fenster-Tokens (dialoge.css) ----------
   Die geteilten Fenster (Einstellungen, Wort-Ersetzungen) bringen eigene
   Namen mit. Sie hier zu belegen ist der einzige Ort, an dem es für ALLE
   Seiten gilt - egal ob Vollseite, eingebetteter Bereich oder Werkstatt. */
/* `:root` davor erhöht die Spezifität. Ohne das gewinnt dialoge.css mit
   seinen hellen Werten, weil es NACH token.css geladen wird - gleiche
   Spezifität, spätere Datei. Genau daran blieb der Einstellungen-Dialog im
   Dunkelmodus weiß. So ist die Ladereihenfolge egal. */
:root .lke-vars,
:root .lke-schleier,
.lke-vars,
.lke-schleier {
    --lke-radius: var(--lk-radius);
    --lke-radius-klein: var(--lk-radius-klein);
    --lke-abstand: var(--lk-a-6);
    --lke-abstand-eng: var(--lk-a-3);
    --lke-dauer: var(--lk-dauer);
    --lke-kurve: var(--lk-kurve);
    --lke-linie: var(--lk-linie);
    --lke-flaeche: var(--lk-flaeche);
    --lke-flaeche-2: var(--lk-flaeche-leise);
    --lke-text: var(--lk-text);
    --lke-text-leise: var(--lk-text-leise);
    --lke-akzent: var(--lk-gruen);
    --lke-akzent-ll: var(--lk-gruen-blass);
}

/* Sichtbarer Fokus überall gleich - eine Regel statt zwanzig.
   `:focus-visible` trifft nur die Tastaturbedienung, ein Mausklick löst
   also keinen Rahmen aus. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--lk-fokus);
    outline-offset: var(--lk-fokus-abstand);
}

/* `:where` hat Spezifität null - jede Bereichsregel schlägt das hier, ohne
   dass jemand `!important` braucht. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Brücke zum Werkstatt-Paket ----------
 *
 * Die Werkstatt (Transkription, Medien, Textwerkstatt) bringt eigene Fenster
 * mit und liest deren Farben aus `--lkp-*`. Setzt der Host diese Variablen
 * nicht, greifen die eingebauten Rückfallwerte, und die sind hell: weiße
 * Fläche, dunkler Text. Im Dunkelmodus stand mitten in der Anwendung ein
 * weißer Dialog mit dunklen Feldern.
 *
 * Die Brücke steht bewusst NUR einmal und nicht je Farbschema: sie zeigt auf
 * die `--lk-*`-Tokens, und die schalten weiter oben schon selbst um. Wer sie
 * verdoppelt, hat beim nächsten Farbwechsel zwei Stellen zu pflegen.
 *
 * Betroffen sind alle Werkstatt-Fenster, nicht nur eines: Mein Profil,
 * Einstellungen, Wort-Ersetzungen. Sie hängen an <body> und damit außerhalb
 * jeder Bereichsklasse, deshalb muss die Brücke auf :root sitzen.
 */
:root {
    --lkp-flaeche: var(--lk-flaeche);
    --lkp-flaeche-2: var(--lk-flaeche-leise);
    --lkp-text: var(--lk-text);
    --lkp-leise: var(--lk-text-leise);
    --lkp-linie: var(--lk-linie);
    --lkp-akzent: var(--lk-gruen);
    --lkp-akzent-d: var(--lk-gruen-dunkel);
    --lkp-akzent-l: var(--lk-gruen-hell);
    --lkp-akzent-ll: var(--lk-gruen-blass);
    /* Zurückhaltende Schaltfläche (Abbrechen): im Hellen ein leiser Grauton,
       im Dunklen die eingesenkte Fläche - beides kommt aus demselben Token. */
    --lkp-still: var(--lk-flaeche-leise);
    --lkp-still-text: var(--lk-text-leise);
    --lkp-still-d: var(--lk-linie);
    --lkp-radius: var(--lk-radius);
    --lkp-radius-klein: var(--lk-radius-klein);
}