# Design System Styles

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

## Files

- `design-system.css` - **SINGLE SOURCE OF TRUTH** for all styles
  - Design tokens (colors, gradients, shadows, radii)
  - Tailwind @theme configuration
  - Dark mode overrides
  - Component utilities
  - All custom CSS classes

## Quick Reference

### Entry Point
```tsx
// In main.tsx - THE ONLY CSS import needed
import "./styles/design-system.css";
```

### Color Tokens
```css
--color-primary      /* Primary brand blue (#0077B6) */
--color-primary-dark /* Darker variant (#005A8C) */
--color-success      /* Success green (#00B894) */
--color-warning      /* Warning amber (#F59E0B) */
--color-danger       /* Error red (#DC2626) */
--color-purple       /* Premium purple (#7C3AED) */
```

### 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');
```

**❌ 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>
```

## Utility Classes

All utility classes are in `design-system.css`:

| Class | Purpose |
|-------|---------|
| `.menu-item` | Sidebar menu items |
| `.igny8-table-*` | Table styling utilities |
| `.igny8-header-metric-*` | Header metrics bar |
| `.igny8-select-styled` | Dropdown arrow styling |
| `.igny8-filter-bar` | Filter bar layout |

## Migration

All code should use:
1. Design tokens from `design-system.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
4. Standard React components (`Button`, `Badge`, `Card`)

See `../DESIGN_SYSTEM.md` for complete guidelines.

