/* CSS Variables - Brand Design System */
:root {
    /* Colors - Primary Palette */
    --color-fire-red: #FF3333;
    --color-hot-orange: #FF6B35;
    --color-seductive-black: #0A0A0A;
    --color-deep-black: #000000;
    
    /* Colors - Accent */
    --color-gold: #FFD700;
    --color-cream: #FFF8F0;
    --color-white: #FFFFFF;
    
    /* Colors - Gradients */
    --gradient-fire: linear-gradient(135deg, #FF3333 0%, #FF6B35 50%, #FFD700 100%);
    --gradient-dark: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    --gradient-seductive: linear-gradient(135deg, #FF3333 0%, #8B0000 100%);
    --gradient-honey: linear-gradient(135deg, #FFD700 0%, #FF6B35 100%);
    
    /* Typography */
    --font-primary: 'Bebas Neue', cursive;
    --font-secondary: 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --text-8xl: 6rem;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 30px rgba(255, 51, 51, 0.5);
    --shadow-fire: 0 0 50px rgba(255, 107, 53, 0.6);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-index */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    
    /* Container */
    --container-max: 1200px;
    --container-padding: 1rem;
    
    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}