/**
 * Design Tokens - منصة العائلة
 * ملف الألوان والتصميم الأساسي
 * جميع الألوان المستخدمة في التطبيق موجودة هنا
 * للتعديل: قم بتعديل القيم في هذا الملف فقط
 */

:root {
    /* الألوان الأساسية */
    --admin-primary: #b72638;
    --admin-primary-dark: #8b1e2a;
    --admin-secondary: #d6304e;
    --admin-accent: #e74c3c;
    
    /* الألوان الداكنة الجديدة */
    --admin-dark-blue: #050E3C;
    --admin-dark-blue-light: #002455;
    
    /* الألوان الحمراء الجديدة */
    --admin-red: #DC0000;
    --admin-red-light: #FF3838;
    
    /* الألوان الداكنة */
    --admin-dark: #1e293b;
    --admin-dark-light: #334155;
    
    /* الألوان الفاتحة */
    --admin-gray: #f1f5f9;
    
    /* الألوان الشفافة (للخلفيات والحدود) */
    --admin-primary-light: rgba(183, 38, 56, 0.1);
    --admin-primary-border: rgba(183, 38, 56, 0.2);
    --admin-primary-shadow: rgba(183, 38, 56, 0.3);
    --admin-primary-shadow-hover: rgba(183, 38, 56, 0.4);
    
    --admin-accent-light: rgba(231, 76, 60, 0.1);
    --admin-accent-border: rgba(231, 76, 60, 0.2);
    
    --admin-secondary-light: rgba(214, 48, 78, 0.1);
    --admin-secondary-border: rgba(214, 48, 78, 0.2);
    
    /* التدرجات اللونية */
    --admin-gradient-primary: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-dark) 100%);
    --admin-gradient-primary-reverse: linear-gradient(135deg, var(--admin-primary-dark) 0%, var(--admin-primary) 100%);
    --admin-gradient-dark: linear-gradient(135deg, var(--admin-dark-blue) 0%, var(--admin-dark-blue-light) 100%);
    --admin-gradient-red: linear-gradient(135deg, var(--admin-red) 0%, var(--admin-red-light) 100%);
    --admin-gradient-hero: linear-gradient(135deg, var(--admin-dark-blue) 0%, var(--admin-dark-blue-light) 50%, var(--admin-primary) 100%);
    
    /* الخطوط */
    --admin-font-family: 'Tajawal', sans-serif;
    
    /* الظلال */
    --admin-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --admin-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --admin-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --admin-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --admin-shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    
    /* الانتقالات */
    --admin-transition: all 0.3s ease;
    --admin-transition-fast: all 0.15s ease;
    --admin-transition-slow: all 0.5s ease;
}

/* فئات مساعدة للألوان */
.bg-primary { background-color: var(--admin-primary) !important; }
.bg-primary-dark { background-color: var(--admin-primary-dark) !important; }
.bg-primary-light { background-color: var(--admin-primary-light) !important; }
.bg-secondary { background-color: var(--admin-secondary) !important; }
.bg-secondary-light { background-color: var(--admin-secondary-light) !important; }
.bg-accent { background-color: var(--admin-accent) !important; }
.bg-accent-light { background-color: var(--admin-accent-light) !important; }
.bg-dark { background-color: var(--admin-dark) !important; }
.bg-dark-light { background-color: var(--admin-dark-light) !important; }
.bg-gray-custom { background-color: var(--admin-gray) !important; }

.text-primary { color: var(--admin-primary) !important; }
.text-primary-dark { color: var(--admin-primary-dark) !important; }
.text-secondary { color: var(--admin-secondary) !important; }
.text-accent { color: var(--admin-accent) !important; }
.text-dark { color: var(--admin-dark) !important; }
.text-dark-light { color: var(--admin-dark-light) !important; }

.border-primary { border-color: var(--admin-primary) !important; }
.border-primary-border { border-color: var(--admin-primary-border) !important; }
.border-secondary { border-color: var(--admin-secondary) !important; }
.border-accent { border-color: var(--admin-accent) !important; }

/* التدرجات */
.bg-gradient-primary {
    background: var(--admin-gradient-primary) !important;
}

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

/* حالات Hover */
.hover\:bg-primary:hover { background-color: var(--admin-primary) !important; }
.hover\:bg-primary-dark:hover { background-color: var(--admin-primary-dark) !important; }
.hover\:bg-primary-light:hover { background-color: var(--admin-primary-light) !important; }
.hover\:text-primary:hover { color: var(--admin-primary) !important; }
.hover\:text-primary-dark:hover { color: var(--admin-primary-dark) !important; }

/* الظلال */
.shadow-primary { box-shadow: 0 4px 12px var(--admin-primary-shadow) !important; }
.shadow-primary-hover { box-shadow: 0 8px 20px var(--admin-primary-shadow-hover) !important; }