/* === Design-Tokens ===
 * Jede Farbe, jeder Abstand, jeder Radius steht HIER — und nur hier.
 * Komponenten in app.css benutzen ausschließlich diese Variablen.
 *
 * Warum so streng: style.css der Einsatzplanung hat 46 KB mit verstreuten
 * Hex-Werten, App.css der VO App 5.282 Zeilen. Eine Farbe zu ändern heißt
 * dort, sie überall zu suchen. Hier ist es eine Zeile.
 */

:root {
    color-scheme: light;

    /* --- Marke --- */
    --primary:        #6d28d9;
    --primary-hover:  #5b21b6;
    --primary-bg:     #f5f3ff;
    --primary-fg:     #5b21b6;

    --accent:         #0d9488;   /* Schäfchenchor */
    --accent-hover:   #0f766e;
    --accent-bg:      #f0fdfa;
    --accent-fg:      #115e59;

    /* --- Bedeutungen --- */
    --success:        #16a34a;
    --success-bg:     #f0fdf4;
    --warning:        #d97706;
    --warning-bg:     #fffbeb;
    --danger:         #dc2626;
    --danger-bg:      #fef2f2;
    --info:           #2563eb;
    --info-bg:        #eff6ff;

    /* --- Flächen und Text --- */
    --bg:             #f8fafc;
    --surface:        #ffffff;
    --surface-2:      #f1f5f9;
    --surface-3:      #e2e8f0;
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;
    --text:           #0f172a;
    --text-muted:     #64748b;
    --text-subtle:    #94a3b8;
    --text-on-primary:#ffffff;

    /* --- Abstände (4er-Skala) --- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px;

    /* --- Schrift --- */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
            'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --text-xs: 11px;  --text-sm: 13px;  --text-base: 15px;
    --text-lg: 17px;  --text-xl: 20px;  --text-2xl: 25px; --text-3xl: 31px;
    --weight-normal: 400; --weight-medium: 500;
    --weight-semibold: 600; --weight-bold: 700;

    /* --- Rundungen --- */
    --radius-sm: 6px;  --radius: 10px;  --radius-lg: 14px;
    --radius-xl: 20px; --radius-pill: 999px;

    /* --- Schatten --- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow:    0 1px 3px rgba(15, 23, 42, .09), 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .09);
    --shadow-lg: 0 10px 28px rgba(15, 23, 42, .12);

    /* --- Layout --- */
    --header-h: 56px;
    --nav-h: 62px;
    --inhalt-max: 900px;

    /* --- Bewegung --- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dauer-schnell: 110ms;
    --dauer: 190ms;

    /* --- Ebenen --- */
    --z-header: 100; --z-nav: 100; --z-overlay: 900; --z-dialog: 1000;
    --z-meldung: 1200;
}

/* --- Dunkle Ansicht --- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --primary:        #a78bfa;
    --primary-hover:  #c4b5fd;
    --primary-bg:     rgba(167, 139, 250, .14);
    --primary-fg:     #c4b5fd;

    --accent:         #2dd4bf;
    --accent-hover:   #5eead4;
    --accent-bg:      rgba(45, 212, 191, .14);
    --accent-fg:      #5eead4;

    --success:        #4ade80;  --success-bg: rgba(74, 222, 128, .14);
    --warning:        #fbbf24;  --warning-bg: rgba(251, 191, 36, .14);
    --danger:         #f87171;  --danger-bg:  rgba(248, 113, 113, .14);
    --info:           #60a5fa;  --info-bg:    rgba(96, 165, 250, .14);

    --bg:             #0b1120;
    --surface:        #172033;
    --surface-2:      #1e293b;
    --surface-3:      #334155;
    --border:         #293548;
    --border-strong:  #475569;
    --text:           #f1f5f9;
    --text-muted:     #94a3b8;
    --text-subtle:    #64748b;
    --text-on-primary:#1e1b4b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, .6);
}