/* 
 * اولesim Color Scheme - RED THEME
 * Based on new brand colors
 */

:root {
    /* Primary Colors - Color 1 (Dark/Accent/Light) */
    --color-primary-dark: #E4D909;      /* Color 1 dark - Yellow */
    --color-primary: #FF7744;            /* Color 1 (accent) - Red-Orange */
    --color-primary-light: #FF5577;     /* Color 1 light - Pink-Red */
    
    /* Secondary Colors - Color 2 (Dark/Main/Light) - RED THEME */
    --color-secondary-dark: #CB1919;    /* Color 2 dark - Dark Red */
    --color-secondary: #FF2929;          /* Color 2 - Main Red */
    --color-secondary-light: #FF4444;   /* Color 2 light - Light Red */
    
    /* Neutral Colors */
    --color-background: #FEE1E1;        /* glitter (title background) */
    --color-transparent-1: #FF774466;   /* Color 1 transp */
    --color-transparent-2: #FF292966;   /* Color 2 transp */
    
    /* Gradients - RED BASED */
    --gradient-primary: linear-gradient(135deg, #CB1919 0%, #FF2929 100%);
    --gradient-secondary: linear-gradient(135deg, #FF2929 0%, #FF4444 100%);
    --gradient-accent: linear-gradient(135deg, #CB1919 0%, #FF4444 100%);
    
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-dark: #1f2937;
}

/* Global Styles */
body {
    background: var(--gradient-primary);
}

/* Buttons */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--gradient-secondary);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--color-secondary);
    color: white;
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
}

/* Links */
a {
    color: var(--color-secondary);
}

a:hover {
    color: var(--color-secondary-dark);
}

/* Cards */
.card {
    background: var(--bg-primary);
    border: 2px solid var(--color-transparent-2);
}

.card:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 10px 30px var(--color-transparent-2);
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.95);
}

.navbar-brand {
    color: var(--color-secondary);
}

.navbar-menu a:hover {
    color: var(--color-secondary);
}

/* Badges */
.badge-success {
    background: var(--color-secondary);
}

.badge-warning {
    background: var(--color-primary-dark);
}

.badge-danger {
    background: var(--color-secondary-dark);
}

/* Progress Bars */
.progress-bar {
    background: var(--gradient-primary);
}

/* Alerts */
.alert-success {
    background: #fee;
    border-color: var(--color-secondary-light);
    color: var(--color-secondary-dark);
}

.alert-error {
    background: #fee;
    border-color: var(--color-secondary);
    color: var(--color-secondary-dark);
}

/* Status Colors */
.status-active {
    background: var(--gradient-primary);
    color: white;
}

.status-pending {
    background: var(--color-primary-dark);
    color: #333;
}

.status-cancelled {
    background: var(--gradient-secondary);
    color: white;
}

/* Shadows */
.shadow-primary {
    box-shadow: 0 10px 30px var(--color-transparent-2);
}

.shadow-secondary {
    box-shadow: 0 10px 30px var(--color-transparent-2);
}

/* Icons */
.icon-primary {
    color: var(--color-secondary);
}

.icon-secondary {
    color: var(--color-secondary-dark);
}

/* Borders */
.border-primary {
    border-color: var(--color-secondary);
}

.border-secondary {
    border-color: var(--color-secondary-dark);
}