/**
 * BTFC Stats Independent Menu System - CSS Variables
 * 
 * CSS custom properties for easy theming and customization
 * 
 * @package BTFC_Stats
 * @since 1.0.0
 */

/* ============================================
   Color Variables
   ============================================ */

:root {
    /* Primary Colors */
    --btfc-menu-primary: #2d398c;
    --btfc-menu-primary-dark: #1e2a5a;
    --btfc-menu-primary-light: #3d4a9c;
    
    /* Accent Colors */
    --btfc-menu-accent: #FFC10C;
    --btfc-menu-accent-dark: #e6a800;
    --btfc-menu-accent-light: #ffd633;
    
    /* Text Colors */
    --btfc-menu-text-primary: #ffffff;
    --btfc-menu-text-secondary: rgba(255, 255, 255, 0.9);
    --btfc-menu-text-muted: rgba(255, 255, 255, 0.7);
    --btfc-menu-text-dark: #2d398c;
    
    /* Background Colors */
    --btfc-menu-bg-primary: #2d398c;
    --btfc-menu-bg-secondary: rgba(255, 255, 255, 0.1);
    --btfc-menu-bg-hover: rgba(255, 255, 255, 0.15);
    --btfc-menu-bg-active: rgba(255, 255, 255, 0.2);
    --btfc-menu-bg-overlay: rgba(45, 57, 140, 0.95);
    
    /* Border Colors */
    --btfc-menu-border-primary: rgba(255, 193, 12, 0.3);
    --btfc-menu-border-secondary: rgba(255, 255, 255, 0.2);
    --btfc-menu-border-hover: rgba(255, 193, 12, 0.5);
    
    /* Shadow Colors */
    --btfc-menu-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --btfc-menu-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
    --btfc-menu-shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.2);
    --btfc-menu-shadow-glow: 0 0 20px rgba(255, 193, 12, 0.3);
}

/* ============================================
   Layout Variables
   ============================================ */

:root {
    /* Container */
    --btfc-menu-max-width: 1200px;
    --btfc-menu-padding: 15px 20px;
    --btfc-menu-padding-mobile: 15px;
    --btfc-menu-gap: 10px 20px;
    --btfc-menu-gap-mobile: 15px;
    
    /* Heights */
    --btfc-menu-height-desktop: 100px;
    --btfc-menu-height-mobile: 80px;
    --btfc-menu-height-sticky: 60px;
    --btfc-menu-height-sticky-mobile: 50px;
    --btfc-menu-min-height: var(--btfc-menu-height-desktop);
    
    /* Z-Index */
    --btfc-menu-z-index: 1000;
    --btfc-menu-z-index-sticky: 999;
    --btfc-menu-z-index-dropdown: 1001;
    --btfc-menu-z-index-mobile: 10000;
}

/* ============================================
   Typography Variables
   ============================================ */

:root {
    /* Font Family */
    --btfc-menu-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --btfc-menu-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Font Sizes */
    --btfc-menu-font-size-xs: 11px;
    --btfc-menu-font-size-sm: 12px;
    --btfc-menu-font-size-base: 14px;
    --btfc-menu-font-size-lg: 16px;
    --btfc-menu-font-size-xl: 18px;
    --btfc-menu-font-size-2xl: 20px;
    --btfc-menu-font-size-3xl: 24px;
    --btfc-menu-font-size-4xl: 28px;
    
    /* Font Weights */
    --btfc-menu-font-weight-normal: 400;
    --btfc-menu-font-weight-medium: 500;
    --btfc-menu-font-weight-semibold: 600;
    --btfc-menu-font-weight-bold: 700;
    
    /* Line Heights */
    --btfc-menu-line-height-tight: 1.2;
    --btfc-menu-line-height-normal: 1.4;
    --btfc-menu-line-height-relaxed: 1.6;
}

/* ============================================
   Spacing Variables
   ============================================ */

:root {
    /* Base Spacing */
    --btfc-menu-space-1: 4px;
    --btfc-menu-space-2: 8px;
    --btfc-menu-space-3: 12px;
    --btfc-menu-space-4: 16px;
    --btfc-menu-space-5: 20px;
    --btfc-menu-space-6: 24px;
    --btfc-menu-space-8: 32px;
    --btfc-menu-space-10: 40px;
    --btfc-menu-space-12: 48px;
    --btfc-menu-space-16: 64px;
    
    /* Component Spacing */
    --btfc-menu-padding-xs: 4px 8px;
    --btfc-menu-padding-sm: 6px 12px;
    --btfc-menu-padding-base: 8px 16px;
    --btfc-menu-padding-lg: 12px 20px;
    --btfc-menu-padding-xl: 16px 24px;
    
    /* Border Radius */
    --btfc-menu-radius-sm: 4px;
    --btfc-menu-radius-base: 6px;
    --btfc-menu-radius-lg: 8px;
    --btfc-menu-radius-xl: 12px;
    --btfc-menu-radius-full: 50%;
}

/* ============================================
   Animation Variables
   ============================================ */

:root {
    /* Transitions */
    --btfc-menu-transition-fast: 0.15s ease;
    --btfc-menu-transition-base: 0.3s ease;
    --btfc-menu-transition-slow: 0.5s ease;
    
    /* Easing Functions */
    --btfc-menu-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --btfc-menu-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --btfc-menu-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --btfc-menu-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Animation Durations */
    --btfc-menu-duration-fast: 150ms;
    --btfc-menu-duration-base: 300ms;
    --btfc-menu-duration-slow: 500ms;
}

/* ============================================
   Breakpoint Variables
   ============================================ */

:root {
    /* Breakpoints */
    --btfc-menu-breakpoint-sm: 480px;
    --btfc-menu-breakpoint-md: 768px;
    --btfc-menu-breakpoint-lg: 1024px;
    --btfc-menu-breakpoint-xl: 1200px;
    --btfc-menu-breakpoint-2xl: 1400px;
}

/* ============================================
   Component-Specific Variables
   ============================================ */

:root {
    /* Club Badge */
    --btfc-badge-size-desktop: 115px;
    --btfc-badge-size-mobile: 80px;
    --btfc-badge-size-sticky: 40px;
    --btfc-badge-size-sticky-mobile: 32px;
    
    /* Social Links */
    --btfc-social-size-desktop: 40px;
    --btfc-social-size-mobile: 35px;
    --btfc-social-size-sticky: 32px;
    --btfc-social-icon-size: 20px;
    
    /* Menu Items */
    --btfc-menu-item-height: 44px;
    --btfc-menu-item-padding: 12px 16px;
    --btfc-menu-item-gap: 8px;
    
    /* Dropdown */
    --btfc-dropdown-min-width: 200px;
    --btfc-dropdown-max-height: 400px;
    --btfc-dropdown-padding: 8px 0;
    
    /* Mobile Menu */
    --btfc-mobile-toggle-size: 44px;
    --btfc-mobile-hamburger-width: 20px;
    --btfc-mobile-hamburger-height: 16px;
    --btfc-mobile-hamburger-line-height: 2px;
}

/* ============================================
   Theme Variations
   ============================================ */

/* Light Theme (if needed) */
[data-btfc-theme="light"] {
    --btfc-menu-primary: #ffffff;
    --btfc-menu-text-primary: #2d398c;
    --btfc-menu-text-secondary: rgba(45, 57, 140, 0.9);
    --btfc-menu-text-muted: rgba(45, 57, 140, 0.7);
    --btfc-menu-bg-primary: #ffffff;
    --btfc-menu-bg-secondary: rgba(45, 57, 140, 0.1);
    --btfc-menu-bg-hover: rgba(45, 57, 140, 0.15);
    --btfc-menu-border-secondary: rgba(45, 57, 140, 0.2);
}

/* Dark Theme (default) */
[data-btfc-theme="dark"] {
    --btfc-menu-primary: #2d398c;
    --btfc-menu-text-primary: #ffffff;
    --btfc-menu-text-secondary: rgba(255, 255, 255, 0.9);
    --btfc-menu-text-muted: rgba(255, 255, 255, 0.7);
    --btfc-menu-bg-primary: #2d398c;
    --btfc-menu-bg-secondary: rgba(255, 255, 255, 0.1);
    --btfc-menu-bg-hover: rgba(255, 255, 255, 0.15);
    --btfc-menu-border-secondary: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Accessibility Variables
   ============================================ */

:root {
    /* Focus Styles */
    --btfc-menu-focus-outline: 2px solid var(--btfc-menu-accent);
    --btfc-menu-focus-outline-offset: 2px;
    
    /* High Contrast Support */
    --btfc-menu-contrast-border: 2px solid var(--btfc-menu-text-primary);
    
    /* Reduced Motion */
    --btfc-menu-motion-reduce: 0.01ms;
}

/* ============================================
   Print Variables
   ============================================ */

@media print {
    :root {
        --btfc-menu-bg-primary: transparent;
        --btfc-menu-text-primary: #000000;
        --btfc-menu-shadow-light: none;
        --btfc-menu-shadow-medium: none;
        --btfc-menu-shadow-heavy: none;
    }
}