/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
    /* CI-Farben */
    --color-primary: #2C2B80;
    --color-primary-light: #3d3c9e;
    --color-primary-dark: #1e1d5c;
    --color-accent: #FF433E;
    --color-accent-dark: #e6322c;
    --color-gray: #787984;
    --color-gray-light: #D3D3D3;

    /* Semantische Farben */
    --color-success: #2fb344;
    --color-success-hover: #259c3a;
    --color-warning: #f76707;
    --color-danger: #d63939;
    --color-danger-hover: #c42e2e;
    --color-info: #4299e1;

    /* Hintergründe */
    --bg-body: #f4f6fa;
    --bg-card: #ffffff;
    --bg-sidebar: #2C2B80;
    --bg-muted: #f0f0f2;
    --bg-subtle: #fafafa;
    --bg-hover: #f8f9fa;
    --bg-striped: #f8f9fc;

    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-primary: #ffffff;

    /* Borders */
    --border-color: #ddd;
    --border-light: #eee;
    --border-medium: #e0e0e0;

    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-card: 0 2px 10px rgba(0,0,0,0.08);

    /* Abstände */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 50px;

    /* Font */
    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.125rem;

    /* Alerts */
    --alert-success-bg: #d4edda;
    --alert-success-color: #155724;
    --alert-error-bg: #f8d7da;
    --alert-error-color: #721c24;
    --alert-warning-bg: #fff3cd;
    --alert-warning-color: #856404;

    /* Input */
    --input-bg: #ffffff;
    --input-border: var(--border-color);
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: rgba(44,43,128,0.2);

    /* Z-Index Scale */
    --z-dropdown: 50;
    --z-topbar: 100;
    --z-sidebar-overlay: 900;
    --z-sidebar: 950;
    --z-modal-overlay: 1000;
    --z-modal: 1010;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
    --bg-body: #1a1a2e;
    --bg-card: #232340;
    --bg-muted: #2a2a45;
    --bg-subtle: #1e1e36;
    --bg-hover: #2e2e4a;

    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-color: #3a3a55;
    --border-light: #2e2e48;
    --border-medium: #3a3a55;

    --shadow-card: 0 2px 10px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);

    --input-bg: rgba(255,255,255,0.05);
    --input-border: rgba(255,255,255,0.2);

    --color-gray: #94a3b8;

    --alert-success-bg: #1a3a2a;
    --alert-success-color: #6ee7a0;
    --alert-error-bg: #3a1a1a;
    --alert-error-color: #fca5a5;
    --alert-warning-bg: #3a2a0a;
    --alert-warning-color: #fcd34d;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}