/* 
 * Global CSS Variables for SweetCakes Application
 * Change these values to update colors throughout the entire app
 */

:root {
    /* Brand Colors - Primary Gradient */
    --brand-gradient-start: #667eea;  /* Purple-blue */
    --brand-gradient-end: #764ba2;    /* Deep purple */
    
    /* Gradient Definitions */
    --brand-gradient: linear-gradient(135deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
    --brand-gradient-180: linear-gradient(180deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 70%);
    
    /* Role Badge Colors */
    --role-admin-color: #dc3545;      /* danger - red */
    --role-manager-color: #0d6efd;    /* primary - blue */
    --role-staff-color: #6c757d;      /* secondary - gray */
    
    /* Authentication/Login Colors */
    --auth-bg-gradient: var(--brand-gradient);
    --auth-card-bg: rgba(255, 255, 255, 0.95);
    --auth-card-header-gradient: var(--brand-gradient);
    
    /* Sidebar Colors */
    --sidebar-gradient-start: rgb(5, 39, 103);  /* Dark blue */
    --sidebar-gradient-end: #3a0647;            /* Dark purple */
    --sidebar-gradient: linear-gradient(180deg, var(--sidebar-gradient-start) 0%, var(--sidebar-gradient-end) 70%);
    
    /* Top Bar Colors */
    --topbar-bg: #f7f7f7;
    --topbar-border: #d6d5d5;
    
    /* User Profile Colors */
    --user-profile-bg: rgba(0, 0, 0, 0.3);
    --user-profile-border: rgba(255, 255, 255, 0.1);
    --user-profile-hover-bg: rgba(255, 255, 255, 0.08);
    
    /* Transparency/Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-blur: blur(10px);
}

/* Dark mode support (optional - can be added later) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Uncomment and adjust these for dark mode support */
        /* --topbar-bg: #1a1a1a; */
        /* --topbar-border: #333; */
    }
}

/* Quick Theme Presets (comment/uncomment to switch themes) */

/* Theme: Ocean Blue 
:root {
    --brand-gradient-start: #2E3192;
    --brand-gradient-end: #1BFFFF;
}
*/

/* Theme: Sunset Orange 
:root {
    --brand-gradient-start: #f12711;
    --brand-gradient-end: #f5af19;
}
*/

/* Theme: Forest Green 
:root {
    --brand-gradient-start: #134e5e;
    --brand-gradient-end: #71b280;
}
*/

/* Theme: Royal Purple (default)
:root {
    --brand-gradient-start: #667eea;
    --brand-gradient-end: #764ba2;
}
*/

/* Ensure small buttons keep appropriate padding and appearance */
.btn.btn-sm {
    padding: 0.25rem 0.5rem;
}