# Style Guide

## CRITICAL: CSS VARIABLES (NEVER HARDCODE COLORS)

**NEVER use hardcoded Tailwind colors.** ALWAYS use CSS variables for theme compliance.

### Status Colors
| Status | Background | Text | Border | Dot (solid) |
|--------|------------|------|--------|-------------|
| **Info** (Pending, Business) | `--info-bg` | `--info-text` | `--info-border` | `--info-dot` |
| **Success** (Active) | `--success-bg` | `--success-text` | `--success-border` | `--success-dot` |
| **Warning** (Suspended, Owner) | `--warning-bg` | `--warning-text` | `--warning-border` | `--warning-dot` |
| **Error** (Danger, Archive) | `--error-bg` | `--error-text` | `--error-border` | `--error-dot` |
| **Accent** (Personal, Primary) | `--accent-bg` | `--accent-text` | `--accent-border` | `--color-accent-500` |

### Badge Pattern
```tsx
// CORRECT - Uses CSS variables
<span className="px-2 py-0.5 text-xs rounded-[var(--radius-badge)] bg-[var(--info-bg)] text-[var(--info-text)]">
  Info Badge
</span>

// WRONG - Hardcoded Tailwind colors
<span className="bg-blue-500/10 text-blue-500">Info Badge</span>
```

### Status Config Pattern
```tsx
// CORRECT
const STATUS_CONFIG = {
  Pending: { bgColor: 'bg-[var(--info-bg)]', color: 'text-[var(--info-text)]', borderColor: 'border-[var(--info-border)]' },
  Active: { bgColor: 'bg-[var(--success-bg)]', color: 'text-[var(--success-text)]', borderColor: 'border-[var(--success-border)]' },
  Suspended: { bgColor: 'bg-[var(--warning-bg)]', color: 'text-[var(--warning-text)]', borderColor: 'border-[var(--warning-border)]' },
  Archived: { bgColor: 'bg-[var(--bg-tertiary)]', color: 'text-[var(--text-tertiary)]', borderColor: 'border-[var(--border-color)]' }
};

// WRONG - dark: variants are obsolete
const STATUS_CONFIG = {
  Active: { bgColor: 'bg-emerald-50 dark:bg-emerald-900/20', ... }
};
```

### Chart Colors

For data visualizations (Recharts), use dedicated chart CSS variables:

| Variable | Usage | Example |
|----------|-------|---------|
| `--chart-1` | Primary data series | Main bar/line/area |
| `--chart-2` | Secondary data series | Comparison line |
| `--chart-3` | Tertiary data series | Third category |
| `--chart-4` | Quaternary data series | Fourth category |
| `--chart-5` | Quinary data series | Fifth category |

These variables adapt automatically to light/dark theme.

```tsx
// CORRECT - CSS variable
<Bar dataKey="value" fill="var(--chart-1)" />
<Line stroke="var(--chart-2)" />
<Cell fill={CHART_COLORS[index % CHART_COLORS.length]} />

// WRONG - hardcoded colors
<Bar dataKey="value" fill="#8884d8" />
<Line stroke="blue" />
```

**See [patterns/dashboard-chart.md](patterns/dashboard-chart.md) for complete chart patterns.**

## BUTTON VARIANTS

### Action Buttons (Status changes)
```tsx
// Success action (Activate)
<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--success-dot)] text-white hover:opacity-90">
  Activate
</button>

// Warning action (Suspend)
<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--warning-dot)] text-white hover:opacity-90">
  Suspend
</button>

// Danger action (Archive/Delete)
<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--error-dot)] text-white hover:opacity-90">
  Archive
</button>

// Primary action
<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--color-accent-600)] text-white hover:bg-[var(--color-accent-700)]">
  Save
</button>

// Ghost action (NO BORDER!)
<button className="px-4 py-2 rounded-[var(--radius-button)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]">
  Refresh
</button>

// Secondary action
<button className="px-4 py-2 rounded-[var(--radius-button)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
  Cancel
</button>
```

### Button Rules
| Variant | Background | Text | Border | Hover |
|---------|------------|------|--------|-------|
| **Primary** | `--color-accent-600` | `white` | none | `--color-accent-700` |
| **Success** | `--success-dot` | `white` | none | `opacity-90` |
| **Warning** | `--warning-dot` | `white` | none | `opacity-90` |
| **Danger** | `--error-dot` | `white` | none | `opacity-90` |
| **Secondary** | `--bg-secondary` | `--text-secondary` | none | `--bg-hover` |
| **Ghost** | transparent | `--text-secondary` | **NONE** | `--bg-hover` |
