# Design System

## Principles

Modern enterprise SaaS: minimal, premium, large whitespace, soft elevation, rounded surfaces, RTL-native Persian typography (Yekan Bakh FaNum).

## Tokens (`styles/globals.css`)

| Token | Role |
|-------|------|
| `--canvas` | Page background |
| `--surface` | Cards / panels |
| `--surface-muted` | Subtle fills |
| `--border` | Hairlines |
| `--muted` | Secondary text |
| `--shadow-sm/md/lg` | Elevation |
| `--radius-sm/md/lg` | Corner radius |
| `--color-primary` | Brand (white-label) |
| `--color-secondary` | Primary text |

`.dark` overrides the same tokens. Toggle via `ColorModeProvider` (`class` strategy).

## Typography

- Font: Yekan Bakh FaNum
- Page title: `text-2xl font-bold`
- Body: `text-sm`
- Muted helpers: `text-[var(--muted)]`

## Spacing

Prefer Tailwind scale with consistent page padding (`px-4 py-6`, `max-w-7xl`). Section gaps `gap-4` / `mb-6`.

## States

Every data view must support: loading (`LoadingState`), empty (`EmptyState`), error (`ErrorState`), success toasts (Sonner).

## Dates (Accounting)

All date pickers are **Jalali/Shamsi** via `DatePicker`. Native Gregorian browser pickers are forbidden. API still receives Gregorian ISO.