/* ===== Material Design 3 - Design Tokens ===== */
:root {
    /* ===== الألوان الأساسية - Brand Colors ===== */
    --md-sys-color-primary: #2B6CB8;
    --md-sys-color-primary-rgb: 43, 108, 184;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D3E4FF;
    --md-sys-color-on-primary-container: #001C3A;
    
    --md-sys-color-secondary: #F7941E;
    --md-sys-color-secondary-rgb: 247, 148, 30;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #FFE4C8;
    --md-sys-color-on-secondary-container: #2A1800;
    
    /* ===== الألوان الحيادية - Neutral Colors ===== */
    --md-sys-color-surface: #FFFFFF;
    --md-sys-color-surface-variant: #F5F5F5;
    --md-sys-color-on-surface: #1A1C1E;
    --md-sys-color-on-surface-variant: #43474E;
    
    --md-sys-color-background: #FAFAFA;
    --md-sys-color-on-background: #1A1C1E;
    
    --md-sys-color-outline: #73777F;
    --md-sys-color-outline-variant: #C3C6CF;
    
    /* ===== ألوان الحالة - State Colors ===== */
    --md-sys-color-error: #BA1A1A;
    --md-sys-color-error-container: #FFDAD6;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-on-error-container: #410002;
    
    --md-sys-color-success: #4CAF50;
    --md-sys-color-success-container: #C8E6C9;
    --md-sys-color-warning: #FF9800;
    --md-sys-color-info: #2196F3;
    
    /* ===== الارتفاعات - Elevations ===== */
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 3px 1px rgba(0,0,0,0.08);
    --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,0.08), 0 2px 6px 2px rgba(0,0,0,0.08);
    --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.08), 0 1px 3px 0 rgba(0,0,0,0.08);
    --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.08), 0 2px 3px 0 rgba(0,0,0,0.08);
    --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.08), 0 4px 4px 0 rgba(0,0,0,0.08);
    
    /* ===== Typography Scale ===== */
    --md-sys-typescale-display-large: 900 57px/64px 'Tajawal', sans-serif;
    --md-sys-typescale-display-medium: 700 45px/52px 'Tajawal', sans-serif;
    --md-sys-typescale-display-small: 700 36px/44px 'Tajawal', sans-serif;
    
    --md-sys-typescale-headline-large: 700 32px/40px 'Tajawal', sans-serif;
    --md-sys-typescale-headline-medium: 700 28px/36px 'Tajawal', sans-serif;
    --md-sys-typescale-headline-small: 700 24px/32px 'Tajawal', sans-serif;
    
    --md-sys-typescale-title-large: 500 22px/28px 'Tajawal', sans-serif;
    --md-sys-typescale-title-medium: 500 16px/24px 'Tajawal', sans-serif;
    --md-sys-typescale-title-small: 500 14px/20px 'Tajawal', sans-serif;
    
    --md-sys-typescale-body-large: 400 16px/24px 'Tajawal', sans-serif;
    --md-sys-typescale-body-medium: 400 14px/20px 'Tajawal', sans-serif;
    --md-sys-typescale-body-small: 400 12px/16px 'Tajawal', sans-serif;
    
    --md-sys-typescale-label-large: 500 14px/20px 'Tajawal', sans-serif;
    --md-sys-typescale-label-medium: 500 12px/16px 'Tajawal', sans-serif;
    --md-sys-typescale-label-small: 500 11px/16px 'Tajawal', sans-serif;
    
    /* ===== Spacing System ===== */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --spacing-xxxl: 64px;
    
    /* ===== Border Radius ===== */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* ===== Animation Durations ===== */
    --duration-short1: 50ms;
    --duration-short2: 100ms;
    --duration-short3: 150ms;
    --duration-short4: 200ms;
    --duration-medium1: 250ms;
    --duration-medium2: 150ms;
    --duration-medium3: 350ms;
    --duration-medium4: 400ms;
    --duration-long1: 450ms;
    --duration-long2: 500ms;
    --duration-long3: 550ms;
    --duration-long4: 600ms;
    
    /* ===== Animation Curves ===== */
    --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --easing-standard-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --easing-standard-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    --easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1);
    
    /* ===== Z-index Layers ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 1100;
    
    /* ===== Layout ===== */
    --header-height: 64px;
    --nav-height: 80px;
    --nav-height-mobile: 64px;
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 72px;
    --max-content-width: 1200px;
    
    /* ===== Transitions ===== */
    --transition-fast: all var(--duration-short4) var(--easing-standard);
    --transition-medium: all var(--duration-medium2) var(--easing-standard);
    --transition-slow: all var(--duration-long1) var(--easing-emphasized);
}

/* ===== Dark Theme Support (future) ===== */


/* ===== Breakpoints ===== */
/* 
   Mobile: 0-599px
   Tablet: 600-1023px
   Desktop: 1024px+
   Large: 1440px+
*/