/* ==========================================================================
   SpeedL Design System - Modern Apple-Inspired UI Framework
   Version: 2.0
   ========================================================================== */

/* ==========================================================================
   Core Design Tokens
   ========================================================================== */

:root {
    /* Primary Colors - Deep Gold Theme */
    --speedl-gold: rgba(184, 134, 11, 1);
    --speedl-gold-light: rgba(184, 134, 11, 0.15);
    --speedl-gold-medium: rgba(184, 134, 11, 0.35);
    --speedl-gold-dark: rgba(133, 77, 14, 1);
    --speedl-gold-bright: rgba(217, 158, 16, 1);
    
    /* Secondary Colors */
    --speedl-bronze: rgba(161, 84, 42, 1);
    --speedl-bronze-light: rgba(161, 84, 42, 0.15);
    --speedl-bronze-medium: rgba(161, 84, 42, 0.35);
    --speedl-copper: rgba(184, 115, 51, 1);
    --speedl-brass: rgba(181, 166, 66, 1);
    
    /* System Colors */
    --speedl-red: rgba(220, 53, 69, 1);
    --speedl-red-light: rgba(220, 53, 69, 0.15);
    --speedl-orange: rgba(255, 133, 27, 1);
    --speedl-green: rgba(40, 167, 69, 1);
    
    /* Neutral Colors - Deep Black Theme */
    --speedl-black: rgba(0, 0, 0, 1);
    --speedl-gray-1: rgba(15, 15, 15, 1);
    --speedl-gray-2: rgba(25, 25, 25, 1);
    --speedl-gray-3: rgba(35, 35, 35, 1);
    --speedl-gray-4: rgba(45, 45, 45, 1);
    --speedl-gray-5: rgba(65, 65, 65, 1);
    --speedl-gray-6: rgba(85, 85, 85, 1);
    
    /* Text Colors */
    --speedl-text-primary: rgba(255, 255, 255, 0.95);
    --speedl-text-secondary: rgba(255, 255, 255, 0.7);
    --speedl-text-tertiary: rgba(255, 255, 255, 0.5);
    
    /* Surface Colors */
    --speedl-surface-primary: var(--speedl-black);
    --speedl-surface-secondary: var(--speedl-gray-1);
    --speedl-surface-elevated: var(--speedl-gray-2);
    
    /* Border & Divider */
    --speedl-border-light: rgba(255, 255, 255, 0.1);
    --speedl-border-medium: rgba(255, 255, 255, 0.2);
    --speedl-divider: rgba(99, 99, 102, 0.3);
    
    /* Radius */
    --speedl-radius-small: 8px;
    --speedl-radius-medium: 12px;
    --speedl-radius-large: 16px;
    --speedl-radius-xlarge: 20px;
    --speedl-radius-xxlarge: 24px;
    --speedl-radius-rounded: 28px;
    
    /* Spacing */
    --speedl-space-xs: 4px;
    --speedl-space-sm: 8px;
    --speedl-space-md: 12px;
    --speedl-space-lg: 16px;
    --speedl-space-xl: 20px;
    --speedl-space-xxl: 24px;
    --speedl-space-xxxl: 32px;
    
    /* Animation */
    --speedl-transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --speedl-transition-medium: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --speedl-transition-slow: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    --speedl-transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Shadows */
    --speedl-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.12);
    --speedl-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
    --speedl-shadow-large: 0 8px 32px rgba(0, 0, 0, 0.2);
    --speedl-shadow-xlarge: 0 16px 48px rgba(0, 0, 0, 0.25);
    
    /* Blur Effects */
    --speedl-blur-light: blur(10px) saturate(150%);
    --speedl-blur-medium: blur(20px) saturate(180%);
    --speedl-blur-heavy: blur(40px) saturate(200%);
}

/* ==========================================================================
   Global Utility Classes
   ========================================================================== */

.speedl-glass-light {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: var(--speedl-blur-light) !important;
    border: 1px solid var(--speedl-border-light) !important;
}

.speedl-glass-medium {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: var(--speedl-blur-medium) !important;
    border: 1px solid var(--speedl-border-medium) !important;
}

.speedl-glass-heavy {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: var(--speedl-blur-heavy) !important;
    border: 1px solid var(--speedl-border-medium) !important;
}

/* ==========================================================================
   Button System
   ========================================================================== */

.speedl-btn {
    border-radius: var(--speedl-radius-xlarge) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    transition: all var(--speedl-transition-bounce) !important;
    backdrop-filter: var(--speedl-blur-light) !important;
}

.speedl-btn-primary {
    background: linear-gradient(145deg, var(--speedl-gold), var(--speedl-copper)) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 
        0 8px 32px rgba(184, 134, 11, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}

.speedl-btn-primary:hover {
    transform: translateY(-4px) scale(1.02) !important;
    background: linear-gradient(145deg, var(--speedl-gold-bright), var(--speedl-gold)) !important;
    box-shadow: 
        0 16px 48px rgba(184, 134, 11, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3) !important;
}

.speedl-btn-secondary {
    background: var(--speedl-glass-light) !important;
    color: var(--speedl-text-primary) !important;
    border: 1px solid var(--speedl-border-medium) !important;
}

.speedl-btn-secondary:hover {
    background: var(--speedl-gold-light) !important;
    border-color: var(--speedl-gold-medium) !important;
    color: var(--speedl-gold-bright) !important;
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 4px 16px var(--speedl-gold-light) !important;
}

.speedl-btn-danger {
    background: linear-gradient(145deg, var(--speedl-red), rgba(255, 45, 85, 1)) !important;
    color: white !important;
    border: none !important;
}

.speedl-btn-danger:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(255, 69, 58, 0.35) !important;
}

/* ==========================================================================
   Card System
   ========================================================================== */

.speedl-card {
    background: var(--speedl-glass-light) !important;
    border-radius: var(--speedl-radius-rounded) !important;
    border: 1px solid var(--speedl-border-light) !important;
    transition: all var(--speedl-transition-slow) !important;
    box-shadow: var(--speedl-shadow-medium) !important;
}

.speedl-card:hover {
    transform: translateY(-12px) rotateX(2deg) !important;
    background: var(--speedl-glass-medium) !important;
    border-color: var(--speedl-blue-medium) !important;
    box-shadow: var(--speedl-shadow-xlarge), 0 12px 32px var(--speedl-blue-light) !important;
}

.speedl-card-elevated {
    background: var(--speedl-glass-medium) !important;
    box-shadow: var(--speedl-shadow-large) !important;
}

/* ==========================================================================
   Input System
   ========================================================================== */

.speedl-input {
    background: var(--speedl-surface-elevated) !important;
    border: 1px solid var(--speedl-border-light) !important;
    border-radius: var(--speedl-radius-xlarge) !important;
    color: var(--speedl-text-primary) !important;
    transition: all var(--speedl-transition-medium) !important;
    backdrop-filter: var(--speedl-blur-light) !important;
}

.speedl-input:focus {
    border-color: var(--speedl-blue) !important;
    box-shadow: 0 0 0 4px var(--speedl-blue-light) !important;
    background: var(--speedl-glass-medium) !important;
}

/* ==========================================================================
   Navigation System
   ========================================================================== */

.speedl-nav-item {
    border-radius: var(--speedl-radius-large) !important;
    margin: var(--speedl-space-xs) var(--speedl-space-md) !important;
    transition: all var(--speedl-transition-medium) !important;
    backdrop-filter: var(--speedl-blur-light) !important;
}

.speedl-nav-item:hover {
    background: var(--speedl-blue-light) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 16px var(--speedl-blue-light) !important;
}

.speedl-nav-item.active {
    background: linear-gradient(135deg, var(--speedl-blue-medium), var(--speedl-purple-medium)) !important;
    border: 1px solid var(--speedl-blue-medium) !important;
    box-shadow: 
        0 8px 32px var(--speedl-blue-light),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Animation Helpers
   ========================================================================== */

.speedl-fade-in {
    animation: speedlFadeIn 0.6s ease-out !important;
}

.speedl-slide-up {
    animation: speedlSlideUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.speedl-scale-in {
    animation: speedlScaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes speedlFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes speedlSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes speedlScaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --speedl-space-xxxl: 24px;
    }
    
    .speedl-card {
        border-radius: var(--speedl-radius-xxlarge) !important;
    }
}

@media (max-width: 768px) {
    :root {
        --speedl-space-xxxl: 20px;
    }
    
    .speedl-card {
        border-radius: var(--speedl-radius-xlarge) !important;
    }
    
    .speedl-btn {
        border-radius: var(--speedl-radius-large) !important;
    }
}

@media (max-width: 480px) {
    :root {
        --speedl-space-xxxl: 16px;
    }
    
    .speedl-card {
        border-radius: var(--speedl-radius-medium) !important;
    }
}