:root {
    /* الألوان الأساسية - Primary Colors */
    --primary: #181a20;         /* خلفية الصفحة الرئيسية - Main background */
    --secondary: #23262f;       /* خلفية العناصر والبطاقات - Elements background */
    
    /* لون التمييز والأزرار - Accent & Buttons */
    --accent: #ffb400;          /* لون التمييز والأزرار - Accent color */
    
    /* ألوان النصوص - Text Colors */
    --text: #f4f4f4;            /* النص الرئيسي - Primary text */
    --text-secondary: #b0b3b8;  /* نص ثانوي - Secondary text */
    
    /* الحدود والظلال - Borders & Shadows */
    --border: #31343e;          /* حدود - Borders */
    --shadow: 0 2px 8px rgba(78, 52, 46, 0.12);   /* ظلال - Shadows  */
    --hover: #23262f;           /* تأثير تحويم - Hover effect */
    
    /* ألوان الحالات - Status Colors */
    --success: #8BC34A;         /* نجاح - Success */
    --warning: #FFB300;         /* تحذير - Warning */
    --danger: #E64A19;          /* خطر - Danger */
    --info: #2196f3;           /* معلومات - Info */
    
    /* التأثيرات الحركية - Transitions */
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* المسافات - Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* الزوايا - Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 1.25rem;
}

/* الوضع الفاتح */
.light-theme {
    --primary: #f7f7fa;         /* خلفية للصفحة */
    --secondary: #ffffff;       /* خلفية للعناصر */
    --accent: #ffb400;          /* لون التمييز */
    --text: #181a20;            /* نص  */
    --text-secondary: #6c6f7a;  /* نص ثانوي  */
    --border: #e0e0e0;          /* حدود */
    --shadow: 0 2px 8px rgba(0,0,0,0.06); /* ظلال  */
    --hover: #f0f0f5;           /* تأثير تحويم  */
}

/* Base Styles */
body {
  background: var(--bg);
  color: var(--text);
  transition: var(--transition);
}

/* Components */
.button {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--primary);
  transition: var(--transition);
}

.loading-icon {
  animation: spin 1s linear infinite;
}

.notification-badge {
  animation: pulse 2s infinite;
}

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

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

.button {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.loading-icon {
    animation: var(--animation-spin);
}

.notification-badge {
    animation: var(--animation-pulse);
}