/* Catinity-CI für KFZ Gutachter Live — die einzige Farbquelle.
 *
 * ⛔ **Abgeschrieben, nicht erfunden.** Jeder Wert hier stammt wörtlich aus
 *    `catinity/frontend/src/styles/_tokens.scss` bzw. `tailwind.css`. Dort steht:
 *    „Verbindliche Farbwerte der Catinity-CI. Dies ist die einzige Quelle."
 *    Ändert sich dort etwas, wird es hier nachgezogen — nie umgekehrt.
 *
 * ⛔ **Die Bezeichner sind bewusst dieselben** (`--grund`, `--akzent`, `--flaeche`).
 *    Ein Abgleich mit der Quelle ist damit ein Diff, keine Übersetzungsarbeit.
 *
 * Haltung laut `catinity/.stitch/DESIGN.md`:
 *    „Dunkel, technisch, ruhig. Kein Verlauf, keine Illustration, keine Zierde.
 *     Die einzige Farbe im Bild ist der Akzent — alles andere ist Weiß in
 *     Abstufungen auf Nachtblau."
 *
 * ⚠️ **Was hier NICHT hineingehört:** Farben, die eine Fachaussage tragen — die vier
 *    Schadensarten (`ar-steuerung.css`, `ARMarkerCategory.swift`), der Schärfe-Ring und
 *    die Haltungsampel der Dellenmessung. Die stehen absichtlich hart in ihren Dateien:
 *    Ein künftiger Tokenwechsel darf sie nicht verschieben, weil der Kunde und der
 *    Gutachter sonst verschiedene Farben sähen — und weil sie im Gutachten landen.
 */

:root {
    /* ---------- Flächen ---------- */
    --grund:            #050D1A;
    --ebene-2:          #0A1628;
    --flaeche:          rgba(15, 30, 53, 0.7);   /* mit backdrop-filter: blur(20px) */
    --flaeche-gehoben:  #0B1A30;                 /* Aufklappmenüs, Overlays */

    /* ---------- Akzent ---------- */
    /* Zugleich Marke und Aktionsfarbe: Knöpfe, aktive Zustände, Schablonen. */
    --akzent:           #00D4D4;
    --akzent-hell:      #80EDED;
    --akzent-fuellung:  rgba(0, 212, 212, 0.14);
    --akzent-rand:      rgba(0, 212, 212, 0.4);

    /* ---------- Text ---------- */
    --text-stark:       #FFFFFF;
    --text-normal:      rgba(255, 255, 255, 0.55);
    /* ⛔ 0.48 und nicht 0.3 — aus der Quelle übernommen, samt Begründung: Mit 0.3 kam
       dieser Wert auf 2,7:1 und fiel durch WCAG AA; im Catinity-Portal gingen alle 47
       gemessenen Verstöße auf ihn zurück. 0.48 ergibt 4,88–4,97:1 und bleibt trotzdem
       leiser als --text-normal. Er trägt sämtliche Beschriftungen und Hinweise. */
    --text-schwach:     rgba(255, 255, 255, 0.48);

    /* ---------- Linien ---------- */
    --trennlinie:       rgba(255, 255, 255, 0.05);
    --feldrand:         rgba(255, 255, 255, 0.12);
    /* Rand von Auswahlfeldern und Eingaben: ein Bedienelement braucht 3:1 gegen den Grund
       (WCAG 1.4.11), und --feldrand liegt darunter. 0,4 ergibt rund 3,8:1 auf --grund. */
    --feldrand-stark:   rgba(255, 255, 255, 0.4);
    /* Abdunkelung hinter Dialogen (Menü, Rückfrage): 40–60 % genügen, damit der Hintergrund
       zurücktritt, ohne zu verschwinden. */
    --grund-abdunkelung: rgb(5 13 26 / 0.6);

    /* ---------- Semantik ---------- */
    /* ⚠️ `--erfolg` trägt hier zusätzlich eine Rolle, die es bei Catinity nicht gibt:
       **Fortschritt und „erfasst"**. Bis zum 18.09.2026 war das Bernstein #F5A524.
       Der Grund für die Trennung: Der Kunde steht draußen am Fahrzeug, und „was muss
       ich jetzt drücken" darf nicht dieselbe Farbe haben wie „das ist schon erledigt". */
    --fehler:           #FCA5A5;
    --fehler-flaeche:   rgba(239, 68, 68, 0.1);
    --fehler-rand:      rgba(239, 68, 68, 0.25);
    --warnung:          #FDE047;
    --warnung-flaeche:  rgba(234, 179, 8, 0.1);
    --warnung-rand:     rgba(253, 224, 71, 0.28);
    --erfolg:           #86EFAC;
    --erfolg-flaeche:   rgba(34, 197, 94, 0.1);
    --erfolg-rand:      rgba(134, 239, 172, 0.3);

    /* ---------- Schatten ---------- */
    /* ⛔ Der einzige Schatten des Systems, nur für Overlays und Aufklappmenüs.
       Karten, Knöpfe und Bedienfelder tragen keinen. */
    --schatten-overlay: 0 18px 40px rgba(0, 0, 0, 0.45);

    /* ---------- Radien ---------- */
    --radius-eingabe:   8px;
    --radius-knopf:     9px;
    --radius-karte:     16px;
    --radius-pille:     100px;

    /* ---------- Abstände ---------- */
    --abstand-karten-innen:   26px;
    --abstand-karten:         20px;
    --abstand-feld:           18px;
    --hoehe-kopf:             60px;
    --breite-inhalt:          1600px;

    /* ---------- Schriftskala ---------- */
    /* ⛔ **Systemstapel, kein Webfont.** catinity.com nennt zwar `Inter` als erste
       Wahl, liefert die Schrift aber nicht aus — kein @font-face, kein Fonts-Link,
       keine Datei im Projekt. Jeder Besucher dort sieht also `system-ui`. Ein hier
       geladenes Inter machte die Oberflächen dem Vorbild unähnlicher, nicht ähnlicher.
       Der typografische Charakter steckt ohnehin in der Skala, nicht in der Datei. */
    --schrift: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                    "Liberation Mono", monospace;

    /* Acht Stufen. ⚠️ 11px ist keine Größe, sondern eine Rolle: Versalien mit weitem
       Zeichenabstand (--sperrung-beschriftung). 12 und 13 bleiben getrennt — die 12er
       sind meist Metazeilen unter einem 14er Titel und wären sonst fast so groß. */
    --text-beschriftung: 11px;  --zeile-beschriftung: 1.3;
    --text-klein:        12px;  --zeile-klein:        1.45;
    --text-hinweis:      13px;  --zeile-hinweis:      1.5;
    --text-fliess:       14px;  --zeile-fliess:       1.55;
    --text-abschnitt:    15px;  --zeile-abschnitt:    1.4;
    --text-karte:        20px;  --zeile-karte:        1.3;
    --text-seite:        24px;  --zeile-seite:        1.25;
    --text-zahl:         52px;  --zeile-zahl:         1;

    --sperrung-beschriftung: 0.1em;
    --sperrung-zahl:        -1px;
}