# Design System

## Direction

غرفة أخبار مصرية مضاءة نهارًا: المحرر والقارئ يحتاجان إشارات قوية وسريعة، لذا الواجهة فاتحة ومباشرة مع أحمر تحريري محدود وتباين داكن.

## Color

```css
:root {
  --primary: #c8102e;
  --dark: #171717;
  --gray: #666666;
  --light: #f5f5f5;
  --border: #e5e5e5;
  --white: #ffffff;
  --success: #157347;
  --danger: #b42318;
}
```

استراتيجية اللون restrained: الأحمر للعاجل والروابط النشطة والأفعال الأساسية فقط، والأسطح بيضاء أو رمادية فاتحة.

## Typography

خط النظام العربي أولًا: Tahoma, Arial, system-ui, sans-serif، بلا تحميل خارجي. نص المقال 1.125rem وline-height لا يقل عن 1.9، وعرض القراءة 72ch كحد أقصى. الهرمية تعتمد الوزن والحجم لا الزخرفة.

## Layout

- حاوية مركزية بحد أقصى 1280px وهوامش responsive.
- الرئيسية: hero غير متماثل، latest رئيسي، most-read جانبي على desktop ثم تدفق عمودي على mobile.
- لوحة الإدارة: sidebar بعرض 232px، ينكمش خلف زر على الشاشات الصغيرة.
- لا nested cards، ولا shadows ثقيلة، ولا horizontal scroll للصفحة.

## Components

- الشعار كلمة عربية قوية داخل رابط بسيط.
- عناوين الأقسام بخط داكن وunderline أحمر رفيع بعرض العنوان.
- news card يتغير تركيبه حسب `lead`, `horizontal`, `compact` بدل تكرار markup.
- الحقول والزرار بارتفاع لمس 44px، focus ring واضح، والحالات الدلالية ثابتة.
- الجداول تستخدم wrapper أفقيًا داخل الإدارة فقط، مع عناوين صفوف واضحة على الهاتف.

## Motion

150 إلى 220ms لتبديل القوائم والحالات فقط. ticker العاجل يحترم `prefers-reduced-motion`.