# Design Tokens & Styles

This directory contains the centralized design token system and legacy compatibility styles.

## Files

- `tokens.css` - **Single source of truth** for all design tokens (colors, gradients, shadows)
- `igny8-colors.css` - Legacy compatibility file (deprecated - use tokens.css instead)
- `global.css` - Global base styles

## Design Tokens (`tokens.css`)

All design tokens use plain naming (no "igny8" prefix):

### Color Tokens
- `--color-primary` - Primary brand blue (#0693e3)
- `--color-primary-dark` - Primary dark variant (#0472b8)
- `--color-success` - Success green (#0bbf87)
- `--color-warning` - Warning amber (#ff7a00)
- `--color-danger` - Danger red (#ef4444)
- `--color-purple` - Purple accent (#5d4ae3)

### Usage

**✅ DO:**
```tsx
// Use Tailwind utilities
<div className="bg-brand-500 text-white">Content</div>

// Use CSS variables for custom values
<div className="bg-[var(--color-primary)]">Content</div>

// Use React components
<Button tone="brand" variant="gradient">Click me</Button>
```

**❌ DON'T:**
```tsx
// Don't use deprecated utility classes
<div className="igny8-bg-blue">Content</div>

// Don't hardcode colors
<div className="bg-[#0693e3]">Content</div>
```

## Legacy File (`igny8-colors.css`)

⚠️ **DEPRECATED** - This file is maintained for backward compatibility only.

- Legacy variable aliases (`--igny8-*` → `--color-*`)
- Active utility classes (`.igny8-table-*`, `.igny8-header-metric-*`)
- Deprecated utility classes (marked - do not use in new code)

See `MIGRATION_GUIDE.md` for migration instructions.

## Migration

All new code should use:
1. Design tokens from `tokens.css`
2. Tailwind utilities (`bg-brand-500`, `text-brand-500`)
3. React components (`Button`, `Badge`, `Card`)

See `../MIGRATION_GUIDE.md` for complete migration guide.