/*
 * Design-Tokens (SPEC E23). Einzige Stelle für Farben, Schriften, Abstände, Radien und Schatten.
 * Ein anderes Erscheinungsbild (CI) entsteht durch Ändern der --brand-* Werte hier - app.css bleibt unberührt.
 *
 * Marken-Tokens (--brand-*) und Status-Tokens (--status-*) sind strikt getrennt: Eine neue Markenfarbe darf nie
 * die Bedeutung eines Status verändern (Rot bleibt "Fehler/überfällig", Grün "in Ordnung").
 * Farbwerte als 6-stellige Hex-Werte: E-Mail-Vorlagen lesen sie von hier (App\Core\Tokens), E-Mail-Clients kennen kein var().
 * Logo und Firmenname kommen aus der Konfiguration (BRAND_LOGO, BRAND_NAME), nicht aus dieser Datei.
 */
:root {
    /* ---- Marke (austauschbar) ---------------------------------------------------------------- */
    /* 2beC GmbH (Farben von 2bec.de, Okt. 2026). Vorher (neutral/KONFERMO): primary #1f4e8c, dark #163a69,
       soft #e6eef8, header-text #1d2733, link #1f4e8c. Kontrast Weiss auf primary 6,2:1, primary-dark auf Weiss 8,9:1. */
    --brand-primary: #b70d7f;
    --brand-primary-dark: #8e0a63;
    --brand-primary-soft: #f8e7f2;
    --brand-on-primary: #ffffff;
    --brand-header-bg: #ffffff;
    --brand-header-text: #1f1f1f;

    /* ---- Status (feste Bedeutung; je Farbe: Linie/Füllung, Hintergrund, Text) ------------------ */
    --status-blau: #1d5fa8;
    --status-blau-bg: #e3effb;
    --status-blau-text: #0f3e73;
    --status-gruen: #1e7b45;
    --status-gruen-bg: #e2f4ea;
    --status-gruen-text: #135230;
    --status-gelb: #b7791f;
    --status-gelb-bg: #fdf3d8;
    --status-gelb-text: #6b4608;
    --status-rot: #b3261e;
    --status-rot-bg: #fbe7e5;
    --status-rot-text: #7a1712;
    --status-grau: #5f6b78;
    --status-grau-bg: #eceff2;
    --status-grau-text: #3a4450;

    /* Kräftige Statusflächen für Badges/Ampeln (Wunsch Auftraggeber 18.10.2026); Text darauf mind. 5:1 Kontrast */
    --status-blau-stark: #1d5fa8;
    --status-blau-auf: #ffffff;
    --status-gruen-stark: #1a7f37;
    --status-gruen-auf: #ffffff;
    --status-gelb-stark: #f0a500;
    --status-gelb-auf: #1f1500;
    --status-rot-stark: #c62828;
    --status-rot-auf: #ffffff;

    /* ---- Flächen, Text, Linien ----------------------------------------------------------------- */
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-surface-alt: #f8f9fb;
    --color-text: #1d2733;
    --color-muted: #566270;
    --color-border: #d3d9e0;
    --color-border-strong: #9aa5b1;
    --color-link: #8e0a63;
    --color-focus: #e08a00;

    /* ---- Typografie ---------------------------------------------------------------------------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --font-size-s: 0.875rem;
    --font-size-base: 1rem;
    --font-size-l: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-xxl: 1.75rem;
    --line-height: 1.55;

    /* ---- Abstände, Radien, Schatten, Bedienelemente ------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --shadow-s: 0 1px 2px rgba(20, 30, 45, 0.08);
    --shadow-m: 0 2px 8px rgba(20, 30, 45, 0.12);
    --touch-min: 2.75rem;
    --content-width: 64rem;
    --form-width: 30rem;
}