# NGO ERP — design colors (source of truth)

Canonical tokens live in **`frontend/src/app/globals.css`**: CSS variables on `html` / `html.dark`, mirrored into Tailwind via `@theme inline`.

## Principles

- **Brand**: teal primary (`--primary` / `primary-hover` / `on-primary`) for actions, focus ring, and key accents.
- **Surfaces**: `background`, `card`, `border`; subtle fills use `bg-muted/…` (existing pattern).
- **Copy**: `foreground`, `muted` (used heavily as subdued text in this codebase), `muted-foreground` (captions; aligned with the same scale).
- **Risk**: `danger` / `danger-soft` for destructive actions and error emphasis.
- **Workflow & status**: `success`, `warning`, `info` (+ `*-soft` for tinted panels and chips).
- **Data viz**: `chart-1` … `chart-5` for dashboards and charts (keep series consistent).

## Tailwind usage

Prefer utilities backed by tokens, for example:

- `bg-primary`, `text-on-primary`, `hover:bg-primary-hover`
- `text-muted-foreground`, `text-muted`, `border-border`, `bg-card`
- `bg-success-soft`, `text-success`, `border-warning`, `bg-info-soft`, `text-info`
- `text-chart-1` … `text-chart-5` (or use in arbitrary values / SVG `stroke`)

To change the palette for the whole product, edit **`globals.css`** only; avoid hard-coded hex in new UI unless it is a one-off illustration.
