# 🎨 نظام الهوية البصرية الموحد - Roz Skin

## 📋 نظرة عامة

نظام هوية بصرية موحد 100% لجميع صفحات المتجر، مع ملف CSS واحد وملفات header/footer موحدة.

---

## 🎯 الملفات الأساسية

### 1. ملف CSS الموحد
```
public/assets/css/unified-brand.css
```
**الحجم:** ~15 KB  
**المحتوى:** جميع الأنماط الأساسية للموقع

### 2. Header الموحد
```
includes/unified-header.php
```
**يحتوي على:**
- Navigation موحد
- Logo
- Cart & Wishlist badges
- Mobile menu

### 3. Footer الموحد
```
includes/unified-footer.php
```
**يحتوي على:**
- معلومات الشركة
- روابط سريعة
- وسائل التواصل
- Toast notifications

---

## 🎨 الألوان الأساسية

### الألوان الرئيسية
```css
--brand-primary: #E57393;           /* وردي بيري */
--brand-primary-light: #F2A8C0;     /* وردي فاتح */
--brand-primary-dark: #D1537A;      /* وردي داكن */
--brand-primary-hover: #C73E6B;     /* للتفاعل */
```

### الألوان الثانوية
```css
--brand-secondary: #207D88;         /* تركواز */
--brand-secondary-light: #3A9BA6;   /* تركواز فاتح */
--brand-secondary-dark: #186570;    /* تركواز داكن */
```

### الألوان المحايدة
```css
--brand-white: #FFFFFF;
--brand-black: #1F2937;
--brand-gray-100: #F3F4F6;
--brand-gray-500: #6B7280;
```

---

## 🔤 الخطوط

### الخط الأساسي
```css
font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
```

### أحجام الخطوط
```css
--brand-font-size-xs: 0.75rem;    /* 12px */
--brand-font-size-sm: 0.875rem;   /* 14px */
--brand-font-size-base: 1rem;     /* 16px */
--brand-font-size-lg: 1.125rem;   /* 18px */
--brand-font-size-xl: 1.25rem;    /* 20px */
--brand-font-size-2xl: 1.5rem;    /* 24px */
--brand-font-size-3xl: 1.875rem;  /* 30px */
--brand-font-size-4xl: 2.25rem;   /* 36px */
--brand-font-size-5xl: 3rem;      /* 48px */
```

---

## 🔘 الأزرار

### الزر الأساسي
```html
<button class="btn btn-primary">
    <i class="fas fa-shopping-cart"></i>
    أضف للسلة
</button>
```

### الزر الثانوي
```html
<button class="btn btn-secondary">
    احجز الآن
</button>
```

### الزر المحدد
```html
<button class="btn btn-outline">
    المزيد
</button>
```

### أحجام الأزرار
```html
<button class="btn btn-primary btn-lg">كبير</button>
<button class="btn btn-primary">عادي</button>
<button class="btn btn-primary btn-sm">صغير</button>
```

---

## 🃏 البطاقات

### بطاقة منتج
```html
<div class="card">
    <div class="card-image">
        <img src="product.jpg" alt="Product">
    </div>
    <div class="card-body">
        <h3 class="card-title">اسم المنتج</h3>
        <p class="card-description">وصف المنتج...</p>
        <div class="card-footer">
            <div class="price-container">
                <span class="price-current">299 ر.س</span>
                <span class="price-old">399 ر.س</span>
            </div>
            <button class="btn btn-primary btn-sm">أضف للسلة</button>
        </div>
    </div>
</div>
```

---

## 📐 الشبكة

### Grid System
```html
<div class="container">
    <div class="grid grid-cols-4">
        <div class="card">...</div>
        <div class="card">...</div>
        <div class="card">...</div>
        <div class="card">...</div>
    </div>
</div>
```

### الاستجابة
- **Mobile:** 1 عمود
- **Tablet:** 2 عمود
- **Desktop:** 3-4 أعمدة

---

## 🏷️ الشارات

### شارة خصم
```html
<span class="badge badge-primary">
    <i class="fas fa-tag"></i>
    خصم 25%
</span>
```

### شارة جديد
```html
<span class="badge badge-secondary">
    جديد
</span>
```

---

## ⭐ التقييمات

```html
<div class="rating">
    <div class="rating-stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <span class="rating-count">(4.5)</span>
</div>
```

---

## 🔔 الإشعارات

### Toast Notification
```javascript
showToast('تم إضافة المنتج للسلة', 'success');
showToast('حدث خطأ', 'error');
showToast('معلومة مهمة', 'info');
```

---

## 📱 الاستجابة للموبايل

### Breakpoints
```css
/* Mobile */
@media (max-width: 768px) { }

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) { }

/* Desktop */
@media (min-width: 1025px) { }
```

---

## 🎭 الحركات

### Fade In
```html
<div class="fade-in">...</div>
```

### Fade In Up
```html
<div class="fade-in-up">...</div>
```

---

## 📝 كيفية الاستخدام

### 1. في صفحة جديدة:

```php
<?php
$page_title = 'اسم الصفحة';
$base_path = '../';
include '../includes/unified-header.php';
?>

<!-- محتوى الصفحة -->
<div class="container py-12">
    <h1>عنوان الصفحة</h1>
    
    <div class="grid grid-cols-3">
        <div class="card">...</div>
        <div class="card">...</div>
        <div class="card">...</div>
    </div>
</div>

<?php include '../includes/unified-footer.php'; ?>
```

### 2. إضافة CSS إضافي:

```php
<?php
$page_title = 'اسم الصفحة';
$extra_css = '<style>
    .custom-class {
        /* أنماط مخصصة */
    }
</style>';
include '../includes/unified-header.php';
?>
```

### 3. إضافة JavaScript إضافي:

```php
<?php
$extra_js = '<script>
    // كود JavaScript مخصص
</script>';
include '../includes/unified-footer.php';
?>
```

---

## ✅ المميزات

- ✅ **موحد 100%** - نفس الشكل في كل الصفحات
- ✅ **سريع** - ملف CSS واحد فقط
- ✅ **سهل الصيانة** - تعديل واحد يطبق على كل الصفحات
- ✅ **متجاوب** - يعمل على جميع الأجهزة
- ✅ **احترافي** - تصميم عصري وجذاب
- ✅ **منظم** - كود نظيف ومرتب
- ✅ **موثق** - توثيق كامل

---

## 🎯 الخطوات التالية

1. ✅ تطبيق النظام على جميع الصفحات
2. ✅ اختبار على جميع الأجهزة
3. ✅ تحسين الأداء
4. ✅ إضافة المزيد من المكونات

---

## 📞 الدعم

للمساعدة أو الاستفسارات، راجع:
- `unified-brand.css` - الأنماط الأساسية
- `unified-header.php` - Header
- `unified-footer.php` - Footer

---

**تم التطوير بواسطة:** Kiro AI  
**التاريخ:** نوفمبر 2025  
**الإصدار:** 1.0