/* =============================================================
   KATS GMBH - ZENTRALE CSS VARIABLEN
   Diese Datei enthält alle gemeinsam genutzten CSS-Variablen
   Muss als erste CSS-Datei geladen werden
============================================================= */

:root {
    /* ===== BRAND COLORS ===== */
    --primary: #1881dd;
    --secondary: #37b6fd;
    --dark-blue: #0f0743;
    --accent: #2563eb;
    --success: #00C851;
    --danger: #FF4444;
    
    /* ===== NEUTRAL COLORS ===== */
    --dark: #1a1a1a;
    --gray-900: #2D3436;
    --gray-800: #4A4E69;
    --gray-700: #636E72;
    --gray-600: #95A5A6;
    --gray-500: #B2BEC3;
    --gray-400: #DFE6E9;
    --gray-300: #F0F3F4;
    --gray-200: #F8F9FA;
    --white: #FFFFFF;
    --bg-light: #f8fafc;
    
    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-dark: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary) 100%);
    --gradient-interactive: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    --gradient-accent: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    
    /* ===== SHADOWS ===== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
    --shadow-2xl: 0 24px 64px rgba(0,0,0,0.20);
    
    /* ===== NEUMORPHISM ===== */
    --shadow-neu: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.8);
    --shadow-neu-inset: inset 4px 4px 8px rgba(0,0,0,0.08), inset -4px -4px 8px rgba(255,255,255,0.8);
    
    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', sans-serif;
    
    /* ===== SPACING ===== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* ===== ANIMATIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-slower: 800ms ease;
    
    /* ===== CUSTOM PROPERTIES ===== */
    --rail-start: var(--primary);
    --rail-end: var(--secondary);
    
    /* ===== Z-INDEX SCALE ===== */
    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-fixed: 1020;
    --z-modal-backdrop: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;
    --z-toast: 1070;
    --z-navigation: 1080;
    --z-mobile-menu: 9999;
    --z-navigation-scrolled: 10000;
    --z-navigation-elements: 10001;
    --z-mobile-menu-close: 10002;
    
    /* ===== BREAKPOINTS (for JavaScript usage) ===== */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
}

/* ===== ADDITIONAL CUSTOM PROPERTIES FOR SPECIFIC COMPONENTS ===== */

/* Cookie Banner */
:root {
    --cookie-banner-bg: rgba(255, 255, 255, 0.95);
    --cookie-banner-border: rgba(255, 255, 255, 0.2);
    --cookie-banner-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Service Navigator */
:root {
    --service-nav-rail-bg: rgba(24, 129, 221, 0.2);
    --service-nav-rail-active: linear-gradient(180deg, #1881dd 0%, #37b6fd 100%);
    --service-nav-point-bg: #fff;
    --service-nav-point-border: #ddd;
    --service-nav-tooltip-bg: rgba(15, 7, 67, 0.95);
}

/* Mobile Menu */
:root {
    --mobile-menu-bg: var(--gradient-dark);
    --mobile-menu-overlay: rgba(0, 0, 0, 0.8);
    --mobile-menu-item-hover: rgba(255, 255, 255, 0.05);
    --mobile-submenu-bg: rgba(255, 255, 255, 0.05);
    --mobile-submenu-active: rgba(55, 182, 253, 0.08);
}

/* Form Elements */
:root {
    --form-bg: var(--white);
    --form-border: rgba(0, 0, 0, 0.05);
    --form-focus-border: var(--primary);
    --form-focus-shadow: rgba(24, 129, 221, 0.1);
    --form-label-color: var(--gray-700);
    --form-placeholder-color: rgba(255, 255, 255, 0.5);
}

/* Footer */
:root {
    --footer-bg: var(--gradient-dark);
    --footer-text: rgba(255, 255, 255, 0.7);
    --footer-link-hover: var(--secondary);
    --footer-border: rgba(255, 255, 255, 0.1);
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --cookie-banner-bg: rgba(26, 26, 46, 0.95);
        --cookie-banner-border: rgba(255, 255, 255, 0.1);
        --form-bg: var(--gray-800);
        --form-border: rgba(255, 255, 255, 0.1);
    }
}

/* ===== UTILITY CLASSES FOR CONSISTENT USAGE ===== */

/* Colors */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--gray-600); }

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-dark { background: var(--gradient-dark); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* Transitions */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* Spacing */
.space-xs { margin: var(--space-xs); }
.space-sm { margin: var(--space-sm); }
.space-md { margin: var(--space-md); }
.space-lg { margin: var(--space-lg); }
.space-xl { margin: var(--space-xl); }

/* Typography */
.font-primary { font-family: var(--font-primary); }
.font-display { font-family: var(--font-display); }