# Modal Styling - Quick Reference

## 🎨 System Colors

```css
Primary:   #502888  (Purple)
Secondary: #272825  (Dark Gray)
Accent:    #B4E95C  (Lime Green)
```

## 📐 Backdrop Template

```jsx
{/* Blurred backdrop - Use this for all modals */}
<div className="fixed inset-0 bg-white/30 backdrop-blur-md transition-opacity" />
```

## 🎯 Common Patterns

### Modal Header (Primary)
```jsx
<div className="bg-gradient-to-r from-primary to-primary/90 px-6 py-4 text-white">
  <h2 className="text-xl font-semibold">Title</h2>
  <p className="text-white/80 text-sm">Subtitle</p>
</div>
```

### Primary Button
```jsx
<button className="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90">
  Confirm
</button>
```

### Secondary Button
```jsx
<button className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200">
  Cancel
</button>
```

### Success Button
```jsx
<button className="bg-accent text-secondary px-4 py-2 rounded-lg hover:bg-accent/90">
  Continue
</button>
```

### Info Box (Primary)
```jsx
<div className="bg-primary/5 border border-primary/10 rounded-lg p-4">
  {/* Content */}
</div>
```

### Success Box (Accent)
```jsx
<div className="bg-accent/10 border border-accent/30 rounded-lg p-4">
  {/* Content */}
</div>
```

### Selected State
```jsx
<div className={`border rounded-lg p-4 ${
  isSelected 
    ? 'border-primary bg-primary/5' 
    : 'border-gray-200'
}`}>
  {/* Content */}
</div>
```

### Badge (Popular/Featured)
```jsx
<span className="bg-accent/20 text-secondary text-xs px-2 py-1 rounded-full font-medium">
  Popular
</span>
```

### Icon Container (Primary)
```jsx
<div className="bg-primary/10 rounded-full w-10 h-10 flex items-center justify-center">
  <Icon className="h-5 w-5 text-primary" />
</div>
```

### Icon Container (Accent)
```jsx
<div className="bg-accent/20 rounded-full w-10 h-10 flex items-center justify-center">
  <Icon className="h-5 w-5 text-accent" />
</div>
```

## 🔄 State Colors

### Processing
```jsx
<div className="bg-primary/10 rounded-full">
  <Loader2 className="text-primary animate-spin" />
</div>
```

### Waiting
```jsx
<div className="bg-accent/20 rounded-full">
  <Clock className="text-accent animate-pulse" />
</div>
```

### Success
```jsx
<div className="bg-accent/20 rounded-full">
  <CheckCircle className="text-accent" />
</div>
```

### Error
```jsx
<div className="bg-red-100 rounded-full">
  <AlertCircle className="text-red-600" />
</div>
```

## 📱 Full Modal Template

```jsx
<div className="fixed inset-0 z-50 overflow-y-auto">
  <div className="flex min-h-screen items-center justify-center p-4">
    {/* Backdrop */}
    <div 
      className="fixed inset-0 bg-white/30 backdrop-blur-md transition-opacity"
      onClick={onClose}
    />

    {/* Modal */}
    <div className="relative bg-white rounded-2xl shadow-xl max-w-2xl w-full">
      {/* Header */}
      <div className="bg-gradient-to-r from-primary to-primary/90 px-6 py-4 text-white">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-xl font-semibold">Modal Title</h2>
            <p className="text-white/80 text-sm">Subtitle</p>
          </div>
          <button onClick={onClose} className="text-white hover:text-white/80">
            <X className="h-5 w-5" />
          </button>
        </div>
      </div>

      {/* Content */}
      <div className="p-6">
        {/* Info box */}
        <div className="bg-primary/5 border border-primary/10 rounded-lg p-4 mb-6">
          <h3 className="font-medium text-gray-900 mb-2">Information</h3>
          <p className="text-gray-600 text-sm">Content here</p>
        </div>

        {/* Success box */}
        <div className="bg-accent/10 border border-accent/30 rounded-lg p-4 mb-6">
          <div className="flex items-start">
            <CheckCircle className="h-5 w-5 text-accent mt-0.5 mr-3" />
            <div>
              <h4 className="font-medium text-secondary text-sm">Success</h4>
              <p className="text-gray-700 text-sm mt-1">Success message</p>
            </div>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div className="p-6 border-t border-gray-200">
        <div className="flex space-x-4">
          <button className="flex-1 bg-gray-100 text-gray-700 py-3 px-4 rounded-lg hover:bg-gray-200">
            Cancel
          </button>
          <button className="flex-1 bg-primary text-white py-3 px-4 rounded-lg hover:bg-primary/90">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
```

## 🎨 Color Opacity Guide

### Primary
- `bg-primary` - Solid
- `bg-primary/90` - 90% opacity
- `bg-primary/10` - 10% opacity (light background)
- `bg-primary/5` - 5% opacity (very light background)
- `border-primary/10` - 10% opacity border
- `text-primary` - Solid text

### Accent
- `bg-accent` - Solid
- `bg-accent/90` - 90% opacity
- `bg-accent/20` - 20% opacity (light background)
- `bg-accent/10` - 10% opacity (very light background)
- `border-accent/30` - 30% opacity border
- `text-accent` - Solid text

### White (for backdrop)
- `bg-white/30` - 30% opacity (backdrop)
- `bg-white/20` - 20% opacity (lighter backdrop)
- `text-white/80` - 80% opacity (subtitle text)

## ✅ Checklist

When creating a new modal:
- [ ] Use blurred backdrop (`bg-white/30 backdrop-blur-md`)
- [ ] Use primary color for header
- [ ] Use primary color for main action button
- [ ] Use accent color for success states
- [ ] Use system colors consistently
- [ ] Add smooth transitions
- [ ] Test backdrop click to close
- [ ] Test escape key to close

---

**Quick Tip:** Copy the full modal template above and customize as needed!