# Especificação da Feature: Light Theme

## Visão Geral

Permitir alternância entre tema escuro (Linear dark) e tema claro em todo o sistema (frontend React e páginas administrativas), promovendo acessibilidade, preferência visual e consistência de design. O tema claro deve ser moderno, acessível (contraste AA+), fácil de alternar e documentado para uso futuro.

## Atores
- Usuário final (clientes, visitantes)
- Administrador do sistema

## Cenários de Usuário & Testes
- Usuário acessa o sistema e visualiza o tema de acordo com a preferência do sistema operacional ("prefers-color-scheme")
- Usuário alterna manualmente entre tema claro e escuro via toggle global (ícone sol/lua no Navbar e painel admin)
- Preferência de tema é persistida (localStorage) e respeitada em visitas futuras
- Todas as páginas, componentes e formulários refletem corretamente o tema selecionado
- Em SSR/hidratação, o tema correto é aplicado sem "flash" de tema incorreto
- Contraste mínimo AA+ garantido em todos os estados (normal, hover, disabled)
- Novos componentes podem adotar tokens de cor documentados

## Requisitos Funcionais
1. Implementar paleta de cores clara (backgrounds, textos, bordas, acentos, hover, muted, etc) consistente e acessível
2. Adicionar alternância global de tema (toggle) visível no Navbar e painel admin, com ícone sol/lua
3. Persistir escolha do usuário em localStorage e sincronizar com prefers-color-scheme do SO
4. Configurar Tailwind CSS para suportar dark/light usando a estratégia 'class'
5. Garantir que todos os componentes, páginas e formulários respeitem o tema ativo
6. Documentar tokens de cor (nomes, exemplos, guidelines de uso e contraste)
7. Garantir fallback seguro para SSR/hidratação e acessibilidade (contraste mínimo, foco visível)

## Critérios de Sucesso
- Usuário pode alternar entre temas e a escolha é lembrada em visitas futuras
- Tema claro apresenta contraste AA+ em todos os elementos
- Nenhum componente exibe cores erradas ou ilegíveis ao alternar tema
- Preferência do SO é respeitada na primeira visita
- Documentação de tokens e guidelines disponível para desenvolvedores
- Não há "flash" de tema incorreto em SSR/hidratação

## Entidades/Objetos-Chave
- Tokens de cor: bg, text, border, accent, muted, hover, etc
- Preferência de tema: 'light', 'dark', 'system'
- Componente de alternância (toggle)

## Restrições & Assunções
- Tema escuro (Linear dark) já está implementado
- Tema claro deve ser consistente com o dark, mas otimizado para acessibilidade
- Persistência via localStorage; fallback para prefers-color-scheme
- Tailwind já instalado; estratégia 'class' será usada
- SSR pode ser relevante para futuras versões/admin

## Edge Cases
- SSR/hidratação: evitar "flash" de tema incorreto
- Usuário sem suporte a localStorage: fallback para sistema
- Contraste mínimo em todos os estados (hover, disabled, etc)
- Acessibilidade: foco visível, sem dependência exclusiva de cor

## Documentação
- Listar tokens de cor, exemplos de uso e guidelines para novos componentes
- Instruções para desenvolvedores sobre como aplicar tokens e garantir contraste

---

*Esta especificação não inclui detalhes de implementação, frameworks ou código. Foco em valor ao usuário, acessibilidade e consistência visual.*