/*
    Design-Tokens — die einzige Stelle mit Farbwerten, Abständen, Radien und Schriftgrößen.

    Zwei Ebenen:
      Ebene 1  Grundwerte (Paletten). Werden NICHT direkt in Komponenten verwendet.
      Ebene 2  Semantische Rollen. Nur diese gehören in base.css, components.css und
               in die scoped CSS-Dateien der Komponenten.

    Ein späterer Dark Mode belegt ausschließlich Ebene 2 neu — Ebene 1 bleibt unverändert.
    Siehe docs/gestaltung.md.
*/

:root {
    /* ---------------------------------------------------------------- Ebene 1 */

    /*
        Signaturfarbe Indigo — ersetzt das kühlere Petrol (2026-08-21, Nutzerfeedback:
        wirkte kalt). Liegt weit genug von Rot weg (~110° Farbabstand), um nicht mit
        dem Löschen-Rot (`--fehler`) zu kollidieren, und bleibt außerhalb der
        Schutzstatus-Rampe (die reicht von Anthrazit über Rot/Orange/Bernstein bis Grün).
    */
    --indigo-050: #EEEBF6;
    --indigo-100: #D3CBE8;
    --indigo-700: #453575;
    --indigo-800: #362A5E;

    /* Neutrale — warmer Unterton statt Blaugrau (2026-08-21, Nutzerfeedback: reines Weiß
       unangenehm). Helligkeit je Stufe bleibt erhalten, nur der Farbton wandert Richtung
       Creme/Sand, damit sich an den Kontrastwerten nichts ändert. */
    --grau-000: #FBF8F3;
    --grau-050: #F3EFE7;
    --grau-100: #E9E3D8;
    --grau-200: #DDD5C8;
    --grau-500: #847A6A;
    --grau-600: #6B6255;
    --grau-900: #2B2620;

    /*
        Schutzstatus-Rampe. Die Reihenfolge ist fachlich verbindlich
        (04-faelligkeiten.md, Abschnitt 3.1; Ungeschützt zuoberst nach FA-13)
        und darf nicht umsortiert werden. Alle Werte erreichen auf --flaeche und
        --flaeche-gedaempft mindestens 4.7:1.
    */
    --rampe-1: #1F2933; /* Anthrazit  */
    --rampe-2: #7C1D16; /* Dunkelrot  */
    --rampe-3: #A32318; /* Rot        */
    --rampe-4: #B04A12; /* Rotorange  */
    --rampe-5: #A85A0B; /* Orange     */
    --rampe-6: #8A6206; /* Bernstein  */
    --rampe-7: #79690A; /* Ocker      */
    --rampe-8: #1B6B45; /* Grün       */

    /*
        Nur für das Schraffurmuster von Ungeschützt (Verkehrsgelb, wie Warnband auf
        Baustellen) — kein eigener Rang in der Statusfarb-Rampe, taucht nirgends als
        Text- oder Flächenfarbe auf.
    */
    --gefahrstreifen-gelb: #F5B700;

    /* ---------------------------------------------------------------- Ebene 2 */

    /* Flächen */
    --flaeche: var(--grau-000);
    --flaeche-gedaempft: var(--grau-050);
    --flaeche-vertieft: var(--grau-100);

    /* Text */
    --text: var(--grau-900);
    --text-gedaempft: var(--grau-600);
    --text-invers: var(--grau-000);

    /* Kanten und Rahmen */
    --kante: var(--grau-200); /* dekorative Trennung          */
    --kante-stark: var(--grau-500); /* Formularfelder, ≥ 3:1 (WCAG 1.4.11) */

    /* Marke — ausschließlich Primäraktion, aktive Navigation, Wortmarke */
    --marke: var(--indigo-700);
    --marke-aktiv: var(--indigo-800);
    --marke-flaeche: var(--indigo-100);
    --marke-kante: var(--indigo-100);

    /* Schutzstatus, in verbindlicher Rangfolge */
    --status-ungeschuetzt: var(--rampe-1);
    --status-mangel-ueberfaellig: var(--rampe-2);
    --status-mangel-offen: var(--rampe-3);
    --status-austausch-ueberfaellig: var(--rampe-4);
    --status-pruefung-ueberfaellig: var(--rampe-5);
    --status-austausch-faellig: var(--rampe-6);
    --status-pruefung-faellig: var(--rampe-7);
    --status-geschuetzt: var(--rampe-8);

    /* Meldungen — bewusst aus den Statusfarben abgeleitet, keine neuen Farbwerte */
    --fehler: var(--status-mangel-offen);
    --warnung: var(--status-austausch-faellig);
    --erfolg: var(--status-geschuetzt);
    --hinweis: var(--marke);

    /* Abstände */
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 3rem;

    /* Kantenführung — das wiederkehrende Detail */
    --radius: 2px;
    /* Nur für Buttons: minimal weicher als der scharfe Rest der Anwendung, auf
       ausdrücklichen Wunsch (2026-08-21). Karten, Marken und Listenzeilen bleiben
       quadratisch bei --radius. */
    --radius-btn: 4px;
    --kantenbreite-fein: 2px;
    --kantenbreite: 4px;
    --kantenbreite-stark: 6px;

    /*
        Eigenständig von der Schutzstatus-Rangfolge: Betont Marke und aktive Navigation,
        nicht Dringlichkeit. Zahlenwert darf zufällig mit --kantenbreite-stark
        übereinstimmen, die beiden Tokens bleiben aber bewusst getrennt benannt.
    */
    --kantenbreite-akzent: 6px;

    /* Typografie */
    --schrift-stapel: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    /*
        Anzeigeschrift für Wortmarke und die zwei größten Überschriftenrollen (h1, h2) —
        bewusst weiterhin kein Webfont, sondern eine Systemschrift-Kette mit
        eigenständigem Charakter, die den sachlichen Fließtext-Stapel kontrastiert.
        Slab-Serif statt Antiqua: robuster/technischer, passt besser zur Prüf-Domäne.
        Auf Android (kein Rockwell/American Typewriter installiert) fällt die Kette auf
        die generische Systemserife zurück — kein Slab dort, aber kein Rückschritt
        gegenüber vorher (reine Systemschrift blieb schon immer die Grenze).
    */
    --schrift-anzeige: Rockwell, "Rockwell Nova", "American Typewriter", "Roboto Slab",
        Georgia, serif;
    --schrift-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    --schrift-xs: 0.8125rem;
    --schrift-s: 0.875rem;
    --schrift-m: 1.0625rem;
    --schrift-l: 1.25rem;
    --schrift-xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
    --schrift-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem);

    --zeilenhoehe-eng: 1.2;
    --zeilenhoehe: 1.6;
    --laufweite-eng: -0.015em;

    /* Maße */
    --tippziel: 48px; /* Mindestgröße für Bedienung auf der Leiter */
    --inhalt-breite: 68rem;
    --lesebreite: 38rem;
    --seitenleiste-breite: 15rem;

    /* Bewegung — nur Zustandswechsel, nie Dekoration */
    --uebergang: 120ms ease;

    /* Der einzige Schatten der Anwendung: schwebende Leisten und Overlays */
    --schatten-leiste: 0 -1px 0 var(--kante);
    --schatten-overlay: 0 2px 12px rgb(26 32 36 / 18%);
    --overlay-grund: rgb(26 32 36 / 45%);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --uebergang: 0ms;
    }
}