# El Captain Marketing Site — Design System

## Design Tokens

### Primitive Tokens (raw values)
```css
:root {
  /* Colors - Primitive */
  --color-navy-50: #EFF6FF;
  --color-navy-100: #DBEAFE;
  --color-navy-200: #BFDBFE;
  --color-navy-500: #3B82F6;
  --color-navy-700: #1D4ED8;
  --color-navy-800: #1E3A5F;
  --color-navy-900: #0F172A;

  --color-sky-50: #F0F9FF;
  --color-sky-100: #E0F2FE;
  --color-sky-200: #BAE6FD;
  --color-sky-400: #38BDF8;
  --color-sky-500: #0EA5E9;
  --color-sky-600: #0284C7;
  --color-sky-700: #0369A1;

  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;

  --color-emerald-500: #10B981;
  --color-amber-500: #F59E0B;
  --color-violet-500: #8B5CF6;
  --color-red-500: #EF4444;

  /* Spacing - Primitive */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius - Primitive */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows - Primitive */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 40px rgba(14,165,233,0.15);
}
```

### Semantic Tokens (purpose-driven)
```css
:root {
  /* Text */
  --text-primary: var(--color-slate-900);
  --text-secondary: var(--color-slate-500);
  --text-tertiary: var(--color-slate-400);
  --text-inverse: #FFFFFF;
  --text-brand: var(--color-sky-600);
  --text-success: var(--color-emerald-500);
  --text-warning: var(--color-amber-500);
  --text-error: var(--color-red-500);

  /* Background */
  --bg-page: var(--color-slate-50);
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-muted: var(--color-slate-100);
  --bg-brand: var(--color-sky-500);
  --bg-brand-subtle: var(--color-sky-50);
  --bg-dark: var(--color-navy-800);

  /* Border */
  --border-default: var(--color-slate-200);
  --border-subtle: var(--color-slate-100);
  --border-strong: var(--color-slate-300);
  --border-brand: var(--color-sky-200);
  --border-focus: var(--color-sky-500);

  /* Interactive */
  --interactive-primary: var(--color-sky-500);
  --interactive-primary-hover: var(--color-sky-600);
  --interactive-primary-active: var(--color-sky-700);
  --interactive-secondary: var(--color-slate-100);
  --interactive-secondary-hover: var(--color-slate-200);
}
```

### Component Tokens
```css
:root {
  /* Button */
  --btn-primary-bg: var(--interactive-primary);
  --btn-primary-bg-hover: var(--interactive-primary-hover);
  --btn-primary-text: var(--text-inverse);
  --btn-primary-radius: var(--radius-lg);
  --btn-primary-padding: var(--space-3) var(--space-6);
  --btn-primary-font-weight: 600;

  --btn-secondary-bg: var(--bg-surface);
  --btn-secondary-border: var(--border-default);
  --btn-secondary-text: var(--text-primary);

  /* Card */
  --card-bg: var(--bg-surface);
  --card-border: var(--border-default);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-6);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Nav */
  --nav-height: 72px;
  --nav-bg: rgba(255,255,255,0.8);
  --nav-backdrop: blur(12px);
  --nav-border: var(--border-subtle);

  /* Section */
  --section-padding-y: var(--space-20);
  --section-padding-y-mobile: var(--space-12);
  --section-max-width: 1280px;
}
```

---

## Tailwind Configuration

```javascript
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          100: '#E0F2FE',
          200: '#BAE6FD',
          300: '#7DD3FC',
          400: '#38BDF8',
          500: '#0EA5E9',
          600: '#0284C7',
          700: '#0369A1',
        },
        navy: {
          800: '#1E3A5F',
          900: '#0F172A',
        },
      },
      fontFamily: {
        cairo: ['Cairo', 'Noto Sans Arabic', 'system-ui', 'sans-serif'],
        inter: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      fontSize: {
        'display': ['64px', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'display-mobile': ['40px', { lineHeight: '1.15', letterSpacing: '-0.01em' }],
      },
      animation: {
        'fade-up': 'fadeUp 0.6s ease-out forwards',
        'count-up': 'countUp 1.2s ease-out forwards',
        'draw-in': 'drawIn 1s ease-out forwards',
        'float': 'float 6s ease-in-out infinite',
      },
      keyframes: {
        fadeUp: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0px)' },
          '50%': { transform: 'translateY(-10px)' },
        },
      },
    },
  },
}
```

---

## Component Specifications

### Navigation Bar
```
┌─────────────────────────────────────────────────────────────┐
│  [Logo]    الرئيسية   المميزات   الأسعار   تواصل     [CTA] │
│            ─────────                                  ابدأ   │
└─────────────────────────────────────────────────────────────┘
- Height: 72px
- Background: white/80% + backdrop-blur-xl
- Position: sticky top-0
- Border: 1px bottom slate-100
- Logo: left in RTL (right side visually)
- CTA button: primary small variant
- Active link: sky-600 with 2px bottom indicator
- Mobile: hamburger → full-screen overlay menu
```

### Hero Section
```
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│    كل شيء تحت إدارتك                          ┌─────────┐ │
│    ──────────────────                          │ Dashboard│ │
│    منصة إدارة رياضية متكاملة تضع              │ Mockup   │ │
│    كل لاعب وكل جنيه وكل حصة                  │ (tilted) │ │
│    تحت تحكمك الكامل                           │         │ │
│                                                └─────────┘ │
│    [ابدأ مجاناً]  [احجز عرض]                              │
│                                                             │
│    ٤٧+ أكاديمية  │  ١٢,٠٠٠+ لاعب  │  ٩٩.٩% وقت تشغيل   │
│                                                             │
└─────────────────────────────────────────────────────────────┘
- Min-height: 90vh
- Background: subtle gradient (white → sky-50)
- Headline: Display size, Cairo ExtraBold, navy-900
- Subheadline: Body Large, slate-500, max-w-xl
- Stats bar: bottom of hero, 3 metrics with dividers
- Dashboard mockup: perspective(1000px) rotateY(-5deg) rotateX(3deg)
- Animation: headline fades up 0.4s, subtext 0.6s, mockup 0.8s, stats 1.0s
```

### Feature Module Card
```
┌───────────────────────────┐
│  [icon]                   │
│                           │
│  إدارة مالية متكاملة     │
│  ─────────────────        │
│  تتبع كل جنيه من لحظة    │
│  الدفع حتى التقرير       │
│  الشهري                   │
│                           │
│  → اكتشف المزيد          │
└───────────────────────────┘
- Width: 1/3 on desktop, full on mobile
- Padding: 32px
- Border: 1px slate-200
- Radius: 16px
- Hover: border-sky-200, shadow-lg, translateY(-4px)
- Icon: 48px, sky-500, outlined stroke
- Title: H4, Cairo SemiBold, navy-900
- Description: Body, slate-500, 2-3 lines max
- Link: sky-600, arrow animates 4px right on hover
- Transition: all 300ms ease
```

### Pricing Card
```
┌───────────────────────────┐       ┌───────────────────────────┐
│  أساسي                    │       │  ★ احترافي (مُوصى به)     │
│                           │       │                           │
│  ٤٩٩ ج.م                 │       │  ٩٩٩ ج.م                 │
│  /شهرياً                  │       │  /شهرياً                  │
│                           │       │                           │
│  ✓ حتى ٢٠٠ لاعب         │       │  ✓ لاعبين غير محدودين     │
│  ✓ فرع واحد              │       │  ✓ حتى ٥ فروع            │
│  ✓ إدارة مالية            │       │  ✓ كل المميزات            │
│  ✓ تقارير أساسية          │       │  ✓ POS + مخزون           │
│  ✗ POS                    │       │  ✓ تقارير متقدمة          │
│                           │       │                           │
│  [ابدأ مجاناً]           │       │  [ابدأ الآن]             │
└───────────────────────────┘       └───────────────────────────┘
- Recommended: sky-500 border-2, "مُوصى به" badge top-right
- Regular: slate-200 border
- Price: Display size, navy-900, Cairo ExtraBold
- Features: check = emerald-500, cross = slate-300
- CTA: Primary button (recommended) / Secondary button (regular)
```

### Testimonial Card
```
┌───────────────────────────────────────────┐
│                                           │
│  "المنصة غيرت طريقة إدارتنا للأكاديمية  │
│  بالكامل. كل شيء واضح ومنظم."           │
│                                           │
│  ┌──┐  أحمد محمد                          │
│  │  │  مدير أكاديمية النجوم              │
│  └──┘  القاهرة                            │
│                                           │
└───────────────────────────────────────────┘
- Background: white
- Border: 1px slate-200
- Quote: Body Large, slate-700, italic
- Avatar: 48px circle, slate-200 border
- Name: Body, font-semibold, navy-900
- Role: Small, slate-500
```

### CTA Section (Bottom)
```
┌─────────────────────────────────────────────────────────────┐
│  ██████████████████████████████████████████████████████████  │
│  ██                                                    ██  │
│  ██   جاهز تأخذ التحكم الكامل؟                       ██  │
│  ██                                                    ██  │
│  ██   ابدأ بتجربة مجانية ١٤ يوم                      ██  │
│  ██   بدون بطاقة ائتمان                              ██  │
│  ██                                                    ██  │
│  ██   [ابدأ مجاناً]    [تحدث مع فريقنا]             ██  │
│  ██                                                    ██  │
│  ██████████████████████████████████████████████████████████  │
└─────────────────────────────────────────────────────────────┘
- Background: navy-800 → navy-900 gradient
- Text: white
- Headline: H2, Cairo Bold
- Subtext: Body Large, slate-300
- Primary CTA: white bg, navy-900 text (inverted)
- Secondary CTA: ghost, white text, white border
- Radius: 2xl (24px)
- Padding: 80px vertical
```

---

## Interaction Patterns

### Scroll Reveal
- Elements start: opacity-0, translateY(20px)
- Trigger: when 20% of element enters viewport
- Duration: 600ms, ease-out
- Stagger: 100ms between siblings

### Number Counter
- Triggers on viewport entry
- Counts from 0 to target over 1.2s
- Easing: ease-out (fast start, slow end)
- Suffix/prefix animate in separately

### Dashboard Mockup
- Subtle floating animation (6s infinite, ease-in-out, 10px amplitude)
- On scroll: perspective shift (rotateY responds to scroll position, max 5deg)
- Charts inside mockup: draw-in animation on viewport entry
- Numbers inside mockup: count-up animation with slight delay

### Page Transitions
- Route change: current page fades out (200ms), new page fades up (400ms)
- Shared elements (nav, footer): persist, no transition
- Loading state: progress bar top of viewport (sky-500, 2px height)

---

## Accessibility Requirements

### Focus States
- All interactive elements: 2px sky-500 outline, 2px offset
- Tab order follows visual order (RTL-aware)
- Skip-to-content link visible on focus

### Motion Preferences
- `prefers-reduced-motion: reduce` → disable all animations
- Parallax effects → static positioning
- Auto-playing counters → show final value immediately

### Screen Reader
- All images: descriptive alt text (Arabic)
- All icons: aria-label or aria-hidden
- Section landmarks: proper heading hierarchy (h1 → h2 → h3)
- Language attribute switches for English segments: `lang="en"`

### Color
- Never rely on color alone for meaning
- All states have non-color indicators (icons, text, borders)
- Tested with deuteranopia, protanopia, tritanopia simulators
