# Guia de Cores — Light e Dark Mode
## Sistema de cor
- **Background/foreground**: usar as variáveis CSS `bg-background` e `text-foreground` — tratam light/dark automaticamente pelo ThemeLoader.
- **Demais cores**: Tailwind com `dark:` prefix manual (modo escuro é via classe `.dark` no elemento ``).
## Mapeamento de cores
| Elemento | Light | Dark |
|---|---|---|
| Texto primário | `text-gray-900` | `dark:text-gray-100` |
| Texto secundário | `text-gray-500` | `dark:text-gray-400` |
| Texto terciário/muted | `text-gray-400` | `dark:text-gray-500` |
| Separadores finos | `text-gray-300` | `dark:text-gray-600` |
| Bordas padrão | `border-gray-200` | `dark:border-gray-700` |
| Bordas de badge/chip | `border-gray-300` | `dark:border-gray-600` |
| Hover de link | `hover:text-gray-900` | `dark:hover:text-white` |
| Hover de badge | `hover:border-gray-500` | `dark:hover:border-gray-400` |
| Hover de texto muted | `hover:text-gray-600` | `dark:hover:text-gray-300` |
## Backgrounds
| Elemento | Light | Dark |
|---|---|---|
| Fundo da página | `bg-background` (auto) | (auto) |
| Barra do topo | `bg-primary` | `dark:bg-black` |
| Footer | `bg-gray-100/50` | `dark:bg-secondary/50` |
| Texto no footer | `text-black/50` | `dark:text-white/50` |
## Botão primário (submit)
Usar o componente `BaseButton` (variante `primary`) do design system — ele já trata light/dark via variáveis de cor do projeto, sem necessidade de overrides. Ver [components.md](components.md).
## Padrão de uso
Todo `gray-*` que for texto, borda ou hover deve ganhar a contraparte `dark:` correspondente segundo a tabela acima. Exemplo prático:
```html
Título
Descrição
Link
```
## Erros
- `text-gray-900`/`dark:text-gray-100` — texto principal
- `text-gray-500`/`dark:text-gray-400` — texto secundário
- `text-gray-400`/`dark:text-gray-500` — texto terciário
- Use a prop `error` do `BaseInput` para exibir mensagens de erro nos formulários.
## Design system
A UI é construída sobre o design system próprio (`src/components/base/`) + Tailwind CSS. **Não há PrimeVue no projeto.**
- `BaseButton`: variantes `primary`/`secondary`/`ghost`/`danger`, já tratam light/dark.
- `BaseInput`: campo com `label`, `hint` e `error` integrados.
- `BaseBadge`: variantes `default`/`success`/`danger`/`info`/`warning`/`violet`.
Detalhes de props e exemplos em [components.md](components.md). Para cores que não vêm dos componentes base, aplicar Tailwind com o prefixo `dark:` segundo as tabelas acima.