/* ========== CSS Variables ========== */
:root {
    /* Light Theme Colors */
    --primary: #7B4EFF;         /* (Same as dark theme - keeps brand identity) */
    --primary-light: #9D7AFF;    /* (Same as dark theme) */
    --primary-dark: #5A2EE0;     /* (Same as dark theme) */
    --secondary: #00BFA5;        /* Slightly adjusted for better light mode visibility */
    --accent: #FF5252;           /* Brighter accent for light mode */
    
    /* Light theme background/text colors */
    --light: #FFFFFF;           /* Main background */
    --lighter: black;         /* Heading Text*/
    --dark: #F5F5F7;            /* Alternative background */
    --darker: #E8E8F0;          /* Borders/dividers */
    
    /* Nav Color */
    --Nav--Background: rgba(255, 255, 255, 0.5);
    --Nav--Background--Scrolled: rgba(255, 255, 255, 0.9);
    --Nav--Border: rgba(0, 0, 0, 0.05);
    
    /* Text colors */
    --gray: #5E5E6E;            /* Secondary text */
    --gray-light: #3A3A4A;       /* Primary text */
    --Price-Text:green;
    
    /* Effects (adjusted for light mode) */
    --shadow-sm: 0 1px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
    --glow: 0 0 20px rgba(123, 78, 255, 0.2);
    
    /* Transitions (same as dark theme) */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Sizes (same as dark theme) */
    --max-width: 1440px;
    --header-height: 80px;
    --header-logo-height: 80px;
    --Mobile-Menu-Profile-height:50px;
    
    --apex-primary: #7B4EFF;
    --apex-primary-light: #9D7AFF;
    --apex-primary-dark: #5A2EE0;
    --apex-secondary: #00BFA5;
    --apex-accent: #FF5252;
    --apex-light: #FFFFFF;
    --apex-lighter: black;
    --apex-dark: #F5F5F7;
    --apex-darker: #E8E8F0;
    --apex-gray: #5E5E6E;
    --apex-gray-light: #3A3A4A;
    --apex-shadow-sm: 0 1px 10px rgba(0, 0, 0, 0.05);
    --apex-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --apex-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
    --apex-glow: 0 0 20px rgba(123, 78, 255, 0.2);
    --apex-transition-fast: all 0.2s ease;
    --apex-transition-normal: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    --apex-transition-slow: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);

    --Skeleton-Gray:rgb(220,220,220);
    --Skeleton-Gray-Light:rgb(200,200,200);
    --Skeleton-Gray-Dark:rgb(180,180,180);
    }
    [data-theme="dark"] {
    /* Colors */
    --primary: #7B4EFF;
    --primary-light: #9D7AFF;
    --primary-dark: #5A2EE0;
    --secondary: #00D1B2;
    --accent: #FF5E7D;
    --dark: #0F0F1A;
    --darker: #070710;
    --light: #F8F9FF;
    --lighter: #FFFFFF;
    --gray: #8C8CA1;
    --gray-light: #D8D8E5;
    
    /* Effects */
    --shadow-sm: 0 1px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 30px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 50px rgba(0, 0, 0, 0.2);
    --glow: 0 0 20px rgba(123, 78, 255, 0.4);
    
    /* Nav Color */
    --Nav--Background:rgba(15, 15, 26, 0.8);
    --Nav--Background--Scrolled:rgba(7, 7, 16, 0.8);
    --Nav--Border: rgba(255, 255, 255, 0.05);
    
    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Sizes */
    --max-width: 1440px;
    --header-height: 80px;
    --header-logo-height:80px;
    
        /* Dark Theme - using friend's variable names with your dark values */
    --apex-light: #F8F9FF;
    --apex-lighter: #FFFFFF;
    --apex-dark: #0F0F1A;
    --apex-darker: #070710;
    --apex-gray: #8C8CA1;
    --apex-gray-light: #D8D8E5;
    --apex-secondary: #00D1B2;
    --apex-accent: #FF5E7D;
    --apex-shadow-sm: 0 1px 10px rgba(0, 0, 0, 0.08);
    --apex-shadow-md: 0 4px 30px rgba(0, 0, 0, 0.12);
    --apex-shadow-lg: 0 10px 50px rgba(0, 0, 0, 0.2);
    --apex-glow: 0 0 20px rgba(123, 78, 255, 0.4);
    --apex-nav-background: rgba(15, 15, 26, 0.8);
    --apex-nav-background-scrolled: rgba(7, 7, 16, 0.95);
    --apex-nav-border: rgba(255, 255, 255, 0.05);

    --Skeleton-Gray:rgb(20,20,20);
    --Skeleton-Gray-Light:rgb(30,30,30);
    --Skeleton-Gray-Dark:rgb(45,45,45);
    }