# IGNY8 Custom Styles

This directory contains IGNY8-specific custom styles that are **completely separate** from TailAdmin defaults.

## Files

- `igny8-colors.css` - IGNY8 brand color scheme with custom CSS variables and utility classes

## Usage

### Import in your component:
```typescript
// Already imported globally in main.tsx
// No need to import in individual components
```

### Use IGNY8 classes:
```tsx
// ✅ Use IGNY8 custom classes
<div className="igny8-bg-blue igny8-text-white igny8-card">
  Content
</div>

// ❌ Don't use TailAdmin defaults (unless you want TailAdmin branding)
<div className="bg-brand-500 text-white">
  Content
</div>
```

## Color Variables

All colors are available as CSS variables:
- `--igny8-blue` - Primary brand blue
- `--igny8-green` - Success green
- `--igny8-amber` - Warning amber
- `--igny8-red` - Danger red
- `--igny8-purple` - Purple accent
- `--igny8-surface` - Page background
- `--igny8-panel` - Card background
- `--igny8-text` - Primary text
- `--igny8-stroke` - Borders

## Utility Classes

All utility classes use `igny8-` prefix:
- Backgrounds: `.igny8-bg-blue`, `.igny8-bg-green`, etc.
- Text: `.igny8-text-blue`, `.igny8-text-primary`, etc.
- Borders: `.igny8-border-blue`, `.igny8-border-stroke`, etc.
- Gradients: `.igny8-gradient-blue`, `.igny8-gradient-success`, etc.
- Buttons: `.igny8-btn`, `.igny8-btn-primary`, etc.
- Badges: `.igny8-badge`, `.igny8-badge-primary`, etc.

## Benefits

✅ **No conflicts** - Separate prefix prevents TailAdmin update issues
✅ **Easy updates** - TailAdmin can be updated without affecting IGNY8 styles
✅ **Clear separation** - Easy to identify IGNY8 vs TailAdmin styles
✅ **Consistent branding** - All IGNY8 components use same color scheme

