/* ========== ZENTRALE CSS VARIABLEN ========== */
/* Diese Datei definiert alle CSS-Variablen für das gesamte Projekt */

:root {
    /* ========== FARBEN ========== */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #4ecdc4;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    
    /* ========== PRIDE FARBEN ========== */
    --pride-red: #e40303;
    --pride-orange: #ff8c00;
    --pride-yellow: #ffed00;
    --pride-green: #008018;
    --pride-blue: #0066ff;
    --pride-purple: #732982;
    
    /* ========== GRADIENTE ========== */
    --primary-gradient: linear-gradient(135deg, #667eea, #764ba2);
    --rainbow-gradient: linear-gradient(90deg, 
        #e40303 0%, 
        #ff8c00 16.66%, 
        #ffed00 33.33%, 
        #008018 50%, 
        #0066ff 66.66%, 
        #732982 83.33%, 
        #e40303 100%);
    --success-gradient: linear-gradient(135deg, #28a745, #20c997);
    --warning-gradient: linear-gradient(135deg, #ffc107, #fd7e14);
    --danger-gradient: linear-gradient(135deg, #dc3545, #e83e8c);
    
    /* ========== TEXTFARBEN ========== */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #999;
    --text-light: #fff;
    
    /* ========== HINTERGRUNDFARBEN ========== */
    --bg-primary: #fff;
    --bg-secondary: #f8f9fa;
    --bg-dark: #343a40;
    --bg-light: #f8f9fa;
    
    /* ========== BORDERFARBEN ========== */
    --border-light: #e9ecef;
    --border-medium: #dee2e6;
    --border-dark: #adb5bd;
    --border-color: #dee2e6;
    
    /* ========== SHADOW ========== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.2);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.3);
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    
    /* ========== SPACING ========== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* ========== FONT SIZES ========== */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 28px;
    --font-4xl: 32px;
    
    /* ========== FONT WEIGHTS ========== */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ========== Z-INDEX HIERARCHIE ========== */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-mobile-nav: 850;
--z-navbar: 900;
--z-modal-backdrop: 10000;
--z-modal: 10001;
--z-popover: 11000;
--z-tooltip: 12000;
--z-toast: 9999999999;
--z-topbar-dropdown: 999999999;
--z-topbar: 99999999;

    /* ========== MOBILE OPTIMIERUNGEN ========== */
    --mobile-touch-target: 44px;
    --mobile-spacing: 16px;
    --mobile-border-radius: 12px;
    
    /* ========== BREAKPOINTS ========== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* ========== VERIFICATION BADGE ========== */
    --verification-badge-color: #28a745;
    --verification-badge-size: 14px;
    --verification-badge-size-large: 18px;
    --verification-badge-margin: 6px;
    --verification-badge-shadow: 0 1px 2px rgba(40, 167, 69, 0.3);
    --verification-badge-shadow-large: 0 2px 8px rgba(40, 167, 69, 0.3);
    --verification-badge-hover-scale: 1.2;
    --verification-badge-pulse-scale: 1.1;
    --verification-badge-pulse-opacity: 0.8;
    --verification-badge-animation-duration: 2s;
    --verification-badge-transition-duration: 0.2s;

    /* ========== CARD STYLES ========== */
    --card-bg: #fff;
    --card-border-color: #e9ecef;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.15);
    --card-border-radius: 16px;
    --card-padding: 20px;

    /* ========== BUTTON STYLES ========== */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-hover: var(--secondary-color);
    --primary-hover: var(--secondary-color);
    --btn-success-bg: var(--success-color);
    --btn-danger-bg: var(--danger-color);
    --btn-warning-bg: var(--warning-color);
    --btn-info-bg: var(--info-color);
    --btn-border-radius: 12px;
    --btn-padding: 12px 24px;
    --btn-font-size: 14px;
    --btn-font-weight: 600;
    --btn-transition: all 0.3s ease;

    /* ========== FORM STYLES ========== */
    --form-input-border: 2px solid #eee;
    --form-input-border-radius: 12px;
    --form-input-padding: 12px 16px;
    --form-input-focus-border: var(--primary-color);
    --form-input-bg: #fff;
    --form-label-color: #555;
    --form-label-font-weight: 600;
    --form-help-color: #666;
    --form-help-font-size: 12px;

    /* ========== MODAL STYLES ========== */
    --modal-bg: rgba(0, 0, 0, 0.5);
    --modal-content-bg: #fff;
    --modal-border-radius: 20px;
    --modal-shadow: 0 20px 60px rgba(0,0,0,0.3);
    --modal-padding: 30px;
    --modal-header-border: 1px solid #eee;
    --modal-close-color: #999;
    --modal-close-hover-color: #333;

    /* ========== AVATAR STYLES ========== */
    --avatar-border-radius: 50%;
    --avatar-border: 4px solid rgba(255,255,255,0.3);
    --avatar-bg: rgba(255,255,255,0.2);
    --avatar-shadow: 0 4px 12px rgba(0,0,0,0.15);

    /* ========== ONLINE STATUS ========== */
    --status-online-color: #28a745;
    --status-offline-color: #6c757d;
    --status-away-color: #ffc107;
    --status-busy-color: #dc3545;
    --status-bg: rgba(255, 255, 255, 0.2);
    --status-border: 1px solid rgba(255, 255, 255, 0.3);
    --status-border-radius: 12px;
    --status-font-size: 12px;
    --status-padding: 4px 8px;
    
    /* ========== ACCESSIBILITY STYLES ========== */
    --high-contrast-text-primary: #000;
    --high-contrast-text-secondary: #333;
    --high-contrast-bg-primary: #fff;
    --high-contrast-bg-secondary: #f0f0f0;
    --high-contrast-border: #000;
    --high-contrast-shadow: 0 2px 8px rgba(0,0,0,0.3);
    
    --large-font-size-base: 18px;
    --large-font-size-lg: 20px;
    --large-font-size-xl: 22px;
    --large-font-size-2xl: 26px;
    --large-font-size-3xl: 30px;
    --large-font-size-4xl: 36px;
}

/* ========== DARK MODE VARIABLEN ========== */
[data-theme="dark"] {
    /* ========== TEXTFARBEN ========== */
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-muted: #6c757d;
    --text-light: #fff;
    
    /* ========== HINTERGRUNDFARBEN ========== */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-dark: #343a40;
    --bg-light: #2d2d2d;
    
    /* ========== BORDERFARBEN ========== */
    --border-light: #404040;
    --border-medium: #555;
    --border-dark: #666;
    --border-color: #404040;
    
    /* ========== SHADOW ========== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 25px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.6);
    
    /* ========== CARD STYLES ========== */
    --card-bg: #2d2d2d;
    --card-border-color: #404040;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.4);
    
    /* ========== FORM STYLES ========== */
    --form-input-border: 2px solid #404040;
    --form-input-bg: #1a1a1a;
    --form-label-color: #e9ecef;
    --form-help-color: #adb5bd;
    
    /* ========== MODAL STYLES ========== */
    --modal-content-bg: #2d2d2d;
    --modal-header-border: 1px solid #404040;
    --modal-close-color: #adb5bd;
    --modal-close-hover-color: #e9ecef;
    
    /* ========== AVATAR STYLES ========== */
    --avatar-bg: rgba(255,255,255,0.1);
    --avatar-shadow: 0 4px 12px rgba(0,0,0,0.4);
    
    /* ========== STATUS STYLES ========== */
    --status-bg: rgba(0, 0, 0, 0.3);
    --status-border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* ========== ACCESSIBILITY STYLES ========== */
    --high-contrast-text-primary: #fff;
    --high-contrast-text-secondary: #ccc;
    --high-contrast-bg-primary: #000;
    --high-contrast-bg-secondary: #1a1a1a;
    --high-contrast-border: #fff;
    --high-contrast-shadow: 0 2px 8px rgba(255,255,255,0.3);
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
        --verification-badge-animation-duration: 0s;
        --verification-badge-transition-duration: 0s;
    }
}