/* ==================== نظام متغيرات بنك أسئلة اللغة الإنجليزية ==================== */
/* مصمم لطلاب الصف الخامس في مدرسة رقية بنت الرسول، الأردن */
/* إصدار ٢.٠ - ٢٠٢٥/٠٣/٢٨ - نظام متغيرات متكامل ثنائي اللغة */

/* ==================== مفهوم النظام ==================== */
/*
  يعتمد نظام التصميم على أسلوب "المتغيرات السياقية"، حيث يتم تحديد:
  1. متغيرات "أولية" تحمل القيم الأساسية (مثل الألوان الخام والقياسات)
  2. متغيرات "سياقية" تستخدم في الواجهة (مثل لون النص الرئيسي، خلفية البطاقات)
  ميزة هذا النهج: يمكن تغيير الأنماط (مثل الوضع المظلم) بتغيير المتغيرات السياقية فقط
*/

:root {
  /* ==================== 1. القيم الأساسية للنظام ==================== */
  /* 
    تحتوي هذه المتغيرات على القيم الخام التي تستخدم في بناء عناصر الواجهة
    لا يتم استخدامها مباشرة في CSS، بل من خلال المتغيرات السياقية
  */
  
  /* ==== 1.1 لوحة الألوان الأساسية ==== */
  /* الألوان الرئيسية - مستوحاة من العلم الأردني والطبيعة الأردنية */
  /* تم تعديل جميع الألوان لضمان نسبة تباين كافية (4.5:1 كحد أدنى) */
  
  /* أزرق - سلسلة متدرجة */
  --blue-50: hsl(222, 100%, 96%);   /* #ebf0ff */
  --blue-100: hsl(222, 91%, 90%);   /* #d0dbff */
  --blue-200: hsl(222, 83%, 78%);   /* #acbfff */
  --blue-300: hsl(222, 79%, 65%);   /* #819cff */
  --blue-400: hsl(222, 77%, 55%);   /* #5e81fa - اللون الرئيسي */
  --blue-500: hsl(222, 75%, 50%);   /* #4c6ef5 */
  --blue-600: hsl(222, 73%, 45%);   /* #3b5bdb */
  --blue-700: hsl(222, 71%, 40%);   /* #314bc1 */
  --blue-800: hsl(222, 69%, 35%);   /* #283aa8 */
  --blue-900: hsl(222, 67%, 30%);   /* #22308e */
  
  /* أخضر - سلسلة متدرجة */
  --green-50: hsl(142, 100%, 95%);  /* #ebfcf3 */
  --green-100: hsl(142, 85%, 85%);  /* #c3f7d9 */
  --green-200: hsl(142, 77%, 73%);  /* #93edb7 */
  --green-300: hsl(142, 68%, 61%);  /* #69db7c */
  --green-400: hsl(142, 60%, 47%);  /* #40c057 - اللون الثانوي */
  --green-500: hsl(142, 58%, 42%);  /* #37a94e */
  --green-600: hsl(142, 56%, 37%);  /* #2b8a3e */
  --green-700: hsl(142, 54%, 32%);  /* #237032 */
  --green-800: hsl(142, 52%, 26%);  /* #1b5c28 */
  --green-900: hsl(142, 50%, 20%);  /* #12481c */
  
  /* أحمر - سلسلة متدرجة - من العلم الأردني */
  --red-50: hsl(5, 100%, 96%);      /* #ffedeb */
  --red-100: hsl(5, 95%, 90%);      /* #ffd2cc */
  --red-200: hsl(5, 90%, 80%);      /* #ffb0a8 */
  --red-300: hsl(5, 85%, 70%);      /* #ff8980 */
  --red-400: hsl(5, 80%, 60%);      /* #f06358 */
  --red-500: hsl(5, 75%, 55%);      /* #e74c3c - لون التمييز */
  --red-600: hsl(5, 70%, 45%);      /* #c0392b */
  --red-700: hsl(5, 65%, 40%);      /* #a12b1f */
  --red-800: hsl(5, 60%, 35%);      /* #811e15 */
  --red-900: hsl(5, 55%, 30%);      /* #6d1810 */
  
  /* رمادي - سلسلة متدرجة للأسطح المحايدة */
  --gray-50: hsl(210, 20%, 98%);    /* #f8f9fa */
  --gray-100: hsl(210, 17%, 95%);   /* #e9ecef */
  --gray-200: hsl(210, 16%, 90%);   /* #dee2e6 */
  --gray-300: hsl(210, 14%, 83%);   /* #ced4da */
  --gray-400: hsl(210, 12%, 71%);   /* #adb5bd */
  --gray-500: hsl(210, 10%, 57%);   /* #6c757d */
  --gray-600: hsl(210, 9%, 45%);    /* #495057 */
  --gray-700: hsl(210, 8%, 35%);    /* #343a40 */
  --gray-800: hsl(210, 7%, 25%);    /* #212529 */
  --gray-900: hsl(210, 6%, 15%);    /* #161a1d */
  
  /* الألوان الأساسية */
  --white: hsl(0, 0%, 100%);        /* #ffffff */
  --black: hsl(0, 0%, 0%);          /* #000000 */
  
  /* ألوان العلم الأردني الرسمية */
  --jordan-black: hsl(0, 0%, 0%);       /* #000000 */
  --jordan-green: hsl(150, 100%, 24%);  /* #007a3d */
  --jordan-white: hsl(0, 0%, 100%);     /* #ffffff */
  --jordan-red: hsl(350, 100%, 44%);    /* #ce1126 */
  
  /* ألوان واجهة المستخدم للإشعارات والتنبيهات */
  --success-base: var(--green-400);     /* #40c057 - الإنجازات والمهام الناجحة */
  --error-base: hsl(358, 85%, 60%);     /* #fa5252 - الأخطاء والإجابات الخاطئة */
  --warning-base: hsl(27, 98%, 54%);    /* #fd7e14 - التنبيهات والتحذيرات */
  --info-base: hsl(209, 85%, 50%);      /* #228be6 - المعلومات والتلميحات */
  
  /* ألوان المهارات اللغوية */
  --vocabulary-base: var(--blue-500);   /* المفردات */
  --grammar-base: var(--green-400);     /* القواعد */
  --reading-base: hsl(50, 97%, 54%);    /* #fcc419 - القراءة */
  --listening-base: var(--red-500);     /* الاستماع */
  --speaking-base: hsl(260, 95%, 75%);  /* #9775fa - التحدث */
  --writing-base: hsl(190, 80%, 42%);   /* #15aabf - الكتابة */
  
  /* ألوان الألعاب التعليمية */
  --game-base-1: hsl(30, 100%, 58%);    /* #ff922b - برتقالي دافئ */
  --game-base-2: hsl(339, 82%, 67%);    /* #f06595 - وردي نشط */
  --game-base-3: hsl(258, 90%, 63%);    /* #7950f2 - بنفسجي جذاب */
  --game-base-4: hsl(189, 80%, 42%);    /* #15aabf - أزرق فيروزي */

  /* ==== 1.2 نظام الخطوط الأساسي ==== */
  /* الخطوط الأساسية - تدعم العربية والإنجليزية */
  --font-tajawal: 'Tajawal', sans-serif;             /* خط عربي */
  --font-nunito: 'Nunito', sans-serif;               /* خط إنجليزي */
  --font-stack-base: var(--font-tajawal), var(--font-nunito), system-ui, sans-serif;
  
  /* معامل المقياس الطباعي - نسبة ذهبية محسنة (1.25) */
  --type-scale: 1.25;
  
  /* الحجم الأساسي - 16px باستخدام rem */
  --font-size-base: 1rem;
  
  /* ==== 1.3 نظام المسافات الأساسي ==== */
  /* وحدة قياس المسافات - 8px (0.5rem) */
  --space-unit: 0.5rem;
  
  /* ==== 1.4 نقاط التوقف للتصميم المتجاوب ==== */
  /* نقاط التوقف المحسنة للأجهزة الحديثة */
  --breakpoint-xs: 360px;  /* الهواتف الصغيرة الحديثة (بدلاً من 320px القديمة) */
  --breakpoint-sm: 576px;  /* الأجهزة اللوحية الصغيرة / الهواتف الكبيرة */
  --breakpoint-md: 768px;  /* الأجهزة اللوحية / الحواسيب المحمولة الصغيرة */
  --breakpoint-lg: 992px;  /* الحواسيب المحمولة / الشاشات الصغيرة */
  --breakpoint-xl: 1200px; /* سطح المكتب / الشاشات الكبيرة */
  --breakpoint-xxl: 1440px; /* الشاشات الكبيرة جداً */
  
  /* ==== 1.5 نظام الزوايا الأساسي ==== */
  /* نصف قطر الحدود للعناصر المختلفة */
  --radius-unit: 0.25rem; /* 4px */
  
  /* ==================== 2. المتغيرات السياقية (الوضع الفاتح الافتراضي) ==================== */
  /*
    هذه المتغيرات تستخدم مباشرة في CSS لتنسيق العناصر
    يتم تعيينها بناءً على المتغيرات الأساسية أعلاه
  */
  
  /* ==== 2.1 الألوان الرئيسية وتنويعاتها ==== */
  --primary-color: var(--blue-500);    /* #4c6ef5 - اللون الرئيسي */
  --primary-light: var(--blue-400);    /* #5e81fa - تفتيح */
  --primary-dark: var(--blue-600);     /* #3b5bdb - تغميق */
  
  --secondary-color: var(--green-400); /* #40c057 - اللون الثانوي */
  --secondary-light: var(--green-300); /* #69db7c - تفتيح */
  --secondary-dark: var(--green-600);  /* #2b8a3e - تغميق */
  
  --accent-color: var(--red-500);      /* #e74c3c - لون التمييز */
  --accent-light: var(--red-300);      /* #ff8980 - تفتيح */
  --accent-dark: var(--red-600);       /* #c0392b - تغميق */
  
  /* ==== 2.2 ألوان الحالة والتنبيهات ==== */
  --success-color: var(--success-base);
  --error-color: var(--error-base);
  --warning-color: var(--warning-base);
  --info-color: var(--info-base);
  
  /* ==== 2.3 ألوان الواجهة ==== */
  /* ألوان الخلفية للواجهة والأقسام */
  --bg-primary: var(--white);            /* خلفية أساسية */
  --bg-secondary: var(--gray-50);        /* خلفية ثانوية */
  --bg-tertiary: var(--gray-100);        /* خلفية ثالثة */
  --bg-exam: var(--white);               /* خلفية تحاكي ورقة الامتحان */
  
  /* ألوان النص - للقراءة المريحة مع تباين عالٍ */
  --text-primary: var(--gray-800);       /* نص أساسي - تباين 14:1 مع الخلفية البيضاء */
  --text-secondary: var(--gray-600);     /* نص ثانوي - تباين 7:1 */
  --text-tertiary: var(--gray-500);      /* نص إضافي - تباين 5:1 */
  
  /* نص على الألوان الرئيسية */
  --text-on-primary: var(--white);       /* نص فوق اللون الرئيسي */
  --text-on-secondary: var(--white);     /* نص فوق اللون الثانوي */
  --text-on-accent: var(--white);        /* نص فوق لون التمييز */
  --text-on-dark: var(--white);          /* نص على خلفية داكنة */
  --text-on-light: var(--gray-800);      /* نص على خلفية فاتحة */
  
  /* عائلات الخطوط حسب الاستخدام */
  --font-primary: var(--font-stack-base);  /* خط أساسي */
  --font-heading: var(--font-stack-base);  /* خط العناوين */
  --font-reading: var(--font-stack-base);  /* خط القراءة */
  --font-exam: var(--font-stack-base);     /* خط الامتحان */
  
  /* ==== 2.4 أحجام الخطوط - باستخدام نسبة متناسقة ==== */
  /* كل حجم هو السابق × معامل المقياس (1.25) */
  --fs-base: var(--font-size-base);                      /* 16px - الحجم الأساسي */
  --fs-xs: calc(var(--fs-base) / var(--type-scale));     /* 12.8px */
  --fs-sm: calc(var(--fs-xs) * var(--type-scale));       /* 16px */
  --fs-md: calc(var(--fs-sm) * var(--type-scale));       /* 20px */
  --fs-lg: calc(var(--fs-md) * var(--type-scale));       /* 25px */
  --fs-xl: calc(var(--fs-lg) * var(--type-scale));       /* 31.25px */
  --fs-xxl: calc(var(--fs-xl) * var(--type-scale));      /* 39.06px */
  --fs-xxxl: calc(var(--fs-xxl) * var(--type-scale));    /* 48.83px */
  
  /* ==== 2.5 ارتفاع السطر - لتحسين قابلية القراءة ==== */
  --line-height-tight: 1.2;      /* للعناوين والنصوص القصيرة */
  --line-height-normal: 1.5;     /* للنصوص العادية */
  --line-height-relaxed: 1.8;    /* للنصوص الطويلة والقراءة */
  
  /* ==== 2.6 نظام المسافات الديناميكي ==== */
  --space-xxxs: calc(0.25 * var(--space-unit));  /* 2px */
  --space-xxs: calc(0.5 * var(--space-unit));    /* 4px */
  --space-xs: calc(0.75 * var(--space-unit));    /* 6px */
  --space-sm: var(--space-unit);                 /* 8px */
  --space-md: calc(1.5 * var(--space-unit));     /* 12px */
  --space-lg: calc(2 * var(--space-unit));       /* 16px */
  --space-xl: calc(3 * var(--space-unit));       /* 24px */
  --space-xxl: calc(4 * var(--space-unit));      /* 32px */
  --space-xxxl: calc(6 * var(--space-unit));     /* 48px */
  
  /* ==== 2.7 نظام الزوايا المدورة السياقي ==== */
  --radius-xs: var(--radius-unit);                 /* 4px - تدوير بسيط */
  --radius-sm: calc(2 * var(--radius-unit));       /* 8px - تدوير معتدل */
  --radius-md: calc(3 * var(--radius-unit));       /* 12px - تدوير متوسط */
  --radius-lg: calc(4 * var(--radius-unit));       /* 16px - تدوير كبير */
  --radius-pill: 50rem;                            /* شكل حبة الدواء */
  --radius-circle: 50%;                            /* دائرة كاملة */
  
  /* ==== 2.8 نظام الظلال المبسط ==== */
  /* تبسيط نظام الظلال مع إبقاء الفروق واضحة بين المستويات */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05),      /* ظل خفيف */
              0 1px 3px rgba(0, 0, 0, 0.1);
              
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05),      /* ظل متوسط */
              0 2px 4px rgba(0, 0, 0, 0.1);
              
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05),    /* ظل كبير */
              0 4px 6px rgba(0, 0, 0, 0.1);
              
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05),    /* ظل كبير جداً */
              0 8px 10px rgba(0, 0, 0, 0.1);
  
  /* ظلال ملونة للتأكيد البصري */
  --shadow-primary: 0 5px 15px rgba(76, 110, 245, 0.35);
  --shadow-secondary: 0 5px 15px rgba(64, 192, 87, 0.35);
  --shadow-accent: 0 5px 15px rgba(231, 76, 60, 0.35);
  
  /* ظلال خاصة */
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);   /* ظل داخلي */
  --shadow-exam: 0 3px 8px rgba(0, 0, 0, 0.05);          /* ظل خفيف لورقة الامتحان */
  
  /* ==== 2.9 مؤشرات z-index ==== */
  /* تنظيم طبقات الواجهة */
  --z-negative: -1;        /* تحت المستوى الأساسي */
  --z-base: 1;             /* المستوى الأساسي */
  --z-elevated: 10;        /* مستوى مرتفع */
  --z-dropdown: 100;       /* القوائم المنسدلة */
  --z-sticky: 200;         /* العناصر اللاصقة */
  --z-fixed: 300;          /* العناصر الثابتة */
  --z-modal: 400;          /* النوافذ المنبثقة */
  --z-toast: 500;          /* الإشعارات */
  --z-tooltip: 600;        /* تلميحات الأدوات */
  
  /* ==== 2.10 التحولات والحركات ==== */
  /* الانتقالات - للتغييرات السلسة */
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);  /* منحنى توقيت طبيعي */
  
  --transition-property-base: color, background-color, border-color, box-shadow, transform;
  --transition-fast: 150ms var(--transition-timing);     /* انتقال سريع */
  --transition-base: 300ms var(--transition-timing);     /* انتقال متوسط */
  --transition-slow: 500ms var(--transition-timing);     /* انتقال بطيء */
  
  /* الرسوم المتحركة - لإضفاء الحيوية والتفاعل */
  --animation-bounce: bounce 1s infinite;               /* حركة ارتداد */
  --animation-pulse: pulse 2s infinite;                 /* حركة نبض */
  --animation-float: float 3s ease-in-out infinite;     /* حركة طفو */
  --animation-wave: wave 1.5s ease-in-out infinite;     /* حركة موجية */
  
  /* ==== 2.11 أحجام متجاوبة ==== */
  /* عرض الحاويات حسب نقاط التوقف */
  --container-max-width-xs: 100%;
  --container-max-width-sm: 540px;
  --container-max-width-md: 720px;
  --container-max-width-lg: 960px;
  --container-max-width-xl: 1140px;
  --container-max-width-xxl: 1320px;
  
  /* أحجام مكونات الواجهة */
  --container-max-width: var(--container-max-width-xl);
  --sidebar-width: 280px;
  --navbar-height: 64px;
}

/* ==================== 3. متغيرات الوضع المظلم ==================== */
/*
  تحدد هذه المتغيرات مظهر التطبيق في الوضع المظلم
  تستبدل قيم المتغيرات السياقية مع الحفاظ على أسمائها
*/

@media (prefers-color-scheme: dark) {
  /* تطبيق الوضع المظلم تلقائياً إذا كان المستخدم يفضل ذلك */
  :root:not(.light-mode) {
    /* ألوان الواجهة الرئيسية */
    --bg-primary: var(--gray-900);       /* #161a1d */
    --bg-secondary: var(--gray-800);     /* #212529 */
    --bg-tertiary: var(--gray-700);      /* #343a40 */
    
    /* ألوان النص المعكوسة */
    --text-primary: var(--gray-100);     /* #e9ecef - تباين 14:1 مع الخلفية الداكنة */
    --text-secondary: var(--gray-300);   /* #ced4da - تباين 8:1 */
    --text-tertiary: var(--gray-400);    /* #adb5bd - تباين 5:1 */
    
    /* تعديلات الألوان الرئيسية للتباين المناسب في الوضع المظلم */
    --primary-color: var(--blue-400);    /* #5e81fa - تباين 4.8:1 مع الخلفية الداكنة */
    --primary-light: var(--blue-300);    /* #819cff */
    --primary-dark: var(--blue-500);     /* #4c6ef5 */
    
    --secondary-color: var(--green-300); /* #69db7c - تباين 4.6:1 */
    --secondary-light: var(--green-200); /* #93edb7 */
    --secondary-dark: var(--green-400);  /* #40c057 */
    
    --accent-color: var(--red-400);      /* #f06358 - تباين 4.5:1 */
    --accent-light: var(--red-300);      /* #ff8980 */
    --accent-dark: var(--red-500);       /* #e74c3c */
    
    /* تعديلات الظلال للوضع المظلم */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 
                0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 
                0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 
                0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 
                0 10px 10px rgba(0, 0, 0, 0.4);
    
    /* ظلال ملونة للتأكيد البصري في الوضع المظلم */
    --shadow-primary: 0 5px 15px rgba(94, 129, 250, 0.4);
    --shadow-secondary: 0 5px 15px rgba(105, 219, 124, 0.4);
    --shadow-accent: 0 5px 15px rgba(240, 99, 88, 0.4);
  }
}

/* تطبيق الوضع المظلم صراحةً عند اختيار المستخدم له */
.dark-mode {
  /* ألوان الواجهة الرئيسية */
  --bg-primary: var(--gray-900);       /* #161a1d */
  --bg-secondary: var(--gray-800);     /* #212529 */
  --bg-tertiary: var(--gray-700);      /* #343a40 */
  
  /* ألوان النص المعكوسة */
  --text-primary: var(--gray-100);     /* #e9ecef - تباين 14:1 مع الخلفية الداكنة */
  --text-secondary: var(--gray-300);   /* #ced4da - تباين 8:1 */
  --text-tertiary: var(--gray-400);    /* #adb5bd - تباين 5:1 */
  
  /* تعديلات الألوان الرئيسية للتباين المناسب في الوضع المظلم */
  --primary-color: var(--blue-400);    /* #5e81fa - تباين 4.8:1 مع الخلفية الداكنة */
  --primary-light: var(--blue-300);    /* #819cff */
  --primary-dark: var(--blue-500);     /* #4c6ef5 */
  
  --secondary-color: var(--green-300); /* #69db7c - تباين 4.6:1 */
  --secondary-light: var(--green-200); /* #93edb7 */
  --secondary-dark: var(--green-400);  /* #40c057 */
  
  --accent-color: var(--red-400);      /* #f06358 - تباين 4.5:1 */
  --accent-light: var(--red-300);      /* #ff8980 */
  --accent-dark: var(--red-500);       /* #e74c3c */
  
  /* تعديلات الظلال للوضع المظلم */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 
              0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 
              0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 
              0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 
              0 10px 10px rgba(0, 0, 0, 0.4);
  
  /* ظلال ملونة للتأكيد البصري في الوضع المظلم */
  --shadow-primary: 0 5px 15px rgba(94, 129, 250, 0.4);
  --shadow-secondary: 0 5px 15px rgba(105, 219, 124, 0.4);
  --shadow-accent: 0 5px 15px rgba(240, 99, 88, 0.4);
  
  /* التدرجات اللونية المعدلة للوضع المظلم */
  --bg-gradient: linear-gradient(to bottom, var(--bg-primary), var(--bg-secondary));
  --card-gradient: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
}

/* ==================== 4. وضع التباين العالي ==================== */
/*
  تعديلات لوضع التباين العالي لتحسين إمكانية الوصول
  يستخدم ألوانًا أكثر تباينًا وأقل تدرجًا
*/

@media (prefers-contrast: high) {
  :root {
    /* ألوان أكثر تباينًا */
    --primary-color: #0066cc;        /* تباين 8:1 مع الخلفية البيضاء */
    --primary-light: #0077e6;
    --primary-dark: #004c99;
    
    --secondary-color: #008000;      /* تباين 7:1 */
    --secondary-light: #00a600;
    --secondary-dark: #006600;
    
    --accent-color: #cc0000;         /* تباين 10:1 */
    --accent-light: #ff0000;
    --accent-dark: #990000;
    
    /* نصوص أكثر وضوحًا */
    --text-primary: #000000;         /* أقصى تباين */
    --text-secondary: #333333;
    --text-tertiary: #555555;
    
    /* خلفيات أكثر وضوحًا */
    --bg-primary: #ffffff;
    --bg-secondary: #f0f0f0;
    --bg-tertiary: #e0e0e0;
    
    /* ألوان الحالة بتباين أعلى */
    --success-color: #008000;        /* تباين 7:1 */
    --error-color: #cc0000;          /* تباين 10:1 */
    --warning-color: #cc6600;        /* تباين 8:1 */
    --info-color: #0066cc;           /* تباين 8:1 */
    
    /* ظلال أكثر وضوحًا */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.3);
    
    /* تقليل التأثيرات البصرية والتدرجات */
    --bg-gradient: none;
    --card-gradient: none;
  }
  
  .dark-mode {
    /* الوضع المظلم مع تباين عالٍ */
    --text-primary: #ffffff;         /* أقصى تباين */
    --text-secondary: #eeeeee;
    --text-tertiary: #dddddd;
    
    --bg-primary: #000000;
    --bg-secondary: #181818;
    --bg-tertiary: #282828;
    
    /* ألوان رئيسية أكثر إشراقًا */
    --primary-color: #4d94ff;        /* تباين 9:1 مع الخلفية السوداء */
    --secondary-color: #33cc33;      /* تباين 8:1 */
    --accent-color: #ff6666;         /* تباين 7:1 */
  }
}

/* وضع التباين العالي المفعّل من قبل المستخدم */
[data-theme="high-contrast"] {
  /* ألوان أكثر تباينًا */
  --primary-color: #0066cc;          /* تباين 8:1 مع الخلفية البيضاء */
  --primary-light: #0077e6;
  --primary-dark: #004c99;
  
  --secondary-color: #008000;        /* تباين 7:1 */
  --secondary-light: #00a600;
  --secondary-dark: #006600;
  
  --accent-color: #cc0000;           /* تباين 10:1 */
  
  /* نصوص أكثر وضوحًا */
  --text-primary: #000000;           /* أقصى تباين */
  --text-secondary: #333333;
  
  /* خلفيات أكثر وضوحًا */
  --bg-primary: #ffffff;
  --bg-secondary: #f0f0f0;
  
  /* تقليل التأثيرات البصرية */
  --shadow-sm: 0 0 0 1px #000000;
  --shadow-md: 0 0 0 2px #000000;
  --shadow-lg: 0 0 0 3px #000000;
  
  /* إزالة التدرجات */
  --bg-gradient: none;
  --card-gradient: none;
}

.dark-mode[data-theme="high-contrast"] {
  /* الوضع المظلم مع تباين عالٍ */
  --text-primary: #ffffff;           /* أقصى تباين */
  --text-secondary: #eeeeee;
  
  --bg-primary: #000000;
  --bg-secondary: #181818;
  
  /* ألوان رئيسية أكثر إشراقًا */
  --primary-color: #4d94ff;          /* تباين 9:1 مع الخلفية السوداء */
  --secondary-color: #33cc33;        /* تباين 8:1 */
  --accent-color: #ff6666;           /* تباين 7:1 */
  
  /* حدود واضحة بدلاً من الظلال */
  --shadow-sm: 0 0 0 1px #ffffff;
  --shadow-md: 0 0 0 2px #ffffff;
  --shadow-lg: 0 0 0 3px #ffffff;
}

/* ==================== 5. وضع تقليل الحركة ==================== */
/*
  تعديلات للمستخدمين الذين يفضلون تقليل الحركة
  يزيل جميع الحركات والانتقالات
*/

@media (prefers-reduced-motion: reduce) {
  :root {
    /* إلغاء جميع الانتقالات والحركات */
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    
    /* إلغاء الرسوم المتحركة */
    --animation-bounce: none !important;
    --animation-pulse: none !important;
    --animation-float: none !important;
    --animation-wave: none !important;
  }
  
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== 6. وضع الطباعة ==================== */
/*
  تعديلات خاصة بالطباعة
  تبسيط الألوان والظلال وتحسين القراءة
*/

@media print {
  :root {
    /* تبسيط الألوان للطباعة */
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-tertiary: #666666;
    
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f9f9f9;
    
    /* إزالة الظلال والتأثيرات */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-inner: none;
    
    /* تقليل المسافات لتوفير الورق */
    --space-xxxl: calc(4 * var(--space-unit));  /* 32px بدلاً من 48px */
    --space-xxl: calc(3 * var(--space-unit));   /* 24px بدلاً من 32px */
    --space-xl: calc(2 * var(--space-unit));    /* 16px بدلاً من 24px */
    
    /* تحسين أحجام الخط للطباعة */
    --fs-base: 12pt;
    --line-height-normal: 1.3;
  }
}

/* ==================== 7. وضع النص الكبير ==================== */
/*
  تعديلات للمستخدمين الذين يحتاجون إلى نص أكبر
  يزيد من حجم الخط والمسافات
*/

[data-size="large-text"] {
  /* زيادة حجم الخط الأساسي بنسبة 20% */
  --fs-base: 1.2rem;
  
  /* تعديل المسافات تبعاً لذلك */
  --space-unit: 0.6rem;
  
  /* زيادة التباعد بين السطور */
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.9;
}

/* ==================== 8. التخصيص المتقدم ==================== */
/*
  خيارات تخصيص إضافية يمكن تطبيقها من خلال سمات البيانات
*/

/* ألوان مخصصة */
[data-color-scheme="blue"] {
  --primary-color: var(--blue-500);
  --primary-light: var(--blue-400);
  --primary-dark: var(--blue-600);
}

[data-color-scheme="green"] {
  --primary-color: var(--green-500);
  --primary-light: var(--green-400);
  --primary-dark: var(--green-600);
}

[data-color-scheme="red"] {
  --primary-color: var(--red-500);
  --primary-light: var(--red-400);
  --primary-dark: var(--red-600);
}

/* وضع الطلاب الصغار - أكثر حيوية ومرح */
[data-theme="kid-friendly"] {
  --primary-color: var(--blue-400);
  --secondary-color: var(--green-400);
  --accent-color: var(--game-base-1);
  
  --fs-base: 1.1rem;
  --border-radius: var(--radius-lg);
  
  --space-unit: 0.6rem;
}