/* Fundament von Stil A (Spec UI-Umbau 3.2).
   Komponenten nutzen nur die semantischen Tokens; die Palette steht ausschließlich hier.
   Akzent und Dunkel überschreibt App.razor aus der Marke. */
:root {
    /* Palette: warmes Grau „Stein", Tinte für Text, Signalfarben */
    --bt-stein-50: #f7f6f4; --bt-stein-100: #f1efec; --bt-stein-200: #ebe9e6; --bt-stein-300: #dcd9d5;
    --bt-stein-400: #a9a6a2; --bt-stein-500: #85827e; --bt-stein-600: #62605c; --bt-stein-700: #45433f;
    --bt-stein-800: #2e2c29; --bt-stein-900: #1c1b19;
    --bt-tinte-900: #1c1f22; --bt-tinte-600: #62666a; --bt-tinte-400: #a9acaf;
    --bt-gruen-50: #ecf7ef; --bt-gruen-600: #15803d; --bt-gruen-700: #166534;
    --bt-gelb-50: #fdf3e3; --bt-gelb-600: #b45309; --bt-gelb-700: #92400e;
    --bt-rot-50: #fdeaea; --bt-rot-600: #b91c1c; --bt-rot-700: #991b1b;
    --bt-blau-50: #eaf0fd; --bt-blau-100: #dbe5fb; --bt-blau-600: #1d4ed8; --bt-blau-700: #1e40af; --bt-blau-800: #1e3a8a;

    /* Semantik: Flächen */
    --bt-grund: #ffffff;
    --bt-flaeche: #ffffff;
    --bt-flaeche-2: var(--bt-stein-50);
    --bt-flaeche-3: var(--bt-stein-100);
    --bt-dunkel: var(--bt-stein-900);
    --bt-dunkel-2: var(--bt-stein-800);
    --bt-flaeche-dunkel: var(--bt-dunkel);

    /* Semantik: Text und Rand */
    --bt-text: var(--bt-tinte-900);
    --bt-text-leise: var(--bt-tinte-600);
    --bt-text-schwach: var(--bt-tinte-400);
    --bt-text-auf-akzent: #ffffff;
    --bt-rand: var(--bt-stein-200);
    --bt-rand-stark: var(--bt-stein-300);

    /* Semantik: Akzent (Vorgabe; App.razor setzt die Werte aus der Marke) */
    --bt-akzent: var(--bt-blau-600);
    --bt-akzent-hover: var(--bt-blau-700);
    --bt-akzent-hell: var(--bt-blau-50);
    --bt-akzent-licht: #60a5fa;

    /* Semantik: Status */
    --bt-gut: var(--bt-gruen-600); --bt-gut-hell: var(--bt-gruen-50);
    --bt-warn: var(--bt-gelb-600); --bt-warn-hell: var(--bt-gelb-50);
    --bt-schlecht: var(--bt-rot-600); --bt-schlecht-hell: var(--bt-rot-50);
    --bt-info: var(--bt-blau-600); --bt-info-hell: var(--bt-blau-50);

    /* Semantik: Reihen für Pläne (Hintergrund und Text darauf, AA). Die Farbe hilft nur, der Name steht immer dabei.
       Diagramme nutzen die Klassen bt-reihe--* von BtBalken. */
    --bt-reihe-1: #dcfce7; --bt-reihe-1-text: #166534;
    --bt-reihe-2: #fef3c7; --bt-reihe-2-text: #92400e;
    --bt-reihe-3: #ede9fe; --bt-reihe-3-text: #5b21b6;
    --bt-reihe-4: #ccfbf1; --bt-reihe-4-text: #115e59;
    --bt-reihe-5: #fce7f3; --bt-reihe-5-text: #9d174d;
    --bt-reihe-6: var(--bt-stein-200); --bt-reihe-6-text: var(--bt-stein-800);

    /* Semantik: neutrale Diagrammfarben (Ring ab der vierten Reihe) */
    --bt-diagramm-grau-dunkel: var(--bt-stein-500); --bt-diagramm-grau: var(--bt-stein-300); --bt-diagramm-grau-hell: var(--bt-stein-200);

    /* Semantik: 3D-Szene (BtSzene). Höhenverlauf tief-mitte-hoch; Abweichung: Abtrag (minus), unverändert (null), Auftrag (plus).
       Die Farbe hilft nur, Werte und Legende nennen die Zahlen. */
    --bt-szene-tief: var(--bt-blau-600); --bt-szene-mitte: var(--bt-gruen-600); --bt-szene-hoch: var(--bt-gelb-600);
    --bt-szene-minus: var(--bt-blau-600); --bt-szene-null: var(--bt-stein-300); --bt-szene-plus: var(--bt-rot-600);

    /* Semantik: Tiefe, Form, Bewegung, Ebenen */
    --bt-schatten-1: 0 1px 2px rgba(28, 31, 34, .08);
    --bt-schatten-2: 0 10px 28px rgba(28, 31, 34, .12);
    --bt-schatten-3: 0 24px 60px rgba(28, 31, 34, .22);
    --bt-schleier: rgba(28, 31, 34, .38);
    --bt-fokus: 0 0 0 3px var(--bt-akzent-hell);
    --bt-radius-s: 6px; --bt-radius-m: 8px; --bt-radius-l: 14px; --bt-radius-rund: 999px;
    --bt-dauer: 150ms; --bt-dauer-lang: 250ms;
    --bt-ebene-leiste: 30; --bt-ebene-panel: 40; --bt-ebene-dialog: 50; --bt-ebene-toast: 60; --bt-ebene-palette: 70;

    /* Abstände und Schrift */
    --bt-abstand-1: 0.25rem; --bt-abstand-2: 0.5rem; --bt-abstand-3: 0.75rem; --bt-abstand-4: 1rem;
    --bt-abstand-6: 1.5rem; --bt-abstand-8: 2rem;
    --bt-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bt-schrift-wortmarke: var(--bt-schrift);
    --bt-text-xs-pc: 0.75rem; --bt-text-sm-pc: 0.875rem; --bt-text-handy: 0.9375rem;
    --bt-text-xs: var(--bt-text-xs-pc); --bt-text-sm: var(--bt-text-sm-pc); --bt-text-md: 1rem; --bt-text-lg: 1.125rem; --bt-text-xl: 1.5rem;
    --bt-seitenleiste-breite: 250px;
    --bt-seitenleiste-schmal: 60px;
}

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