# Plano de Implementação — Feature 008: Light Theme

## Objetivo
Implementar tema claro global, alternância dark/light, tokens de cor, guidelines e integração com Tailwind. Atualizar ou criar design.md com guidelines e tokens para futuras implementações.

## Escopo
- Suporte a tema claro e escuro (dark/light) global
- Alternância de tema (toggle) no Navbar/Admin
- Tokens de cor theme-aware (bg, text, border, accent, muted, etc)
- Guidelines e exemplos em design.md
- Integração com Tailwind CSS (estratégia 'class')
- Refatoração dos principais componentes/páginas para tokens theme-aware
- Testes de acessibilidade (contraste, foco, etc)
- Documentação para devs

---

## 1. Atualização do Tailwind para Suporte a Temas
- [ ] Configurar `tailwind.config.ts` para estratégia `darkMode: 'class'`
- [ ] Definir tokens de cor para ambos temas (light/dark) via `extend.colors` e CSS custom properties
- [ ] Garantir que tokens sejam facilmente consumidos via classes utilitárias e/ou `@apply`

## 2. Tokens de Cor e Guidelines
- [ ] Mapear tokens: bg, text, border, accent, muted, hover, etc para ambos temas
- [ ] Documentar tokens e exemplos de uso em `DESIGN.md`
- [ ] Adicionar recomendações de contraste e fallback seguro

## 3. ThemeProvider/Contexto
- [ ] Criar contexto React para alternância de tema (`ThemeProvider`)
- [ ] Implementar persistência da escolha (localStorage)
- [ ] Sincronizar com `prefers-color-scheme` do SO
- [ ] Garantir SSR/hidratação sem "flash" de tema incorreto

## 4. Toggle de Tema
- [ ] Adicionar toggle (ícone sol/lua) no Navbar e painel admin
- [ ] Garantir acessibilidade do toggle (foco, aria-label, contraste)

## 5. Refatoração de Componentes
- [ ] Refatorar principais componentes/páginas para usar tokens e classes theme-aware
- [ ] Garantir que todos respeitem o tema ativo

## 6. Testes de Acessibilidade
- [ ] Testar contraste mínimo AA+ em todos os estados
- [ ] Garantir foco visível e navegação por teclado
- [ ] Validar ausência de "flash" de tema incorreto

## 7. Documentação
- [ ] Atualizar/criar seção de guidelines de tema em `DESIGN.md`
- [ ] Exemplos de uso de tokens, recomendações de contraste, como estender o tema
- [ ] Passos para devs integrarem novos componentes ao sistema de temas

---

## Critérios de Aceite
- Alternância de tema funcional e persistente
- Contraste AA+ garantido
- Documentação clara para devs
- Nenhum componente com cor ilegível ao alternar tema
- Preferência do SO respeitada na primeira visita
- Sem "flash" de tema incorreto em SSR/hidratação