# Guia de Cores — Light e Dark Mode
## Sistema de cor
- **Sempre prefira os tokens semânticos** definidos em `src/styles/tailwind.css` (`@theme`) — eles já resolvem light/dark sozinhos, sem precisar de `dark:` manual: `bg-background`, `text-foreground`, `text-muted-foreground`, `bg-card`, `bg-popover`, `border-border`, `bg-primary`/`text-primary-foreground`, `bg-secondary`, `bg-destructive`, `border-input`, `ring-ring`.
- **`gray-*` com `dark:` manual só quando não existir token equivalente** (ex.: variações pontuais de opacidade, estados de hover muito específicos). Nesse caso, modo escuro é via classe `.dark` no elemento ``.
- A paleta `abyss-950`/`abyss-900`/`abyss-800`/`abyss-700` (também em `@theme`) é reservada para painéis elevados no dark mode (sidebar, login) — não usar hex solto para esse tom de azul-marinho quase-preto.
- Breakpoints nomeados no `@theme`: `--breakpoint-compact` (520px), `--breakpoint-whatsapp` (760px), `--breakpoint-layout` (980px) — geram variantes `compact:`/`max-compact:`, `whatsapp:`/`max-whatsapp:`, `layout:`/`max-layout:`. Não usar `max-[980px]` etc. soltos no meio do código.
## Mapeamento de cores
| Elemento | Classe recomendada | Equivalente antigo (evitar) |
|---|---|---|
| Texto primário | `text-foreground` | `text-gray-900 dark:text-gray-100` |
| Texto secundário/muted | `text-muted-foreground` | `text-gray-500 dark:text-gray-400` |
| Fundo de card/painel | `bg-card` ou `bg-background/70` | — |
| Bordas padrão | `border-border` (já é o `border` default de qualquer elemento) | `border-gray-200 dark:border-gray-700` |
| Hover de link | `hover:text-foreground` | `hover:text-gray-900 dark:hover:text-white` |
Casos que ainda não têm token semântico direto (ex.: bordas tracejadas de empty state, chips de tipo de arquivo) continuam usando `gray-*` com par `dark:` manual — não force um token que não existe só por consistência.
## Backgrounds
| Elemento | Light | Dark |
|---|---|---|
| Fundo da página | `bg-background` (auto) | (auto) |
| Barra do topo | `bg-primary` | `dark:bg-black` |
| Cabeçalho de card | `bg-gray-100/50` | `dark:bg-secondary/50` |
| Painel elevado (sidebar/login) | `bg-white/70` | `dark:bg-abyss-900` |
## Padrão de uso
```html
Título
Descrição
Link
```
## Erros
- `text-red-600 dark:text-red-400` — texto de erro (não há token semântico `destructive-foreground` de texto solto no tema atual, usar a paleta `red-*` diretamente).
## Design system
A UI é construída sobre o design system próprio (`src/components/base/`) + Tailwind CSS v4. **Não há PrimeVue no projeto** (a dependência `tailwindcss-primeui` foi removida — era resíduo não utilizado).
- `BaseButton`: variantes `primary`/`secondary`/`ghost`/`danger`, já tratam light/dark.
- `BaseBadge`: variantes `default`/`success`/`danger`/`info`/`warning`/`violet`.
- `BaseDropdown`: select customizado acessível.
- `StatCard`: cartão de métrica/KPI.
- `BaseIcon`: wrapper sobre ícones do Lucide (`lucide-vue-next`) — preferir a SVG inline copiado.
- `BaseModal`: casca de modal com focus trap e fechamento por Esc/backdrop.
- `EmptyState`: bloco padronizado de "nada encontrado".
- `Spinner`: indicador de carregamento padronizado.
Detalhes de props e exemplos em [components.md](components.md). Para cores que não vêm dos componentes base, preferir os tokens semânticos da tabela acima; só cair para `gray-*` + `dark:` quando não houver token equivalente.