# 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 `Button` do PrimeVue com estilo default — ele já suporta dark mode via tema do projeto, sem necessidade de overrides.
## 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 o componente `Message` com `severity="error"` do PrimeVue para mensagens de erro nos formulários
## Componentes PrimeVue
- `Button`: usar componente sem overrides de cor — segue o tema do projeto.
- `InputText`, `Password`, `Message`: seguem o tema via variáveis CSS do PrimeVue, já suportam dark mode.
- Não aplicar `bg-gray-900!` ou outras overrides manuais diretamente nos componentes PrimeVue.