/* HostessAdvisor Color Palette */
:root {
    /* Primary Colors */
    --primary-purple: #9D174D;
    /* Pink-800 - Deep Pink/Red */
    --primary-cyan: #EC4899;
    /* Pink-500 */
    --primary-pink: #DB2777;
    /* Pink-600 */
    --primary-white: #FFFFFF;

    /* Secondary Colors */
    --secondary-purple: #BE185D;
    /* Pink-700 */
    --secondary-cyan: #F472B6;
    /* Pink-400 */
    --secondary-pink: #FBCFE8;
    /* Pink-200 */
    --smoke-gray: #FDF2F8;
    /* Pink-50 - Very light pink background */

    /* Action Colors */
    --whatsapp-green: #25D366;
    --call-red: #DC2626;
    --success-green: #10B981;
    --warning-yellow: #F59E0B;
    --error-red: #EF4444;

    /* Text Colors */
    --text-primary: #831843;
    /* Pink-900 */
    --text-secondary: #9D174D;
    /* Pink-800 */
    --text-light: #FBCFE8;
    --text-white: #FFFFFF;

    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FDF2F8;
    /* Pink-50 */
    --bg-dark: #831843;
    /* Pink-900 */
    --bg-overlay: rgba(131, 24, 67, 0.5);

    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, var(--primary-purple), var(--primary-pink));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-purple), var(--secondary-cyan));
    --gradient-pink: linear-gradient(135deg, var(--primary-pink), var(--secondary-pink));
    --gradient-hero: linear-gradient(135deg, var(--primary-purple), var(--primary-pink), var(--secondary-cyan));

    /* Shadow Colors */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Border Colors */
    --border-light: #E5E7EB;
    --border-gray: #D1D5DB;
    --border-dark: #6B7280;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark mode color overrides (future implementation) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1F2937;
        --bg-secondary: #111827;
        --text-primary: #F9FAFB;
        --text-secondary: #D1D5DB;
        --text-light: #9CA3AF;
        --border-light: #374151;
        --border-gray: #4B5563;
    }
}

/* Color utility classes */
.text-primary {
    color: var(--primary-purple) !important;
}

.text-cyan {
    color: var(--primary-cyan) !important;
}

.text-pink {
    color: var(--primary-pink) !important;
}

.text-whatsapp {
    color: var(--whatsapp-green) !important;
}

.text-call {
    color: var(--call-red) !important;
}

.bg-primary {
    background-color: var(--primary-purple) !important;
}

.bg-cyan {
    background-color: var(--primary-cyan) !important;
}

.bg-pink {
    background-color: var(--primary-pink) !important;
}

.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.bg-gradient-secondary {
    background: var(--gradient-secondary) !important;
}

.border-primary {
    border-color: var(--primary-purple) !important;
}

.border-cyan {
    border-color: var(--primary-cyan) !important;
}

/* VIP badge colors */
.vip-gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #1F2937;
}

/* Status colors */
.status-online {
    color: var(--success-green) !important;
}

.status-busy {
    color: var(--error-red) !important;
}

.status-away {
    color: var(--warning-yellow) !important;
}

.status-offline {
    color: var(--text-light) !important;
}