/* Main Application Styles */
:root {
    /* Braves Color Variables */
    --braves-navy: #13274F;
    --braves-red: #CE1141;
    --braves-red-hover: #B10E37;
    --braves-red-light: rgba(206, 17, 65, 0.1);
    --braves-navy-100: #E8EDF7;
    
    /* Spacing Variables */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius Variables */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    
    /* Transition Variables */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Z-Index Variables */
    --z-dropdown: 1000;
    --z-modal: 1050;
    --z-tooltip: 1100;
}

body { 
    font-family: 'Inter', sans-serif; 
}

/* Braves Theme Colors */
.bg-braves-navy { 
    background-color: #13274F; 
}

.text-braves-navy { 
    color: #13274F; 
}

.bg-braves-red { 
    background-color: #CE1141; 
}

.text-braves-red { 
    color: #CE1141; 
}

.border-braves-red { 
    border-color: #CE1141; 
}

/* Practice Button Styles */
.practice-btn { 
    transition: all 0.2s ease-in-out; 
    border: 2px solid transparent; 
}

.practice-btn:hover { 
    transform: translateY(-2px); 
    border-color: #CE1141; 
}

.practice-btn.active { 
    background-color: #CE1141; 
    color: white; 
    font-weight: 700; 
    border-color: #CE1141; 
}

/* Video Link Styles */
.video-link { 
    transition: all 0.2s ease-in-out; 
}

.video-link:hover { 
    transform: scale(1.05); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

/* Animation Styles */
.animate-fade-in { 
    animation: fadeIn 0.5s ease-in-out; 
}

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