# ENTERPRISE_DESIGN_SYSTEM.md
### نظام التصميم المؤسسي — المنصة العالمية للتعريف بالإسلام والتعليم الإسلامي

**نوع الوثيقة:** تصميم هندسي بحت (UI/UX Architecture) — بلا React، بلا Tailwind، بلا CSS، بلا كود من أي نوع، بلا اتصال بقاعدة البيانات أو الـBackend.
**الغرض:** المرجع الرسمي الوحيد لكل واجهة مستقبلية على المنصة — أي مكوّن أو صفحة تُبنى لاحقًا يجب أن تلتزم بهذه الوثيقة حرفيًا، لا أن تُعيد اختراع قرارات تصميمية جديدة.
**علاقتها بما بُني فعليًا في طبقة الأساس:** بعض قرارات هذا النظام (نظام الخطوط، آلية الوضع الداكن، آلية RTL/LTR، نظام الأيقونات) **منفَّذة جزئيًا بالفعل** في `config/fonts.ts`, `config/themes.ts`, `styles/themes.css`, `components/icons/` من مرحلة الأساس (Phase 1) — هذه الوثيقة **تُصادق عليها وتُوسِّعها إلى نظام كامل**، لا تُعيد تصميمها من الصفر ولا تُناقضها.

---

## 1. Design Principles — مبادئ التصميم

### 1.1 البساطة (Simplicity)
كل شاشة تخدم هدفًا واحدًا واضحًا. لا تُعرَض أكثر من مستوى واحد من التعقيد التفاعلي في آن واحد (مثال: لا نافذة منبثقة فوق نافذة منبثقة). المحتوى الديني تحديدًا يستحق واجهة "تختفي" من طريق القارئ، لا واجهة تتنافس بصريًا مع النص المقدَّس.

### 1.2 الوضوح (Clarity)
كل عنصر تفاعلي له تسمية نصية مرئية أو ما يعادلها (لا أيقونات مجردة بلا سياق). حالة النظام (تحميل، خطأ، نجاح) مرئية دائمًا، لا ضمنية. المصدر العلمي لأي محتوى (آية، حديث، فتوى) ظاهر دومًا في الواجهة نفسها، لا خلف نقرة إضافية — انعكاس مباشر لمبدأ "نظام الإسناد الإلزامي" من المستند التأسيسي.

### 1.3 سهولة الوصول (Accessibility)
ليست ميزة إضافية بل شرط إطلاق (Launch-blocking) — مفصَّلة بالكامل في القسم 7. لا مكوّن يُعتمَد في مكتبة المكوّنات (القسم 3) دون أن يستوفي حده الأدنى من WCAG 2.1 AA.

### 1.4 دعم RTL وLTR
كل مكوّن، بلا استثناء، **يُصمَّم أولاً افتراضيًا للعربية (RTL)** ثم يُختبَر بالانعكاس للإنجليزية (LTR) — لا العكس، لأن الجمهور الأساسي المستهدَف عربي أولاً حسب المستند التأسيسي. كل قيم الاتجاه (حشوة، هوامش، أيقونات الأسهم) تُعرَّف بخصائص منطقية (Start/End) لا فيزيائية (Left/Right) — مبدأ مُطبَّق فعليًا في `styles/globals.css` من طبقة الأساس، ويُعمَّم هنا على كل مكوّن.

### 1.5 الأداء (Performance)
كل مكوّن يُصمَّم بافتراض شبكات بطيئة وأجهزة متوسطة القدرة (اتساقًا مع الجمهور العالمي المستهدَف). لا رسوم متحركة تؤثر على زمن التفاعل الأول؛ حالات التحميل (`Skeleton`) إلزامية لأي محتوى يستغرق أكثر من 300ms.

### 1.6 قابلية التوسع (Scalability)
النظام مصمَّم لمئات المكوّنات ومئات أنواع الصفحات دون أن يفقد الاتساق — عبر `Design Tokens` (القسم 10) كمصدر حقيقة وحيد، لا قيم مكتوبة مباشرة (Hardcoded) داخل أي مكوّن مستقبلي.

---

## 2. Visual Identity — الهوية البصرية

### 2.1 لوحة الألوان الأساسية والثانوية

القيم أدناه **تُوسِّع** لوحة الألوان المبدئية الموجودة فعليًا في `styles/themes.css` (أخضر أساسي، ذهبي/كهرماني ثانوي) إلى سلّم كامل من 10 درجات لكل لون، بنفس درجة اللون الأساسية (Hue) المُعتمَدة مسبقًا.

**اللون الأساسي (Primary) — أخضر، Hue 155°:**

| الدرجة | HSL | الاستخدام النموذجي |
|---|---|---|
| 50 | `hsl(155 55% 97%)` | خلفيات فاتحة جدًا (تمييز صف جدول، خلفية شارة) |
| 100 | `hsl(155 55% 92%)` | خلفيات حالة نجاح خفيفة |
| 200 | `hsl(155 55% 84%)` | حدود عناصر مُفعَّلة خفيفة |
| 300 | `hsl(155 55% 70%)` | — |
| 400 | `hsl(155 58% 55%)` | حالة Hover لعناصر أساسية فاتحة |
| **500** | `hsl(155 60% 40%)` | — |
| **600 (الأساسي المرجعي)** | `hsl(155 60% 24%)` | أزرار أساسية، روابط، عناصر تفاعلية رئيسية *(القيمة الحالية الفعلية في `styles/themes.css`)* |
| 700 | `hsl(155 62% 18%)` | حالة Active/Pressed |
| 800 | `hsl(155 62% 13%)` | نص على خلفية فاتحة من نفس العائلة |
| 900 | `hsl(155 65% 8%)` | أقصى تباين (نادر الاستخدام) |

**اللون الثانوي (Accent) — ذهبي/كهرماني، Hue 42°:**

| الدرجة | HSL | الاستخدام النموذجي |
|---|---|---|
| 50 | `hsl(42 55% 96%)` | خلفيات تمييز خفيفة |
| 100–400 | تدرّج تصاعدي من 88% إلى 55% إضاءة | حدود، خلفيات ثانوية |
| **600 (الأساسي المرجعي)** | `hsl(42 55% 42%)` | عناصر ثانوية، شارات مميَّزة، تمييز محتوى مختار *(القيمة الحالية الفعلية)* |
| 700–900 | تدرّج نزولي حتى 15% إضاءة | نصوص على خلفية فاتحة، حالة Active |

### 2.2 ألوان الحالة الدلالية (Semantic Colors)

| الحالة | Hue الأساسي | القيمة المرجعية (600) | ملاحظة |
|---|---|---|---|
| **نجاح (Success)** | 155° (نفس عائلة Primary) | `hsl(155 55% 30%)` | تمييز طفيف عن Primary لتفادي الالتباس بين "أخضر تفاعلي" و"أخضر نجاح" |
| **تحذير (Warning)** | 42° (نفس عائلة Accent) | `hsl(38 80% 45%)` | كهرماني أكثر تشبعًا وأقرب للبرتقالي من Accent العادي |
| **خطأ (Error)** | 0° | `hsl(0 65% 48%)` | *(مطابق لـ`--destructive` الموجود فعليًا)* |
| **معلومة (Info)** | 210° | `hsl(210 60% 45%)` | أزرق محايد، لا يتداخل مع أي من الألوان الثلاثة أعلاه |

كل حالة دلالية تحمل سلّمًا مصغَّرًا من 3 درجات فقط (100 خلفية فاتحة، 600 القيمة المرجعية، 800 نص/حدود) — لا سلّم كامل من 10 درجات كالألوان الأساسية، لأن استخدامها محدود النطاق (تنبيهات، شارات حالة فقط).

### 2.3 درجات الرمادي (Neutral Scale)

مبنية على نفس Hue الدافئ المحايد المستخدم في `--background`/`--foreground` الحاليين (Hue ≈ 40°، لا رمادي بارد صرف) للاتساق مع الهوية البصرية العامة:

| الدرجة | HSL |
|---|---|
| 50 | `hsl(40 20% 99%)` *(= `--background` الحالي)* |
| 100 | `hsl(40 18% 95%)` |
| 200 | `hsl(40 15% 88%)` *(≈ `--border` الحالي)* |
| 300 | `hsl(40 12% 78%)` |
| 400 | `hsl(40 8% 62%)` *(≈ `--muted-foreground` الحالي)* |
| 500 | `hsl(30 7% 48%)` |
| 600 | `hsl(25 8% 35%)` |
| 700 | `hsl(22 10% 25%)` |
| 800 | `hsl(20 12% 16%)` |
| 900 | `hsl(20 14% 10%)` *(= `--foreground` الحالي)* |

### 2.4 الخطوط

**مُعتمَد مسبقًا وبلا تغيير** (`config/fonts.ts`):
- **العربية:** IBM Plex Sans Arabic — أوزان 300/400/500/600/700.
- **اللاتينية:** Inter — أوزان 400/500/600/700.

**سلّم أحجام الخط (Type Scale)** — نسبة تصاعدية ~1.2 (Minor Third)، بنقطة أساس 16px:

| الاسم الرمزي | الحجم | الاستخدام |
|---|---|---|
| `xs` | 12px | تسميات ثانوية، طوابع زمنية |
| `sm` | 14px | نص مساعد، تسميات الحقول |
| `base` | 16px | نص المحتوى الأساسي (فقرات، آيات، أحاديث) |
| `lg` | 18px | نص مُبرَز، مقدمات المقالات |
| `xl` | 20px | عناوين فرعية صغيرة |
| `2xl` | 24px | عناوين أقسام |
| `3xl` | 30px | عناوين صفحات |
| `4xl` | 36px | عناوين الصفحة الرئيسية/الأقسام الكبرى |
| `5xl` | 48px | نص بطولي (Hero) نادر الاستخدام |

**ارتفاع السطر (Line Height):** `1.75` للنص العربي الطويل (يحتاج مساحة رأسية أكبر من اللاتيني بسبب التشكيل والامتدادات)، `1.5` للنص اللاتيني وللعناوين بكل اللغات.

### 2.5 المسافات (Spacing Scale)

سلّم خطي بقاعدة 4px (يطابق تمامًا نظام `--pad-*`/`--gap-*` المتاح فعليًا في بيئة عرض المكوّنات التفاعلية بالمحادثة، للاتساق العام):

| الاسم الرمزي | القيمة | الاسم الرمزي | القيمة |
|---|---|---|---|
| `0` | 0px | `6` | 24px |
| `1` | 4px | `8` | 32px |
| `2` | 8px | `10` | 40px |
| `3` | 12px | `12` | 48px |
| `4` | 16px | `16` | 64px |
| `5` | 20px | `20` | 80px |

### 2.6 الحواف (Border Radius)

| الاسم الرمزي | القيمة | الاستخدام |
|---|---|---|
| `none` | 0px | جداول، عناصر ملتصقة ببعضها |
| `sm` | 4px | شارات صغيرة |
| `default` | 8px | *(= `--radius` الحالي فعليًا)* أزرار، حقول إدخال، بطاقات صغيرة |
| `lg` | 12px | بطاقات، نوافذ منبثقة |
| `xl` | 16px | نوافذ كبيرة، أقسام بصرية بارزة |
| `full` | 9999px | الصور الرمزية (Avatar)، الشارات الدائرية |

### 2.7 الظلال (Shadows) — نظام ارتفاع (Elevation)

| المستوى | الاستخدام | الوصف |
|---|---|---|
| `none` | عناصر مسطَّحة بالتصميم | لا ظل |
| `sm` | بطاقات في حالة راحة | ظل خفيف جدًا، بالكاد محسوس |
| `md` | بطاقات عند Hover، قوائم منسدلة | ظل واضح معتدل |
| `lg` | نوافذ منبثقة (Modal)، أدراج (Drawer) | ظل بارز يفصل العنصر عن الخلفية بوضوح |
| `xl` | عناصر عائمة فوق كل شيء (Toast، قوائم سياقية) | أقصى ارتفاع بصري متاح في النظام |

**قاعدة استخدام:** الظل يدل دائمًا على **قابلية التفاعل أو الطبقة المؤقتة**، لا على الزخرفة — بطاقة محتوى ثابتة (مثل بطاقة مقالة في قائمة) تستخدم `sm` كحد أقصى؛ أي شيء "يطفو فوق" الصفحة (منبثق، إشعار) يبدأ من `lg` فأعلى.

---

## 3. Component Library — مكتبة المكوّنات القياسية

لكل مكوّن أدناه: **الغرض، الأنواع (Variants)، الحالات (States)، ملاحظات RTL، ملاحظات إتاحة الوصول**. هذه مواصفات هندسية للتصميم، لا تعريفات كود.

### 3.1 Button
**الغرض:** الفعل الأساسي القابل للنقر. **الأنواع:** `Primary` (فعل رئيسي واحد فقط لكل شاشة)، `Secondary`، `Outline`، `Ghost` (بلا خلفية، لفعل ثانوي داخل سياق مزدحم)، `Destructive` (حذف/إجراء لا رجعة فيه، بلون Error). **الأحجام:** `sm`/`md`/`lg`. **الحالات:** Default, Hover, Focus (حلقة تركيز مرئية إلزامية), Active, Disabled, Loading (مؤشر دوران يستبدل النص، لا يُخفيه). **RTL:** أيقونة الاتجاه (إن وُجدت) تنعكس تلقائيًا (سهم "التالي" يشير يسارًا في RTL). **إتاحة الوصول:** حد أدنى لمساحة اللمس 44×44px؛ لا زر بأيقونة فقط بلا `aria-label`.

### 3.2 Input
**الغرض:** إدخال نص حر. **الأنواع:** `Text`, `Email`, `Password` (مع زر إظهار/إخفاء), `Number`, `Search` (انظر 3.15), `Textarea`. **الحالات:** Default, Focus, Filled, Error (حدود حمراء + نص خطأ أسفل الحقل دومًا، لا مجرد لون), Disabled, Read-only. **RTL:** اتجاه الكتابة داخل الحقل يتبع لغة المحتوى المُدخَل تلقائيًا لا لغة الواجهة فقط (حقل بحث بالإنجليزية داخل واجهة عربية يبقى LTR داخليًا). **إتاحة الوصول:** كل حقل له `<label>` مرئي دائمًا (لا الاعتماد على Placeholder كتسمية وحيدة).

### 3.3 Select
**الغرض:** اختيار من قائمة مغلقة. **الأنواع:** `Single Select`, `Multi Select` (مع شارات للعناصر المختارة), `Searchable Select` (للقوائم الطويلة كـ`Country`/`Language`). **الحالات:** نفس Input + `Open` (القائمة المنسدلة ظاهرة). **RTL:** سهم الفتح على الجهة المقابلة تلقائيًا. **إتاحة الوصول:** تنقّل كامل بلوحة المفاتيح (الأسهم + Enter + Escape)، لا اعتماد على الفأرة فقط.

### 3.4 Checkbox
**الغرض:** اختيار ثنائي مستقل ضمن مجموعة. **الحالات:** Unchecked, Checked, Indeterminate (اختيار جزئي لمجموعة فرعية، مثل تحديد بعض عناصر Taxonomy), Disabled. **إتاحة الوصول:** منطقة نقر تشمل التسمية النصية المجاورة كاملة، لا صندوق الاختيار وحده.

### 3.5 Radio
**الغرض:** اختيار واحد حصري من مجموعة صغيرة مرئية بالكامل (≤5 خيارات — أكثر من ذلك يستخدم `Select`). **الحالات:** نفس Checkbox عدا `Indeterminate` (غير منطبق).

### 3.6 Switch
**الغرض:** تبديل حالة ثنائية فورية التأثير (بلا زر "حفظ" منفصل) — مثل تفعيل/تعطيل `FeatureFlag` في لوحة التحكم. **يختلف عن Checkbox في:** التأثير فوري لا يحتاج تأكيدًا إضافيًا؛ لا يُستخدَم أبدًا داخل نموذج يحتاج زر إرسال (استخدم Checkbox حينها).

### 3.7 Card
**الغرض:** تجميع بصري لمحتوى مترابط (مقالة، دورة، عالِم) ضمن قائمة أو شبكة. **الأنواع:** `Default` (نص فقط), `Media` (صورة + نص), `Interactive` (قابلة للنقر ككل، تحصل على Hover كامل). **RTL:** ترتيب العناصر الداخلية (صورة/نص) ينعكس بالكامل.

### 3.8 Modal
**الغرض:** مهمة مُركَّزة تتطلب قرارًا فوريًا يوقف التفاعل مع بقية الصفحة (تأكيد حذف، نموذج قصير حرِج). **قاعدة صارمة:** لا يُستخدَم لعرض معلومات طويلة أو نماذج معقَّدة متعددة الخطوات (استخدم صفحة كاملة أو `Drawer` بدلاً منه). **إتاحة الوصول:** حبس التركيز (Focus Trap) داخله إلزامي؛ `Escape` يُغلقه دائمًا؛ التركيز يعود للعنصر الذي فتحه عند الإغلاق.

### 3.9 Drawer
**الغرض:** محتوى إضافي أو نموذج أطول يظهر من حافة الشاشة (يبدأ من جهة "البداية" المنطقية — يمين الشاشة في RTL، يسارها في LTR) دون مغادرة السياق الأساسي — مثل تصفية نتائج البحث المتقدمة، أو تفاصيل إشعار. **يُفضَّل على Modal عندما:** المحتوى طويل، أو يحتاج المستخدم رؤية جزء من الصفحة الأصلية أثناء التفاعل.

### 3.10 Table
**الغرض:** عرض بيانات بنيوية متعددة الأعمدة (لوحة تحكم إدارية بشكل أساسي). **خصائص إلزامية:** ترويسة ثابتة عند التمرير (Sticky Header) للجداول الطويلة، فرز قابل للنقر لكل عمود، حالة فارغة مصمَّمة (لا جدول فارغ بلا رسالة). **قاعدة:** لا يُستخدَم لعرض محتوى عام للزوار (مقالات، آيات) — ذلك يستخدم `Card` ضمن قائمة/شبكة، لأن الجدول غير مناسب للقراءة الاستهلاكية العامة ولا لإتاحة الوصول على الهاتف.

### 3.11 Badge
**الغرض:** تسمية حالة أو تصنيف مختصرة جدًا (درجة حديث، حالة نشر، وسم). **الأنواع:** تُلوَّن بالألوان الدلالية (القسم 2.2) حصرًا — لا ألوان حرة. **قاعدة:** نص واحد قصير (كلمة أو كلمتين)، لا جملة.

### 3.12 Tabs
**الغرض:** تبديل بين عروض بديلة لنفس الكيان دون تغيير الصفحة (مثال حرِج لهذا المشروع: تبديل بين "التفسير" و"الترجمة" و"الإعراب" لنفس الآية). **قاعدة:** لا أكثر من 6 تبويبات ظاهرة معًا؛ أكثر من ذلك يحتاج إعادة تفكير في تجميع المحتوى، لا قائمة تبويبات قابلة للتمرير.

### 3.13 Breadcrumb
**الغرض:** إظهار الموقع الحالي ضمن التسلسل الهرمي للموقع، متوافقًا حرفيًا مع بنية `Information Architecture` (الرئيسية > القسم > القسم الفرعي > الصفحة). **RTL:** سهم الفصل بين العناصر ينعكس اتجاهه.

### 3.14 Pagination
**الغرض:** التنقّل عبر نتائج مقسَّمة لصفحات. **الأنواع:** `Numbered` (لقوائم محدودة كنتائج البحث)، `Load More` (لقوائم تصفح استكشافي كالمقالات)، `Infinite Scroll` (نادرًا، لقوائم قصيرة الاستهلاك كسجل الإشعارات فقط — **ممنوع** على المحتوى الرئيسي لأنه يضر بإتاحة الوصول وبإمكانية الوصول لتذييل الصفحة).

### 3.15 Search Box
**الغرض:** نقطة الدخول للبحث الشامل الموحَّد (`Information Architecture §3.4`). **خصائص إلزامية:** اقتراحات فورية (Instant Suggestions) مصنَّفة حسب النوع (آيات، أحاديث، مقالات...)، دعم صريح للبحث الصرفي بالجذر العربي، مؤشر تحميل أثناء الاستعلام.

### 3.16 Avatar
**الغرض:** تمثيل بصري لمستخدم أو عالِم. **الأنواع:** صورة، أو أحرف أولى من الاسم كبديل (Fallback) عند غياب الصورة — **لا أيقونة عامة مجرَّدة أبدًا** كبديل، لأن الاسم متاح دائمًا في هذا النظام.

### 3.17 Alert
**الغرض:** رسالة سياقية ثابتة داخل الصفحة (لا تختفي تلقائيًا) — مثل تنبيه "هذا المحتوى قيد المراجعة العلمية". **يختلف عن Toast في:** البقاء طالما السياق قائم، لا اختفاء بعد ثوانٍ.

### 3.18 Toast
**الغرض:** إشعار عابر بنتيجة فعل (تم الحفظ، فشل الإرسال) يختفي تلقائيًا. **قاعدة:** لا يحمل أبدًا معلومة حرِجة وحيدة (يجب أن تبقى متاحة في مكان دائم أيضًا) لأنه قد يُفوَّت.

### 3.19 Progress
**الغرض:** تقدُّم قابل للقياس (نسبة إتمام دورة، شريط تحميل ملف). **الأنواع:** `Linear` (شريط)، `Circular` (دائري، للمساحات الصغيرة كالصورة الرمزية).

### 3.20 Skeleton
**الغرض:** إشغال مكان المحتوى أثناء التحميل بنفس شكله التقريبي (لا مؤشر دوران عام) — يقلل "قفزة التخطيط" (Layout Shift) ويحسّن الأداء المُدرَك. **قاعدة إلزامية:** أي بطاقة/جدول/قائمة تُحمَّل بيانات من الخادم يجب أن يكون لها نسخة Skeleton مطابقة الأبعاد تقريبًا.

### 3.21 Loading States (نمط عام عابر للمكوّنات)
ثلاث حالات قياسية تُطبَّق باتساق: **تحميل أولي** (Skeleton)، **تحميل أثناء فعل** (Spinner داخل الزر/العنصر نفسه، لا يحجب الصفحة كاملة)، **تحميل خلفي صامت** (لا مؤشر مرئي، مثل تحديث عدد الإشعارات) — القاعدة: كلما كان التحميل متوقَّعًا وسريعًا، قلَّ الحاجة لمؤشر واضح.

---

## 4. Layout System — نظام التخطيط

### 4.1 Header
شريط علوي ثابت (Sticky) بارتفاع موحَّد عبر كل الصفحات العامة، يحتوي: الشعار (يعيد للرئيسية)، القائمة الرئيسية (القسم 5.1)، أيقونة البحث، مبدِّل اللغة، مبدِّل الوضع الداكن/الفاتح، أيقونة الحساب. على الهاتف: يُستبدَل جزء القائمة بأيقونة قائمة همبرغر تفتح `Drawer` (القسم 3.9).

### 4.2 Sidebar
مستخدَم حصرًا في `Dashboard Layout` (لا في الصفحات العامة، التي تعتمد Header فقط) — تنقّل رأسي بين أقسام لوحة التحكم، قابل للطي (Collapse) على الشاشات المتوسطة، ويتحول إلى `Drawer` منزلق بالكامل على الهاتف بدل شريط جانبي دائم.

### 4.3 Footer
يظهر مرة واحدة أسفل كل صفحة عامة (لا في `Dashboard Layout`، الذي يعتمد حدود الشاشة كاملة) — يحتوي خريطة موقع مصغَّرة بالأعمدة (مطابقة لأقسام `Information Architecture`)، روابط الثقة (سياسة الخصوصية، هيئة الإشراف)، دعوة التبرع، روابط التواصل.

### 4.4 Dashboard Layout
`Sidebar` (يمين الشاشة في RTL) + شريط علوي مصغَّر خاص بلوحة التحكم (مختلف عن Header العام — يحتوي مسار Breadcrumb داخلي وإجراءات سياقية بدل قائمة تنقّل عامة) + منطقة محتوى رئيسية. لا Footer عام.

### 4.5 التخطيطات حسب الجهاز

| الجهاز | عرض المحتوى | سلوك التنقّل |
|---|---|---|
| **الهاتف** | عمود واحد، عرض كامل مع حشوة صغيرة | Header مصغَّر + قائمة Drawer، لا Sidebar دائم أبدًا |
| **الجهاز اللوحي** | عمود واحد أو عمودان (محتوى + شريط جانبي محتوى إضافي مثل الفهرس)، عرض أقصى محدود | Sidebar (في لوحة التحكم) قابل للطي افتراضيًا |
| **سطح المكتب** | حتى 3 مناطق أفقية (تنقّل/محتوى/سياق إضافي)، عرض أقصى للمحتوى النصي ~720px لضمان راحة القراءة | Sidebar ظاهر بالكامل افتراضيًا، Header كامل |

---

## 5. Navigation — التنقّل

### 5.1 Main Navigation
مطابقة حرفيًا للقائمة الرئيسية المحدَّدة في `Information Architecture §3.1` (عن الإسلام | القرآن | السنة | الفقه | التعليم | المجتمع | الأدوات اليومية) — قائمة ميغا (Mega Menu) عند التحويم/النقر على أي عنصر رئيسي تعرض أقسامه الفرعية.

### 5.2 Secondary Navigation
تنقّل داخل نطاق واحد فقط (مثال: التنقّل بين سور القرآن داخل صفحة قراءة القرآن) — يظهر كشريط جانبي ثابت على سطح المكتب، وكقائمة منسدلة أو `Drawer` على الهاتف، لا كقائمة رئيسية موازية.

### 5.3 Breadcrumbs
إلزامية على كل صفحة داخلية بمستوى عمق ≥2 (غير إلزامية على الرئيسية والصفحات ذات المستوى الأول) — انظر مواصفات المكوّن في §3.13.

### 5.4 Search Navigation
نتائج البحث نفسها تُعامَل كسياق تنقّل مستقل: تبقى المرشِّحات (Filters) المُطبَّقة ظاهرة ومعدَّلة أثناء التصفح بين النتائج، ولا تُفقَد عند فتح نتيجة والعودة (حالة البحث تُحفَظ في عنوان الرابط URL، لا في الذاكرة المؤقتة للجلسة فقط).

---

## 6. Responsive Design — التصميم المتجاوب

### 6.1 نقاط التوقف (Breakpoints)

| الاسم الرمزي | العرض الأدنى | الجهاز المرجعي |
|---|---|---|
| `sm` | 640px | هاتف كبير أفقيًا / لوحي صغير |
| `md` | 768px | جهاز لوحي |
| `lg` | 1024px | سطح مكتب صغير / لوحي كبير أفقيًا |
| `xl` | 1280px | سطح مكتب قياسي |
| `2xl` | 1536px | شاشات عريضة |

### 6.2 سلوك المكوّنات الرئيسية عبر الأجهزة

| المكوّن | الهاتف (<640px) | الجهاز اللوحي (640–1024px) | سطح المكتب (>1024px) |
|---|---|---|---|
| `Table` | يتحوَّل لقائمة بطاقات رأسية (لا تمرير أفقي للجدول) | جدول بتمرير أفقي عند الحاجة | جدول كامل |
| `Modal` | يشغل الشاشة كاملة تقريبًا (Full-screen) | نافذة مركزية بعرض محدود | نافذة مركزية بعرض ثابت |
| `Tabs` | تبويبات قابلة للتمرير أفقيًا إن لزم | كاملة الظهور | كاملة الظهور |
| `Sidebar` | مخفي، Drawer عند الطلب | قابل للطي، مطويّ افتراضيًا | ظاهر دائمًا |
| `Mega Menu` | يتحوَّل لقائمة Accordion داخل Drawer | نفس سلوك سطح المكتب مبسَّطًا | قائمة ميغا كاملة أفقية |

---

## 7. Accessibility — إتاحة الوصول

**المعيار المُعتمَد: WCAG 2.1 المستوى AA** كحد أدنى إلزامي لإطلاق أي ميزة (لا AAA كهدف حالي، ولا A كحد كافٍ).

المعايير المحدَّدة ذات الأولوية لهذا المشروع تحديدًا:
- **تباين الألوان (1.4.3):** نسبة 4.5:1 كحد أدنى للنص العادي، 3:1 للنص الكبير — كل أزواج الألوان في القسم 2 يجب اختبارها فعليًا عند التنفيذ.
- **التنقّل الكامل بلوحة المفاتيح (2.1.1):** كل مكوّن تفاعلي في القسم 3 قابل للوصول والتفعيل دون فأرة.
- **مؤشر التركيز المرئي (2.4.7):** حلقة تركيز واضحة على كل عنصر تفاعلي، غير مُزالة أبدًا بـ`outline: none` بلا بديل.
- **تسميات الحقول والأزرار (4.1.2, 1.1.1):** كل عنصر تفاعلي له اسم واضح لتقنيات المساعدة (قارئ الشاشة)، لا اعتماد على السياق البصري فقط.
- **قابلية القراءة بلغتين واتجاهين (3.1.2):** خاصية `lang` صحيحة على أي مقطع نص بلغة مختلفة عن لغة الصفحة (اقتباس آية عربية داخل صفحة إنجليزية مثلاً).
- **عدم الاعتماد على اللون وحده (1.4.1):** حالة الخطأ في `Input` تُعرَض بنص + أيقونة، لا بلون الحدود وحده؛ درجة الحديث في `Badge` تحمل نصًا واضحًا لا لونًا فقط.
- **تكبير النص دون كسر التخطيط (1.4.4):** الواجهة تبقى وظيفية عند تكبير حجم الخط 200% من إعدادات المتصفح.

---

## 8. Dark Mode — الوضع الداكن والفاتح

**الآلية مُنفَّذة مسبقًا وبلا تغيير** (`next-themes` + متغيّرات CSS في `styles/themes.css`، فئة `.dark` على `<html>`). قواعد التصميم الإضافية التي يضيفها هذا النظام:

- **لا انعكاس حرفي للألوان** (لون فاتح ← نفس اللون داكنًا) — بل إعادة معايرة يدوية لكل درجة بحيث يبقى التباين مقبولاً (القسم 7)؛ الأخضر الأساسي في الوضع الداكن أفتح وأقل تشبعًا من نظيره في الوضع الفاتح (مطابق للقيم الفعلية الموجودة مسبقًا في `styles/themes.css`: `hsl(155 45% 45%)` داكن مقابل `hsl(155 60% 24%)` فاتح).
- **الظلال (§2.7) تُستبدَل بحدود خفيفة في الوضع الداكن** — الظل التقليدي غير مرئي فعليًا على خلفية داكنة، فتُستخدَم حدود (`border`) بدرجة رمادية فاتحة قليلاً عن الخلفية للدلالة على الارتفاع بدلاً من الظل.
- **الصور والوسائط** لا تُعتَّم أو تُعكَس تلقائيًا؛ فقط عناصر الواجهة (خلفيات، نصوص، حدود) تتغيَّر.
- **لا وضع "تلقائي حسب الوقت"** — فقط ثلاثة خيارات: فاتح، داكن، حسب نظام الجهاز (مطابق للقيم الثلاث الموجودة فعليًا في `config/themes.ts`).

---

## 9. Icons — نظام الأيقونات

**المكتبة المُعتمَدة مسبقًا وبلا تغيير:** `lucide-react`، عبر سطح استيراد موحَّد في `components/icons/` (لا استيراد مباشر من المكتبة في أي مكان آخر من الكود مستقبلاً).

**قواعد الاستخدام:**
- **الحجم:** 16px ضمن نص/أزرار صغيرة، 20px قياسي، 24px حد أقصى للاستخدام الزخرفي البارز (رؤوس الأقسام).
- **سماكة الخط:** نمط `Outline` فقط (لا أيقونات مملوءة `Filled`) للاتساق البصري عبر كل النظام.
- **الأيقونة وحدها لا تكفي أبدًا** كفعل تفاعلي دون تسمية نصية مصاحبة أو `aria-label` — امتداد مباشر لمبدأ الوضوح (§1.2).
- **الأيقونات الزخرفية البحتة** (لا تحمل معنى وظيفيًا) تُعلَّم `aria-hidden` دائمًا حتى لا تُربِك قارئ الشاشة.
- **لا أيقونات مخصَّصة (Custom Icons) خارج المكتبة** إلا لحالات لا بديل لها فعليًا (شعار المنصة نفسه) — أي حاجة متكررة لأيقونة غير متوفرة في `lucide-react` تُراجَع كقرار نظام تصميم مستقل، لا حلاً سريعًا محليًا.

---

## 10. Design Tokens — الرموز التصميمية

هذا القسم **يُقنِّن** كل قرار في الأقسام 2 و7 و9 في قائمة رموز مسمَّاة رسميًا، لتُستخدَم كمصدر الحقيقة الوحيد عند الترميز الفعلي مستقبلاً (تُترجَم إلى متغيّرات CSS ضمن نظام `@theme` في Tailwind v4 الموجود فعليًا في `styles/globals.css` — لا تُنشأ آلية جديدة).

| فئة الرمز | أمثلة الأسماء | المصدر |
|---|---|---|
| **اللون** | `color.primary.600`, `color.accent.600`, `color.success.600`, `color.warning.600`, `color.error.600`, `color.info.600`, `color.neutral.100`…`900` | القسم 2.1–2.3 |
| **الخط** | `font.family.arabic`, `font.family.latin`, `font.size.xs`…`5xl`, `font.weight.regular/medium/semibold/bold`, `font.lineHeight.arabic/latin` | القسم 2.4 |
| **المسافة** | `space.0`…`space.20` | القسم 2.5 |
| **الحواف** | `radius.none/sm/default/lg/xl/full` | القسم 2.6 |
| **الظلال** | `shadow.none/sm/md/lg/xl` | القسم 2.7 |
| **نقاط التوقف** | `breakpoint.sm/md/lg/xl/2xl` | القسم 6.1 |
| **الأيقونة** | `icon.size.sm/md/lg` | القسم 9 |
| **الحركة (Motion)** | `motion.duration.fast(150ms)/default(250ms)/slow(400ms)`, `motion.easing.standard` | جديد، مُعرَّف هنا لأول مرة لضبط اتساق كل الانتقالات المستقبلية |

**قاعدة صارمة:** أي قيمة بصرية (لون، مسافة، حجم خط) تظهر في كود مستقبلي **يجب** أن تُستمَد من رمز في هذا الجدول — لا قيمة حرة مكتوبة مباشرة (Magic Number) في أي مكوّن.

---

## 11. Page Templates — قوالب الصفحات القياسية

كل قالب أدناه وصف **بنيوي للمناطق (Zones)**، لا تصميم بصري نهائي ولا كود.

### 11.1 الصفحة الرئيسية
Header (§4.1) → منطقة ترحيب موجَّهة حسب نية الزائر (وثيقة IA) → صف بطاقات "آية وحديث اليوم" → شبكة أقسام رئيسية (بطاقات كبيرة للنطاقات السبعة) → صف "مقترَح لك" (مخصَّص إن كان المستخدم مسجَّلاً) → Footer (§4.3).

### 11.2 صفحة المقال (Article)
Header → Breadcrumb → عنوان + بيانات وصفية (المؤلف/العالِم، التاريخ، وقت القراءة) → صورة بارزة (إن وُجدت) → جسم المقال (عرض قراءة محدود ~720px) → قسم الاستشهادات المرتبطة (آيات/أحاديث مذكورة، كبطاقات قابلة للتوسيع) → وسوم وتصنيفات → مقالات ذات صلة → Footer.

### 11.3 صفحة الآية (Verse)
Header (مع شريط تنقّل ثانوي لرقم السورة/الآية، §5.2) → نص الآية بخط عربي كبير مُبرَز مركزيًا → أزرار تشغيل التلاوة → `Tabs` (§3.12) للتبديل بين: التفسير | الترجمات المتاحة | الإعراب اللغوي (الجذر/الكلمات) → آيات مجاورة للتنقّل السريع.

### 11.4 صفحة الحديث (Hadith)
Header → متن الحديث بارزًا + `Badge` الدرجة (ظاهرة دومًا بجانب النص مباشرة، لا مخفية) → سلسلة الإسناد كعرض بصري تسلسلي (راوٍ ← راوٍ ← راوٍ) → مصدر التخريج (الكتاب/المجموعة) → شروح العلماء المرتبطة (إن وُجدت) → أحاديث بنفس الموضوع.

### 11.5 صفحة العالِم (Scholar)
Header → رأس ملف شخصي (صورة، الاسم، التخصص، الحقبة) → السيرة العلمية → `Tabs` لتصنيف إنتاجه العلمي: تفاسير | فتاوى | مقالات | كتب → معلومات الانتساب (مراكز إسلامية، إن وُجدت).

### 11.6 صفحة البحث (Search)
Header مع `Search Box` (§3.15) بارزًا في الأعلى → تخطيط عمودين على سطح المكتب: `Drawer`/شريط مرشِّحات جانبي (§3.9) + قائمة نتائج رئيسية مصنَّفة حسب النوع → `Pagination` (نمط `Load More`، §3.14) → على الهاتف: المرشِّحات في `Drawer` منفصل يُفتَح بزر.

### 11.7 لوحة التحكم (Dashboard)
`Dashboard Layout` كاملاً (§4.4): `Sidebar` للتنقّل بين وحدات الإدارة (المحتوى، المستخدمون، التصنيفات...) → شريط علوي داخلي مع `Breadcrumb` وإجراءات سياقية → منطقة المحتوى: إما `Table` لقوائم الإدارة أو نموذج تحرير محتوى مفصَّل.

### 11.8 صفحة تسجيل الدخول
لا Header ولا Footer عامَّين (تركيز كامل بلا تشتيت) — شعار مصغَّر أعلى نموذج مركزي بعرض ضيق (~400px)، حقول الدخول، رابط استعادة كلمة المرور، رابط التبديل لإنشاء حساب، مبدِّل اللغة فقط كعنصر إضافي مسموح.

### 11.9 صفحة الملف الشخصي
Header → رأس ملف شخصي (صورة، الاسم، الدور) → `Tabs`: نظرة عامة (تقدُّم التعلّم) | دوراتي المسجَّل بها | الشهادات | الإعدادات (اللغة، إمكانية الوصول، الخصوصية — مطابقة لحقول `config/site.ts`/`config/themes.ts` الفعلية).

---

## 12. Component Usage Rules — قواعد استخدام المكوّنات (ملخَّص القرار السريع)

| الموقف | استخدم | لا تستخدم |
|---|---|---|
| تأكيد فعل حرِج وسريع (حذف، تأكيد بسيط) | `Modal` | `Drawer` (مبالغة)، `Toast` (لا يوقف الفعل) |
| نموذج طويل أو تفاصيل إضافية دون مغادرة السياق | `Drawer` | `Modal` (يحجب الصفحة كاملة بلا داعٍ) |
| إعلام بنتيجة فعل عابر | `Toast` | `Alert` (يبقى ويشغل مساحة دائمة) |
| تنبيه سياقي دائم طالما الشرط قائم | `Alert` | `Toast` (سيختفي وقد يُفوَّت) |
| تبديل فوري الأثر بلا حاجة لتأكيد | `Switch` | `Checkbox` داخل نموذج يحتاج إرسالاً |
| اختيار من ≤5 خيارات ظاهرة دومًا | `Radio` | `Select` (خطوة نقر إضافية غير ضرورية) |
| اختيار من قائمة طويلة (لغات، دول) | `Select` (Searchable) | `Radio` (يُغرق الشاشة) |
| عرض بيانات جدولية لمستخدم إداري | `Table` | `Card` List (غير مناسب لمقارنة أعمدة متعددة) |
| عرض محتوى استهلاكي عام (مقالات، دورات) | `Card` ضمن شبكة/قائمة | `Table` (يضر بالقراءة وإتاحة الوصول على الهاتف) |
| تصفح نتائج بحث | `Pagination` (Load More) | `Infinite Scroll` (يضر بالوصول لتذييل الصفحة وإتاحة الوصول) |
| تحميل أولي لمحتوى الصفحة | `Skeleton` | مؤشر دوران عام يحجب الصفحة كاملة |

---

## الخلاصة

هذه الوثيقة **هي المرجع الرسمي الوحيد** لكل قرار بصري أو تفاعلي مستقبلي على المنصة. أي تعارض بين هذه الوثيقة وأي كود أو تصميم مستقبلي يُحسَم لصالح هذه الوثيقة إلى أن تُعدَّل هي نفسها بموافقة صريحة منفصلة. **لم يُكتب أي React أو Tailwind أو CSS أو أي كود، ولم تُنشأ أي صفحة فعلية أو ملف مرتبط بقاعدة البيانات**، تمامًا كما طُلب.