# IFNEX Design System

## 🎨 رنگ‌های برند

### رنگ‌های اصلی
| نام | HEX | استفاده |
|-----|-----|---------|
| Primary Amber | `#f59e0b` | دکمه‌های اصلی، لینک‌ها، آیکون‌های فعال |
| Primary Dark | `#d97706` | هاور دکمه‌ها |
| Primary Light | `#fbbf24` | زمینه‌های روشن، هایلایت |
| Success Green | `#059669` | عملیات موفق، موجودی مثبت |
| Danger Red | `#dc2626` | خطاها، موجودی منفی |
| Warning Yellow | `#f59e0b` | هشدارها، در حال پردازش |
| Info Blue | `#2563eb` | اطلاعات، لینک‌ها |

### رنگ‌های خنثی
| نام | HEX | استفاده |
|-----|-----|---------|
| Gray 900 | `#111827` | متن‌های اصلی |
| Gray 700 | `#374151` | متن‌های ثانویه |
| Gray 500 | `#6b7280` | توضیحات، placeholder |
| Gray 300 | `#d1d5db` | حاشیه‌ها |
| Gray 100 | `#f3f4f6` | پس‌زمینه‌های روشن |
| White | `#ffffff` | پس‌زمینه کارت‌ها |

### رنگ‌های Sidebar
| نام | HEX | استفاده |
|-----|-----|---------|
| Sidebar Dark | `#1a1a2e` | پس‌زمینه اصلی سایدبار |
| Sidebar Blue | `#16213e` | گرادینت سایدبار |
| Sidebar Active | `rgba(245, 158, 11, 0.15)` | آیتم فعال |

## 📐 فاصله‌گذاری (Spacing)

| نام | مقدار | استفاده |
|-----|-------|---------|
| xs | 0.25rem (4px) | فاصله‌های خیلی کوچک |
| sm | 0.5rem (8px) | فاصله‌های کوچک |
| md | 1rem (16px) | فاصله‌های استاندارد |
| lg | 1.5rem (24px) | فاصله‌های بزرگ |
| xl | 2rem (32px) | فاصله‌های خیلی بزرگ |
| 2xl | 3rem (48px) | فاصله‌های بخش‌ها |

## 🔤 تایپوگرافی

### فونت اصلی
- **فامیلی:** Vazirmatn, IranYekan, ui-sans-serif, system-ui, sans-serif
- **سایز پایه:** 14px
- **خط:** 1.6

### سایزهای فونت
| نام | اندازه | وزن | استفاده |
|-----|--------|-----|---------|
| xs | 0.75rem (12px) | 400 | توضیحات، watermark |
| sm | 0.875rem (14px) | 400 | متن‌های استاندارد |
| base | 1rem (16px) | 400 | متن‌های اصلی |
| lg | 1.125rem (18px) | 500 | زیرعنوان‌ها |
| xl | 1.25rem (20px) | 600 | عنوان‌های صفحه |
| 2xl | 1.5rem (24px) | 700 | عنوان‌های اصلی |
| 3xl | 1.875rem (30px) | 700 | Hero text |

## 📦 کارت‌ها و کادرها

### استایل کارت
- **Border Radius:** 0.75rem (12px)
- **Border:** 1px solid #e5e7eb
- **Shadow:** 0 1px 3px rgba(0, 0, 0, 0.05)
- **Padding:** 1.25rem
- **Background:** #ffffff

### استایل کارت statistic
- **Border Radius:** 0.75rem (12px)
- **Padding:** 1.25rem
- **Title:** 0.875rem, weight 500, color #6b7280
- **Value:** 1.5rem, weight 700, color #111827

## 🔘 دکمه‌ها

### Primary Button
- **Background:** #f59e0b
- **Border:** #f59e0b
- **Color:** #ffffff
- **Border Radius:** 0.5rem (8px)
- **Padding:** 0.625rem 1.25rem
- **Font Size:** 0.875rem
- **Hover:** #d97706, translateY(-1px), shadow

### Secondary Button
- **Background:** #ffffff
- **Border:** #d1d5db
- **Color:** #374151
- **Hover:** #f9fafb

## 📊 جداول

### Header
- **Background:** #f9fafb
- **Font Size:** 0.875rem
- **Font Weight:** 600
- **Text Transform:** uppercase
- **Letter Spacing:** 0.025em
- **Color:** #374151
- **Padding:** 0.75rem 1rem

### Cell
- **Padding:** 0.75rem 1rem
- **Font Size:** 0.875rem
- **Color:** #374151
- **Border Bottom:** 1px solid #f3f4f6

### Hover
- **Background:** #fffbeb

## 📱 رسپانسیو

### Breakpoints
- **Mobile:** < 768px
- **Tablet:** 768px - 1024px
- **Desktop:** > 1024px

### Mobile Adjustments
- **Font Size:** 13px
- **Padding:** 0.75rem
- **Grid:** 1 column
- **Cards:** Full width

### Tablet Adjustments
- **Grid:** 2 columns
- **Padding:** 1rem

## 🎯 چیدوبندی (Layout)

### Container
- **Max Width:** 1400px
- **Padding:** 1.5rem
- **Margin:** 0 auto

### Grid System
- **Gap:** 1rem
- **Columns:** auto-fit, minmax(240px, 1fr)

## 🌙 حالت تاریک (Dark Mode)

### در حال توسعه...
- پس‌زمینه: #0f172a
- متن: #f1f5f9
- کارت: #1e293b
- حاشیه: #334155

---

## 📋 پیاده‌سازی در Filament

```php
// AdminPanelProvider.php
->colors([
    'primary' => Color::Amber, // #f59e0b
])
->sidebarWidth('18rem')
->maxContentWidth('xl')
```

## 📋 پیاده‌سازی در WordPress

```css
/* استفاده از متغیرهای CSS */
:root {
    --ifnex-primary: #f59e0b;
    --ifnex-primary-dark: #d97706;
    --ifnex-success: #059669;
    --ifnex-danger: #dc2626;
    --ifnex-gray-900: #111827;
    --ifnex-gray-700: #374151;
    --ifnex-gray-500: #6b7280;
    --ifnex-gray-300: #d1d5db;
    --ifnex-gray-100: #f3f4f6;
    --ifnex-white: #ffffff;
}
```