/*
----------------------------------------
Datei: tokens.css
Beschreibung: Zentrale Design Tokens (14_CSS_Standards.md, Abschnitt 8).
Kernfarben aus den Projektvariablen des Startprompts. Komponenten
verwenden ausschließlich diese Variablen, nie feste Farben.
Dunkelmodus über [data-theme="dunkel"] oder Systemeinstellung.
----------------------------------------
*/

@layer reset, tokens, basis, layout, komponenten, module, utilities, overrides;

@layer tokens {
    :root {
        color-scheme: light;

        --farbe-primaer: #2563eb;
        --farbe-primaer-hover: #1d4ed8;
        --farbe-primaer-aktiv: #1e40af;
        --farbe-primaer-hell: #dbeafe;
        --farbe-primaer-text: #ffffff;
        --farbe-sekundaer: #0f172a;
        --farbe-akzent: #0ea5e9;

        --farbe-erfolg: #16a34a;
        --farbe-erfolg-hell: #dcfce7;
        --farbe-erfolg-dunkel: #166534;
        --farbe-warnung: #f59e0b;
        --farbe-warnung-hell: #fef3c7;
        --farbe-warnung-dunkel: #92400e;
        --farbe-fehler: #dc2626;
        --farbe-fehler-hover: #b91c1c;
        --farbe-fehler-hell: #fee2e2;
        --farbe-fehler-dunkel: #991b1b;
        --farbe-info: #0ea5e9;
        --farbe-info-hell: #e0f2fe;
        --farbe-info-dunkel: #075985;

        --farbe-seite: #f8fafc;
        --farbe-flaeche: #ffffff;
        --farbe-flaeche-sekundaer: #f1f5f9;
        --farbe-flaeche-hover: #f8fafc;
        --farbe-rahmen: #e2e8f0;
        --farbe-rahmen-stark: #cbd5e1;
        --farbe-text: #0f172a;
        --farbe-text-sekundaer: #475569;
        --farbe-text-deaktiviert: #94a3b8;
        --farbe-overlay: rgb(15 23 42 / 0.45);
        --farbe-fokus: rgb(37 99 235 / 0.35);

        --abstand-1: 4px;
        --abstand-2: 8px;
        --abstand-3: 12px;
        --abstand-4: 16px;
        --abstand-5: 20px;
        --abstand-6: 24px;
        --abstand-8: 32px;
        --abstand-10: 40px;
        --abstand-12: 48px;
        --abstand-16: 64px;

        --radius-klein: 6px;
        --radius-standard: 8px;
        --radius-karte: 12px;
        --radius-dialog: 14px;
        --radius-panel: 16px;
        --radius-rund: 9999px;

        --schatten-klein: 0 1px 2px rgb(15 23 42 / 0.06);
        --schatten-standard: 0 4px 12px rgb(15 23 42 / 0.08);
        --schatten-gross: 0 16px 40px rgb(15 23 42 / 0.14);
        --schatten-dialog: 0 24px 80px rgb(15 23 42 / 0.24);

        --schrift-standard: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        --schrift-monospace: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
        --schriftgroesse-1: 12px;
        --schriftgroesse-2: 13px;
        --schriftgroesse-3: 14px;
        --schriftgroesse-4: 16px;
        --schriftgroesse-5: 20px;
        --schriftgroesse-6: 24px;
        --schriftgroesse-7: 30px;

        --dauer-schnell: 120ms;
        --dauer-standard: 180ms;
        --dauer-lang: 240ms;
        --easing-standard: cubic-bezier(0.2, 0, 0, 1);

        --hoehe-header: 64px;
        --breite-sidebar: 256px;
        --breite-sidebar-kompakt: 72px;
        --breite-inhalt-max: 1600px;
        --breite-formular-max: 960px;

        --z-basis: 1;
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-sidebar-mobil: 300;
        --z-overlay: 400;
        --z-dialog: 500;
        --z-toast: 600;
        --z-tooltip: 700;
    }

    [data-theme="dunkel"] {
        color-scheme: dark;
        --farbe-seite: #0b1120;
        --farbe-flaeche: #111827;
        --farbe-flaeche-sekundaer: #1e293b;
        --farbe-flaeche-hover: #172033;
        --farbe-rahmen: #273449;
        --farbe-rahmen-stark: #334155;
        --farbe-text: #f8fafc;
        --farbe-text-sekundaer: #cbd5e1;
        --farbe-text-deaktiviert: #64748b;
        --farbe-primaer: #3b82f6;
        --farbe-primaer-hover: #60a5fa;
        --farbe-primaer-hell: rgb(59 130 246 / 0.16);
        --farbe-erfolg-hell: rgb(22 163 74 / 0.18);
        --farbe-erfolg-dunkel: #86efac;
        --farbe-warnung-hell: rgb(245 158 11 / 0.18);
        --farbe-warnung-dunkel: #fcd34d;
        --farbe-fehler-hell: rgb(220 38 38 / 0.2);
        --farbe-fehler-dunkel: #fca5a5;
        --farbe-info-hell: rgb(14 165 233 / 0.18);
        --farbe-info-dunkel: #7dd3fc;
        --farbe-overlay: rgb(2 6 23 / 0.7);
        --farbe-fokus: rgb(96 165 250 / 0.45);
        --schatten-klein: 0 1px 2px rgb(0 0 0 / 0.4);
        --schatten-standard: 0 4px 12px rgb(0 0 0 / 0.4);
        --schatten-gross: 0 16px 40px rgb(0 0 0 / 0.5);
        --schatten-dialog: 0 24px 80px rgb(0 0 0 / 0.6);
    }

    /* Systemmodus: ohne data-theme folgt die Oberfläche dem Gerät. */
    @media (prefers-color-scheme: dark) {
        html:not([data-theme]) {
            color-scheme: dark;
            --farbe-seite: #0b1120;
            --farbe-flaeche: #111827;
            --farbe-flaeche-sekundaer: #1e293b;
            --farbe-flaeche-hover: #172033;
            --farbe-rahmen: #273449;
            --farbe-rahmen-stark: #334155;
            --farbe-text: #f8fafc;
            --farbe-text-sekundaer: #cbd5e1;
            --farbe-text-deaktiviert: #64748b;
            --farbe-primaer: #3b82f6;
            --farbe-primaer-hover: #60a5fa;
            --farbe-primaer-hell: rgb(59 130 246 / 0.16);
            --farbe-erfolg-hell: rgb(22 163 74 / 0.18);
            --farbe-erfolg-dunkel: #86efac;
            --farbe-warnung-hell: rgb(245 158 11 / 0.18);
            --farbe-warnung-dunkel: #fcd34d;
            --farbe-fehler-hell: rgb(220 38 38 / 0.2);
            --farbe-fehler-dunkel: #fca5a5;
            --farbe-info-hell: rgb(14 165 233 / 0.18);
            --farbe-info-dunkel: #7dd3fc;
            --farbe-overlay: rgb(2 6 23 / 0.7);
            --farbe-fokus: rgb(96 165 250 / 0.45);
            --schatten-klein: 0 1px 2px rgb(0 0 0 / 0.4);
            --schatten-standard: 0 4px 12px rgb(0 0 0 / 0.4);
            --schatten-gross: 0 16px 40px rgb(0 0 0 / 0.5);
            --schatten-dialog: 0 24px 80px rgb(0 0 0 / 0.6);
        }
    }
}