/**
 * VARIABLES.CSS - Zentrale Design-Tokens
 * OPTIMIERT: Redundanzen entfernt, konsistente Benennung
 */

 :root {
    /* ========================================
       PRIMARY COLOR PALETTE - REDUZIERT
       ======================================== */
    --primary: #43ddff;
    --primary-rgb: 67, 221, 255;
    --secondary: #6eb4fe;
    --accent: #988cfd;
    --accent-2: #c364fc;
    --highlight: #ed3cfb;
    
    /* TECH COLORS */
    --tech-orange: #ff6b35;
    
    /* ========================================
       NEUTRAL COLORS
       ======================================== */
    --dark: #0a0a0f;
    --dark-secondary: #0f0f1a;
    --dark-card: #1a1a2e;
    --dark-surface: #16213e;
    --light: #ffffff;
    
    /* TEXT COLORS */
    --text-light: #e2e8f0;
    --text-muted: #64748b;
    --text-accent: #94a3b8;
    
    /* ========================================
       GRADIENTS - OPTIMIERT (nur 3 statt 6)
       ======================================== */
    --gradient-primary: linear-gradient(135deg, 
        var(--primary) 0%, 
        var(--secondary) 25%, 
        var(--accent) 50%, 
        var(--accent-2) 75%, 
        var(--highlight) 100%
    );
    
    --gradient-subtle: linear-gradient(135deg, 
        var(--primary) 0%, 
        var(--accent) 100%
    );
    
    --gradient-tech: linear-gradient(135deg, 
        var(--primary) 0%, 
        var(--tech-orange) 50%, 
        var(--highlight) 100%
    );
    
    /* ========================================
       GLASS EFFECTS - KONSOLIDIERT
       ======================================== */
    --glass-base: rgba(255, 255, 255, 0.05);
    --glass-elevated: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-strong: rgba(255, 255, 255, 0.15);
    
    /* Glass with color tints */
    --glass-primary: rgba(67, 221, 255, 0.05);
    --glass-primary-border: rgba(67, 221, 255, 0.15);
    
    /* ========================================
       SHADOWS - VEREINFACHT
       ======================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 30px rgba(67, 221, 255, 0.3);
    --shadow-glow-strong: 0 0 50px rgba(67, 221, 255, 0.5);
    
    /* ========================================
       SPACING - NEU: Konsistente Abstände
       ======================================== */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;
    
    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    --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: 2rem;
    --font-size-4xl: 3rem;
    
    /* ========================================
       TRANSITIONS - STANDARDISIERT
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    --z-background: -3;
    --z-particles: -2;
    --z-content: 1;
    --z-navigation: 1000;
    --z-modal: 9999;
    --z-loading: 10000;
}

/* ========================================
   DARK MODE READY (für zukünftige Erweiterung)
   ======================================== */
@media (prefers-color-scheme: light) {
    :root {
        --dark: #ffffff;
        --light: #0a0a0f;
        --text-light: #1a1a2e;
        --text-muted: #64748b;
    }
}

/* ========================================
   REDUCED MOTION - Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-slow: 0s;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}