# Design Tokens & Styles

This directory contains the centralized design token system for the IGNY8 application.

## Files

- `tokens.css` - **Single source of truth** for all design tokens (colors, gradients, shadows)
- `global.css` - Global base styles
- `cms/` - CMS-specific styles

## Design Tokens (`tokens.css`)

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

### Color Tokens
- `--color-primary` - Primary brand blue (#2C7AA1)
- `--color-primary-dark` - Primary dark variant (#236082)
- `--color-success` - Success green (#2CA18E)
- `--color-warning` - Warning amber (#D9A12C)
- `--color-danger` - Danger red (#A12C40)
- `--color-purple` - Purple accent (#2C40A1)

### Usage

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

// Use CSS variables for inline styles
<div style={{ color: 'var(--color-primary)' }}>Content</div>

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

// Use colors.config.ts for programmatic access
import { getModuleCSSColor } from '@/config/colors.config';
const color = getModuleCSSColor('keywords'); // Returns computed CSS value
```

**❌ DON'T:**
```tsx
// Don't hardcode hex colors
<div className="bg-[#3B82F6]">Content</div>

// Don't use Tailwind default colors (blue-500, emerald-500, etc.)
<div className="text-emerald-500">Content</div>

// Don't use inline hex colors
<div style={{ color: '#F59E0B' }}>Content</div>
```

## Active Utility Classes (in index.css)

The following utility classes are actively used:
- `.igny8-table-*` - Table styling utilities
- `.igny8-header-metric-*` - Header metrics bar styling
- `.igny8-select-styled` - Dropdown arrow styling

These are defined in `/src/index.css`, not here.

## Migration

All code should use:
1. Design tokens from `tokens.css` via CSS variables
2. Tailwind utilities mapped to design tokens (`bg-brand-500`, `text-success-500`)
3. `colors.config.ts` for programmatic color access
3. React components (`Button`, `Badge`, `Card`)

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

