/* Color Palette - Centralized Color Variables */
:root {
    /* Primary Colors - Black Based Theme */
    --primary-black: #000000;
    --secondary-black: #1a1a1a;
    --dark-gray: #2c2c2c;
    --medium-gray: #4a4a4a;
    --light-gray: #6c757d;
    --lighter-gray: #adb5bd;
    --lightest-gray: #e9ecef;
    --off-white: #f8f9fa;
    --pure-white: #ffffff;
    
    /* Accent Colors */
    --accent-gold: #000000;
    --accent-silver: #c0c0c0;
    --accent-rose-gold: #1a1a1a;
    
    /* Status Colors */
    --success-green: #28a745;
    --warning-orange: #ffc107;
    --error-red: #dc3545;
    --info-blue: #17a2b8;
    
    /* Overlay Colors */
    --overlay-black-light: rgba(0, 0, 0, 0.3);
    --overlay-black-medium: rgba(0, 0, 0, 0.5);
    --overlay-black-dark: rgba(0, 0, 0, 0.7);
    --overlay-white-light: rgba(255, 255, 255, 0.1);
    --overlay-white-medium: rgba(255, 255, 255, 0.3);
    
    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-dark: rgba(0, 0, 0, 0.1);
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.3);
    
    /* Gradient Colors */
    --gradient-black: linear-gradient(135deg, var(--primary-black), var(--dark-gray));
    --gradient-gray: linear-gradient(135deg, var(--dark-gray), var(--medium-gray));
    --gradient-gold: linear-gradient(135deg, var(--accent-gold), var(--accent-rose-gold));
    
    /* Typography Colors */
    --text-primary: var(--primary-black);
    --text-secondary: var(--medium-gray);
    --text-light: var(--light-gray);
    --text-white: var(--pure-white);
    --text-gold: var(--accent-gold);
    
    /* Background Colors */
    --bg-primary: var(--pure-white);
    --bg-secondary: var(--off-white);
    --bg-dark: var(--primary-black);
    --bg-darker: var(--secondary-black);
    --bg-gray: var(--lightest-gray);
    
    /* Button Colors */
    --btn-primary-bg: var(--primary-black);
    --btn-primary-hover: var(--dark-gray);
    --btn-secondary-bg: var(--accent-gold);
    --btn-secondary-hover: #333333;
    --btn-outline-border: var(--primary-black);
    --btn-outline-hover-bg: var(--primary-black);
    
    /* Input Colors */
    --input-bg: var(--pure-white);
    --input-border: var(--lightest-gray);
    --input-focus-border: var(--primary-black);
    --input-placeholder: var(--light-gray);
    
    /* Card Colors */
    --card-bg: var(--pure-white);
    --card-border: var(--lightest-gray);
    --card-shadow: var(--shadow-light);
    --card-hover-shadow: var(--shadow-medium);
    
    /* Animation Durations */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
}

/* ====================================== */
/* ADDITIONAL COLOR VARIABLES */
/* ====================================== */

/* Gold/Accent Color Alpha Variations */
:root {
    --accent-gold-alpha-01: rgba(0, 0, 0, 0.01);
    --accent-gold-alpha-02: rgba(0, 0, 0, 0.02);
    --accent-gold-alpha-03: rgba(0, 0, 0, 0.03);
    --accent-gold-alpha-04: rgba(0, 0, 0, 0.04);
    --accent-gold-alpha-05: rgba(0, 0, 0, 0.05);
    --accent-gold-alpha-06: rgba(0, 0, 0, 0.06);
    --accent-gold-alpha-08: rgba(0, 0, 0, 0.08);
    --accent-gold-alpha-10: rgba(0, 0, 0, 0.1);
    --accent-gold-alpha-12: rgba(0, 0, 0, 0.12);
    --accent-gold-alpha-15: rgba(0, 0, 0, 0.15);
    --accent-gold-alpha-16: rgba(0, 0, 0, 0.16);
    --accent-gold-alpha-18: rgba(0, 0, 0, 0.18);
    --accent-gold-alpha-20: rgba(0, 0, 0, 0.2);
    --accent-gold-alpha-25: rgba(0, 0, 0, 0.25);
    --accent-gold-alpha-30: rgba(0, 0, 0, 0.3);
    --accent-gold-alpha-35: rgba(0, 0, 0, 0.35);
    --accent-gold-alpha-40: rgba(0, 0, 0, 0.4);
    --accent-gold-alpha-50: rgba(0, 0, 0, 0.5);
    --accent-gold-alpha-80: rgba(0, 0, 0, 0.8);
}

/* White Alpha Variations */
:root {
    --white-alpha-06: rgba(255, 255, 255, 0.06);
    --white-alpha-08: rgba(255, 255, 255, 0.08);
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    --white-alpha-12: rgba(255, 255, 255, 0.12);
    --white-alpha-15: rgba(255, 255, 255, 0.15);
    --white-alpha-20: rgba(255, 255, 255, 0.2);
    --white-alpha-25: rgba(255, 255, 255, 0.25);
    --white-alpha-30: rgba(255, 255, 255, 0.3);
    --white-alpha-35: rgba(255, 255, 255, 0.35);
    --white-alpha-40: rgba(255, 255, 255, 0.4);
    --white-alpha-50: rgba(255, 255, 255, 0.5);
    --white-alpha-55: rgba(255, 255, 255, 0.55);
    --white-alpha-70: rgba(255, 255, 255, 0.7);
    --white-alpha-75: rgba(255, 255, 255, 0.75);
    --white-alpha-80: rgba(255, 255, 255, 0.8);
    --white-alpha-90: rgba(255, 255, 255, 0.9);
    --white-alpha-95: rgba(255, 255, 255, 0.95);
    --white-alpha-98: rgba(255, 255, 255, 0.98);
}

/* Black Alpha Variations */
:root {
    --black-alpha-02: rgba(0, 0, 0, 0.02);
    --black-alpha-03: rgba(0, 0, 0, 0.03);
    --black-alpha-04: rgba(0, 0, 0, 0.04);
    --black-alpha-05: rgba(0, 0, 0, 0.05);
    --black-alpha-06: rgba(0, 0, 0, 0.06);
    --black-alpha-08: rgba(0, 0, 0, 0.08);
    --black-alpha-10: rgba(0, 0, 0, 0.1);
    --black-alpha-12: rgba(0, 0, 0, 0.12);
    --black-alpha-15: rgba(0, 0, 0, 0.15);
    --black-alpha-16: rgba(0, 0, 0, 0.16);
    --black-alpha-18: rgba(0, 0, 0, 0.18);
    --black-alpha-20: rgba(0, 0, 0, 0.2);
    --black-alpha-25: rgba(0, 0, 0, 0.25);
    --black-alpha-30: rgba(0, 0, 0, 0.3);
    --black-alpha-40: rgba(0, 0, 0, 0.4);
    --black-alpha-50: rgba(0, 0, 0, 0.5);
    --black-alpha-60: rgba(0, 0, 0, 0.6);
    --black-alpha-80: rgba(0, 0, 0, 0.8);
    --black-alpha-90: rgba(0, 0, 0, 0.9);
}

/* Background Color Alpha Variations */
:root {
    --bg-light-alpha-40: rgba(248, 249, 250, 0.4);
    --bg-light-alpha-50: rgba(248, 249, 250, 0.5);
    --bg-light-alpha-60: rgba(248, 249, 250, 0.6);
    --bg-light-alpha-80: rgba(248, 249, 250, 0.8);
    --bg-light-alpha-95: rgba(248, 249, 250, 0.95);
}

/* Border Color Alpha Variations */
:root {
    --border-alpha-40: rgba(233, 236, 239, 0.4);
    --border-alpha-50: rgba(233, 236, 239, 0.5);
    --border-alpha-60: rgba(233, 236, 239, 0.6);
    --border-alpha-80: rgba(233, 236, 239, 0.8);
}

/* Social Media Brand Colors */
:root {
    --social-google: #db4437;
    --social-facebook: #4267b2;
    --social-facebook-alt: #1877f2;
    --social-instagram: #e4405f;
    --social-whatsapp: #25d366;
    --social-twitter: #1da1f2;
    --social-youtube: #ff0000;
    --social-linkedin: #0077b5;
    --social-tiktok: #000000;
}

/* Additional System Colors */
:root {
    --accent-gold-light: #333333;
    --accent-gold-dark: #000000;
    --accent-gold-alpha-90: rgba(0, 0, 0, 0.9);
    --accent-gold-alpha-95: rgba(0, 0, 0, 0.95);
    --accent-gold-alpha-98: rgba(0, 0, 0, 0.98);
    --success-green-dark: #218838;
    --error-red-dark: #c82333;
    --warning-yellow: #ffc107;
    --warning-yellow-alt: #f4d03f;
    --password-weak: #ff6b35;
    --password-medium: #ffa500;
    --password-strong: #4a90e2;
    
    /* Additional color variations */
    --warning-orange: #e67e22;
    --success-alt: #2ecc71;
    --success-alt-dark: #27ae60;
    --info-alt: #3498db;
    --info-alt-dark: #2980b9;
    --purple: #9b59b6;
    --purple-dark: #8e44ad;
    --gold-bright: #ffffff;
    --gray-medium: #666;
    --gray-light-alt: #ddd;
    
    /* Additional specific colors from menu.css */
    --cream-light: #f8f9fa;
    --cream-medium: #e9ecef;
    --gold-dark-alt: #000000;
    --gray-border: #f1f1f1;
    --red-dark: #c0392b;
    --green-success: #27ae60;
    --green-success-light: #2ecc71;
    --green-success-dark: #229954;
    --green-success-alt: #28b463;
    
    /* Additional colors for index.css */
    --gold-bright-alt: #ffffff;
    --gold-bright-alt2: #f8f9fa;
    --bg-light-alt: #fafbfc;
    --bg-light-alt2: #fafafa;
    --whatsapp-green: #25d366;
    --whatsapp-dark: #128c7e;
    --whatsapp-darker: #075e54;
    --youtube-red: #ff0000;
    --youtube-dark: #cc0000;
    --youtube-darker: #e60000;
    --youtube-darkest: #b30000;
    --linkedin-blue: #0077b5;
    --linkedin-dark: #005582;
    --linkedin-darker: #004066;
    --twitter-blue: #1da1f2;
    --twitter-dark: #0d8bd6;
    --twitter-darker: #0a73b8;
    --facebook-blue: #1877f2;
    --facebook-alt: #42a5f5;
    --facebook-dark: #166fe5;
    --facebook-darker: #1565c0;
    --instagram-pink: #e4405f;
    --instagram-purple: #833ab4;
    --instagram-orange: #fcb045;
    --instagram-pink-dark: #d6336c;
    --instagram-purple-dark: #7209b7;
    --instagram-orange-dark: #f19c3a;
    --tiktok-black: #000000;
    --tiktok-gray: #333333;
}

/* Social Media Alpha Variations */
:root {
    --social-google-alpha-05: rgba(219, 68, 55, 0.05);
    --social-google-alpha-20: rgba(219, 68, 55, 0.2);
    --social-facebook-alpha-05: rgba(66, 103, 178, 0.05);
    --social-facebook-alpha-20: rgba(66, 103, 178, 0.2);
}

/* Success/Error/Warning Alpha Variations */
:root {
    --success-alpha-05: rgba(40, 167, 69, 0.05);
    --success-alpha-10: rgba(40, 167, 69, 0.1);
    --success-alpha-15: rgba(40, 167, 69, 0.15);
    --success-alpha-20: rgba(40, 167, 69, 0.2);
    --success-alpha-30: rgba(40, 167, 69, 0.3);
    
    --error-alpha-02: rgba(220, 53, 69, 0.02);
    --error-alpha-05: rgba(220, 53, 69, 0.05);
    --error-alpha-10: rgba(220, 53, 69, 0.1);
    --error-alpha-15: rgba(220, 53, 69, 0.15);
    --error-alpha-20: rgba(220, 53, 69, 0.2);
    --error-alpha-30: rgba(220, 53, 69, 0.3);
    --error-alpha-40: rgba(231, 76, 60, 0.4);
    
    --warning-alpha-05: rgba(255, 193, 7, 0.05);
    --warning-alpha-10: rgba(255, 193, 7, 0.1);
    --warning-alpha-20: rgba(255, 193, 7, 0.2);
    --warning-alpha-30: rgba(255, 193, 7, 0.3);
    
    --info-alpha-05: rgba(23, 162, 184, 0.05);
    --info-alpha-10: rgba(23, 162, 184, 0.1);
    --info-alpha-20: rgba(23, 162, 184, 0.2);
    
    /* Success green alpha variations for specific menu colors */
    --green-success-alpha-40: rgba(39, 174, 96, 0.4);
    
    /* Cream color alpha variations */
    --cream-alpha-10: rgba(248, 249, 250, 0.1);
    --cream-alpha-05: rgba(248, 249, 250, 0.05);
}

/* Additional Background Gradients */
:root {
    --gradient-light-bg: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(248, 249, 250, 0.8) 100%);
    --gradient-white-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.95) 100%);
    --gradient-gold-subtle: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.03) 100%);
}


.loading-screen {
   
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 23, 23, 0.21);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-screen-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.loading-screen-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    animation: fadeInUp 0.6s ease-out;
}

.loading-logo {
    margin-bottom: 1.5rem;
    animation: logoFloat 2s ease-in-out infinite;
}

.loading-logo-image {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(1.1) contrast(1.1);
    border-radius: 8px;
}

.loading-logo-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    color: white;
    font-size: 2rem;
}

.loading-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
    opacity: 0.95;
    animation: textPulse 2s ease-in-out infinite;
}

.loading-spinner {
    position: relative;
}

.spinner-ring {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes textPulse {
    0%, 100% {
        opacity: 0.95;
    }
    50% {
        opacity: 0.7;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .loading-screen-content {
        padding: 1.5rem;
    }
    
    .loading-logo-image {
        max-width: 100px;
        max-height: 100px;
    }
    
    .loading-logo-placeholder {
        width: 70px;
        height: 70px;
        font-size: 1.5rem;
    }
    
    .loading-text {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
    
    .spinner-ring {
        width: 40px;
        height: 40px;
        border-width: 2px;
        border-top-width: 2px;
    }
}

@media (max-width: 480px) {
    .loading-logo-image {
        max-width: 80px;
        max-height: 80px;
    }
    
    .loading-logo-placeholder {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
    
    .loading-text {
        font-size: 1rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .loading-screen-overlay {
        background: rgba(0, 0, 0, 0.98);
    }
    
    .loading-text {
        color: #ffffff;
        font-weight: 600;
    }
    
    .spinner-ring {
        border-top-color: #ffffff;
        border-color: rgba(255, 255, 255, 0.2);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .loading-screen-content {
        animation: none;
    }
    
    .loading-logo {
        animation: none;
    }
    
    .loading-text {
        animation: none;
    }
    
    .spinner-ring {
        animation: spin 2s linear infinite;
    }
}