/* ======================================
   CactusIO Store - Zentrale CSS Variablen
   Alle Variablen konsolidiert - Version 2.0
====================================== */

:root {
    /* === FARBSYSTEM === */
    /* Primary Colors */
    --store-primary: #68BE7C;
    --store-primary-hover: #50a072;
    --store-primary-light: #8fd3a0;
    --store-primary-dark: #203C30;
    
    /* Secondary Colors */
    --store-secondary: #687CBE;
    --store-secondary-light: #8c9cde;
    --store-secondary-dark: #4a5f9e;
    
    /* Background System */
    --store-bg: #0a0a0a;
    --store-dark: #0B1E24;
    --store-surface: #1a1a1a;
    --store-surface-darker: #07111a;
    --store-card-bg: #1a1a1a;
    
    /* Text System */
    --store-text: #ffffff;
    --store-text-muted: #aaaaaa;
    --store-border: #333333;
    
    /* Status Colors */
    --store-success: #4CAF50;
    --store-warning: #FF9800;
    --store-error: #F44336;
    
    /* === GLASSMORPHISM SYSTEM === */
    --store-glass: rgba(10, 23, 27, 0.8);
    --store-glass-border: rgba(255, 255, 255, 0.15);
    --store-shadow: rgba(0, 0, 0, 0.25);
    
    /* Enhanced Glassmorphism */
    --glass-backdrop-blur: 20px;
    --glass-border-light: rgba(255, 255, 255, 0.2);
    --glass-shadow-light: 0 8px 32px rgba(0, 0, 0, 0.15);
    --glass-shadow-heavy: 0 16px 40px rgba(0, 0, 0, 0.25);
    
    /* === GLOW EFFECTS === */
    --store-glow-primary: 0 0 20px rgba(104, 190, 124, 0.4);
    --store-glow-secondary: 0 0 20px rgba(104, 124, 190, 0.4);
    --glow-subtle: 0 0 10px rgba(104, 190, 124, 0.2);
    --glow-strong: 0 0 30px rgba(104, 190, 124, 0.6);
    
    /* === SHADOW SYSTEM === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.3);
    
    /* === TRANSITION SYSTEM === */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-spring: 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    
    /* === SPACING SYSTEM === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* === BORDER RADIUS SYSTEM === */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* === TYPOGRAPHY === */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* === Z-INDEX SYSTEM === */
    --z-dropdown: 1000;
    --z-sidebar: 1001;
    --z-overlay: 1002;
    --z-modal: 1003;
    --z-toast: 1004;
    --z-tooltip: 1005;
    
    /* === COMPONENT SPECIFIC === */
    /* Header */
    --header-height: 80px;
    --header-height-scrolled: 70px;
    
    /* Cart */
    --cart-width: 400px;
    --cart-width-mobile: 100vw;
    
    /* Products */
    --product-card-width: 300px;
    --product-image-aspect: 16/9;
    
    /* Animation Timing */
    --animation-duration-fast: 0.15s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.6s;
}

/* === LIGHT MODE OVERRIDES === */
body.light-mode {
    /* Background System */
    --store-bg: #dbdbdb;
    --store-dark: #cccccc;
    --store-surface: #c0c0c0;
    --store-surface-darker: #e9e9e9;
    --store-card-bg: #f1f1f1;

    --store-primary: #4dbd67;
    --store-primary-hover: #558168;
    --store-primary-light: #65b379;
    --store-primary-dark: #203C30;
    
    /* Secondary Colors */
    --store-secondary: #687CBE;
    --store-secondary-light: #8c9cde;
    --store-secondary-dark: #4a5f9e;
    
    /* Text System */
    --store-text: #333333;
    --store-text-muted: #666666;
    --store-border: #e0e0e0;
    
    /* Glassmorphism für Light Mode */
    --store-glass: rgba(216, 216, 216, 0.8);
    --store-glass-border: rgba(0, 0, 0, 0.15);
    --store-shadow: rgba(0, 0, 0, 0.1);
    
    /* Enhanced Light Mode Glassmorphism */
    --glass-border-light: rgba(0, 0, 0, 0.1);
    --glass-shadow-light: 0 8px 32px rgba(0, 0, 0, 0.08);
    --glass-shadow-heavy: 0 16px 40px rgba(0, 0, 0, 0.12);
    
    /* Adjusted shadows for light mode */
    --shadow-xs: 0 1px 2px rgba(156, 156, 156, 0.03);
    --shadow-sm: 0 2px 4px rgba(155, 153, 153, 0.06);
    --shadow-md: 0 4px 8px rgba(153, 153, 153, 0.08);
    --shadow-lg: 0 8px 16px rgba(126, 126, 126, 0.12);
    --shadow-xl: 0 12px 24px rgba(143, 143, 143, 0.15);
    --shadow-2xl: 0 20px 40px rgba(139, 139, 139, 0.18);
}

/* === UTILITY CLASSES === */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Loading States */
.loading-spinner-base {
    border: 3px solid var(--store-glass-border);
    border-top: 3px solid var(--store-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner-sm { width: 20px; height: 20px; }
.loading-spinner-md { width: 30px; height: 30px; }
.loading-spinner-lg { width: 40px; height: 40px; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: var(--store-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Glassmorphism Base Classes */
.glass-surface {
    background: var(--store-glass);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border: 1px solid var(--store-glass-border);
}

.glass-card {
    background: var(--store-glass);
    backdrop-filter: blur(var(--glass-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--glass-backdrop-blur));
    border: 1px solid var(--store-glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow-light);
}

/* Hover Effects Base */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.hover-glow {
    transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: var(--glow-subtle);
}

/* Focus States */
.focus-ring:focus {
    outline: 2px solid var(--store-primary);
    outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .loading-spinner-base {
        animation: none;
        border-top-color: var(--store-primary);
    }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    :root {
        --store-glass-border: #ffffff;
        --store-border: #ffffff;
    }
    
    .light-mode {
        --store-glass-border: #000000;
        --store-border: #000000;
    }
}