/**
 * متغيرات CSS - Variables
 * تحتوي على جميع الألوان والأحجام والمسافات المستخدمة في التطبيق
 */

:root {
    /* ==================== الألوان الأساسية ==================== */
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-primary-light: #e7f1ff;
    
    --color-secondary: #6c757d;
    --color-secondary-dark: #495057;
    --color-secondary-light: #f8f9fa;
    
    --color-success: #28a745;
    --color-success-dark: #1e7e34;
    --color-success-light: #d4edda;
    
    --color-danger: #dc3545;
    --color-danger-dark: #bd2130;
    --color-danger-light: #f8d7da;
    
    --color-warning: #ffc107;
    --color-warning-dark: #e0a800;
    --color-warning-light: #fff3cd;
    
    --color-info: #17a2b8;
    --color-info-dark: #0c5460;
    --color-info-light: #d1ecf1;
    
    /* ==================== الألوان النصية والخلفيات ==================== */
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-muted: #999;
    --color-text-light: #ffffff;
    
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e9ecef;
    
    --color-border: #dee2e6;
    --color-border-light: #e9ecef;
    --color-border-dark: #adb5bd;
    
    /* ==================== الظلال ==================== */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --shadow-xl: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    
    /* ==================== الأحجام والمسافات ==================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* ==================== أحجام الخطوط ==================== */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* ==================== أوزان الخطوط ==================== */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ==================== عائلات الخطوط ==================== */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-arabic: "Segoe UI", "Droid Arabic Kufi", "Droid Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    
    /* ==================== الحدود والزوايا ==================== */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-2xl: 1rem;
    --border-radius-full: 9999px;
    
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-3: 3px;
    
    /* ==================== الانتقالات والحركات ==================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    --transition-property-colors: background-color, border-color, color, fill, stroke;
    --transition-property-transform: transform;
    --transition-property-all: all;
    
    /* ==================== الشفافية ==================== */
    --opacity-0: 0;
    --opacity-25: 0.25;
    --opacity-50: 0.5;
    --opacity-75: 0.75;
    --opacity-100: 1;
    
    /* ==================== أحجام الأيقونات ==================== */
    --icon-size-sm: 1rem;
    --icon-size-md: 1.5rem;
    --icon-size-lg: 2rem;
    --icon-size-xl: 3rem;
    
    /* ==================== أحجام الأزرار ==================== */
    --button-height-sm: 2rem;
    --button-height-md: 2.5rem;
    --button-height-lg: 3rem;
    
    --button-padding-x-sm: 0.75rem;
    --button-padding-x-md: 1rem;
    --button-padding-x-lg: 1.5rem;
    
    /* ==================== أحجام الحقول ==================== */
    --input-height: 2.5rem;
    --input-padding-x: 1rem;
    --input-padding-y: 0.5rem;
    --input-border-radius: var(--border-radius-md);
    
    /* ==================== نقاط التوقف (Breakpoints) ==================== */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    
    /* ==================== الطول الأقصى للمحتوى ==================== */
    --container-max-width: 1200px;
    --container-padding: 1rem;
    
    /* ==================== الـ Z-Index ==================== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* ==================== مدة الحركات ==================== */
    --animation-duration-fast: 150ms;
    --animation-duration-base: 250ms;
    --animation-duration-slow: 350ms;
    --animation-duration-slower: 500ms;
}

/* ==================== الوضع الليلي (Dark Mode) ==================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #f8f9fa;
        --color-text-secondary: #adb5bd;
        --color-bg-primary: #212529;
        --color-bg-secondary: #343a40;
        --color-bg-tertiary: #495057;
        --color-border: #495057;
        --color-border-light: #343a40;
    }
}

/* ==================== RTL Support (دعم الكتابة من اليمين لليسار) ==================== */
[dir="rtl"] {
    --text-align-start: right;
    --text-align-end: left;
    --margin-start: margin-right;
    --margin-end: margin-left;
    --padding-start: padding-right;
    --padding-end: padding-left;
}

[dir="ltr"] {
    --text-align-start: left;
    --text-align-end: right;
    --margin-start: margin-left;
    --margin-end: margin-right;
    --padding-start: padding-left;
    --padding-end: padding-right;
}