/* ============================================
   PREMIUM COLOR & GRADIENT PALETTE
   لوحة الألوان والتدرجات المتقدمة
   ============================================ */

:root {
    /* Premium brand colors */
    --brand-primary: #6366f1;
    --brand-secondary: #ec4899;
    --brand-tertiary: #f59e0b;
    
    /* Advanced color palette */
    --color-indigo: #6366f1;
    --color-purple: #8b5cf6;
    --color-pink: #ec4899;
    --color-rose: #f43f5e;
    --color-orange: #f97316;
    --color-amber: #f59e0b;
    --color-yellow: #eab308;
    --color-lime: #84cc16;
    --color-green: #22c55e;
    --color-emerald: #10b981;
    --color-cyan: #06b6d4;
    --color-sky: #0ea5e9;
    --color-blue: #3b82f6;
    
    /* Gradient backgrounds */
    --gradient-sunset: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-coral: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-peachy: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --gradient-mint: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    --gradient-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-forest: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
    --gradient-fire: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
    --gradient-twilight: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Text gradients */
    --text-gradient-primary: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    --text-gradient-secondary: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
    --text-gradient-success: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    
    /* Shadow colors */
    --shadow-indigo: rgba(99, 102, 241, 0.4);
    --shadow-purple: rgba(139, 92, 246, 0.5);
    --shadow-pink: rgba(236, 72, 153, 0.4);
}

/* Gradient buttons and elements */
.btn-gradient-primary {
    background: var(--gradient-sunset);
    color: white;
    transition: all 0.3s ease;
}

.btn-gradient-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px var(--shadow-indigo);
}

.btn-gradient-secondary {
    background: var(--gradient-coral);
    color: white;
    transition: all 0.3s ease;
}

.btn-gradient-secondary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px var(--shadow-pink);
}

/* Gradient text */
.text-gradient {
    background: var(--text-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-secondary {
    background: var(--text-gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-success {
    background: var(--text-gradient-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient background sections */
.section-gradient-primary {
    background: var(--gradient-sunset);
    color: white;
}

.section-gradient-secondary {
    background: var(--gradient-coral);
    color: white;
}

.section-gradient-success {
    background: var(--gradient-ocean);
    color: white;
}

.section-gradient-forest {
    background: var(--gradient-forest);
    color: white;
}

/* Overlay gradients */
.overlay-gradient-dark {
    background: linear-gradient(to right, rgba(0,0,0,0.8), transparent);
}

.overlay-gradient-light {
    background: linear-gradient(to right, rgba(255,255,255,0.8), transparent);
}

/* Color-coded badges */
.badge-indigo {
    background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
    color: #4338ca;
}

.badge-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
    color: #7c3aed;
}

.badge-pink {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #be185d;
}

.badge-orange {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    color: #92400e;
}

.badge-emerald {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

/* Color variations for cards */
.card-indigo {
    border: 2px solid #e0e7ff;
    background: linear-gradient(135deg, rgba(224, 231, 255, 0.5) 0%, rgba(221, 214, 254, 0.5) 100%);
}

.card-purple {
    border: 2px solid #ede9fe;
    background: linear-gradient(135deg, rgba(243, 232, 255, 0.5) 0%, rgba(237, 233, 254, 0.5) 100%);
}

.card-pink {
    border: 2px solid #fbcfe8;
    background: linear-gradient(135deg, rgba(252, 231, 243, 0.5) 0%, rgba(251, 207, 232, 0.5) 100%);
}

/* Neon effects */
.neon-glow {
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.8),
                 0 0 20px rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6),
                0 0 20px rgba(139, 92, 246, 0.4);
}

.neon-pink {
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.8),
                 0 0 20px rgba(244, 63, 94, 0.6);
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.6),
                0 0 20px rgba(244, 63, 94, 0.4);
}

/* Glassmorphism effect */
.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Neumorphic style elements */
.neumorphic {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1),
                0 -2px 4px rgba(255, 255, 255, 0.7);
}

.neumorphic-dark {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4),
                0 -2px 4px rgba(255, 255, 255, 0.1);
}

/* Smooth color transitions */
.smooth-color {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.color-hover-primary:hover {
    background-color: var(--color-indigo);
    color: white;
}

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

.color-hover-success:hover {
    background-color: var(--color-emerald);
    color: white;
}

/* Highlight colors */
.highlight-yellow {
    background-color: rgba(234, 179, 8, 0.2);
    color: #854d0e;
}

.highlight-blue {
    background-color: rgba(59, 130, 246, 0.2);
    color: #1e40af;
}

.highlight-green {
    background-color: rgba(34, 197, 94, 0.2);
    color: #15803d;
}

/* Color-coded status indicators */
.status-active {
    color: #10b981;
}

.status-pending {
    color: #f59e0b;
}

.status-inactive {
    color: #ef4444;
}

.status-info {
    color: #3b82f6;
}