/* ═══════════════════════════════════════════════════════════════════
   THEME CUSTOMIZATION & VARIABLES
   يمكنك تخصيص الألوان والأنماط من هنا
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════════════
       PRIMARY BRAND COLORS - تخصيص ألوان العلامة التجارية
       ═══════════════════════════════════════════════════════════════ */
    
    /* اللون الأساسي (الأزرق الداكن) */
    --primary-dark: #1e40af;
    
    /* اللون الأساسي (الأزرق الفاتح) */
    --primary: #3b82f6;
    
    /* اللون الأساسي (الأزرق الأفتح) */
    --primary-light: #60a5fa;
    
    /* لون التركيز الاختياري (الذهبي) */
    --accent: #d4af37;
    
    /* ═══════════════════════════════════════════════════════════════
       SEMANTIC COLORS - الألوان الدلالية
       ═══════════════════════════════════════════════════════════════ */
    
    --success: #059669;        /* أخضر النجاح */
    --warning: #d97706;        /* برتقالي التحذير */
    --danger: #dc2626;         /* أحمر الخطر */
    --info: #0891b2;           /* أزرق المعلومات */
    
    /* ═══════════════════════════════════════════════════════════════
       NEUTRAL COLORS - الألوان المحايدة
       ═══════════════════════════════════════════════════════════════ */
    
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* ═══════════════════════════════════════════════════════════════
       LIGHT THEME - ألوان الوضع الفاتح
       ═══════════════════════════════════════════════════════════════ */
    
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #f9fafb;
    --light-bg-tertiary: #f3f4f6;
    --light-text-primary: #1f2937;
    --light-text-secondary: #6b7280;
    --light-text-tertiary: #9ca3af;
    --light-border: #e5e7eb;
    
    /* ═══════════════════════════════════════════════════════════════
       DARK THEME - ألوان الوضع الداكن
       ═══════════════════════════════════════════════════════════════ */
    
    --dark-bg-primary: #1e293b;
    --dark-bg-secondary: #0f172a;
    --dark-bg-tertiary: #334155;
    --dark-text-primary: #f1f5f9;
    --dark-text-secondary: #cbd5e1;
    --dark-text-tertiary: #94a3b8;
    --dark-border: #334155;
    
    /* ═══════════════════════════════════════════════════════════════
       SHADOWS - الظلال
       ═══════════════════════════════════════════════════════════════ */
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* ═══════════════════════════════════════════════════════════════
       SPACING - المسافات
       ═══════════════════════════════════════════════════════════════ */
    
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    
    /* ═══════════════════════════════════════════════════════════════
       BORDER RADIUS - زوايا العناصر
       ═══════════════════════════════════════════════════════════════ */
    
    --radius-xs: 0.25rem;    /* 4px */
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    
    /* ═══════════════════════════════════════════════════════════════
       TYPOGRAPHY - الخطوط
       ═══════════════════════════════════════════════════════════════ */
    
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Tajawal', 'Cairo', sans-serif;
    --font-family-mono: 'Monaco', 'Courier New', monospace;
    
    /* ═══════════════════════════════════════════════════════════════
       TRANSITIONS - الانتقالات والرسوم المتحركة
       ═══════════════════════════════════════════════════════════════ */
    
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ═══════════════════════════════════════════════════════════════
       Z-INDEX LAYERING - ترتيب الطبقات
       ═══════════════════════════════════════════════════════════════ */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME DEFAULT VALUES
   ═══════════════════════════════════════════════════════════════════ */

:root, body {
    --bg-primary: var(--light-bg-primary);
    --bg-secondary: var(--light-bg-secondary);
    --bg-tertiary: var(--light-bg-tertiary);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-tertiary: var(--light-text-tertiary);
    --border: var(--light-border);
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDE
   ═══════════════════════════════════════════════════════════════════ */

body.dark-theme {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    --border: var(--dark-border);
}

/* ═══════════════════════════════════════════════════════════════════
   THEME ALTERNATIVES
   
   استخدام مواضيع بديلة:
   <body class="theme-corporate">
   <body class="theme-nature">
   <body class="theme-ocean">
   
   ═══════════════════════════════════════════════════════════════════ */

/* Corporate Theme (موضوع شركات) */
body.theme-corporate {
    --primary-dark: #003366;
    --primary: #0052CC;
    --primary-light: #0059FF;
    --accent: #FFB300;
}

/* Nature Theme (موضوع طبيعي) */
body.theme-nature {
    --primary-dark: #1B5E20;
    --primary: #2E7D32;
    --primary-light: #4CAF50;
    --accent: #8D6E63;
}

/* Ocean Theme (موضوع محيطي) */
body.theme-ocean {
    --primary-dark: #01579B;
    --primary: #0277BD;
    --primary-light: #0288D1;
    --accent: #00B8D4;
}

/* Modern Gradient Theme */
body.theme-modern {
    --primary-dark: #667EEA;
    --primary: #764BA2;
    --primary-light: #F093FB;
    --accent: #4F46E5;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS - نقاط الاستجابة
   ═══════════════════════════════════════════════════════════════════ */

/* 
   Mobile: max-width: 480px
   Tablet: min-width: 481px, max-width: 768px
   Desktop: min-width: 769px, max-width: 1024px
   Large: min-width: 1025px
*/

/* ═══════════════════════════════════════════════════════════════════
   HOW TO CUSTOMIZE - كيفية التخصيص
   ═══════════════════════════════════════════════════════════════════ */

/*
   1. تغيير الألوان الأساسية:
      استبدل --primary-dark و --primary و --primary-light

   2. تغيير الألوان الدلالية:
      استبدل --success و --warning و --danger و --info

   3. تغيير الخطوط:
      استبدل --font-family-base

   4. تغيير المسافات:
      استبدل --spacing-* values

   5. تغيير الزوايا:
      استبدل --radius-* values

   6. إضافة موضوع جديد:
      أضف body.theme-yourtheme { } block

   مثال:
   body.theme-custom {
       --primary-dark: #5a4fcf;
       --primary: #7c6ef5;
       --primary-light: #b5b6fc;
   }
*/

/* ═══════════════════════════════════════════════════════════════════
   ANIMATION KEYFRAMES - إطارات الرسم المتحرك
   ═══════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}