# Arquitetura de Estilização & UI/UX — Palavra
Este documento detalha o sistema de design, a arquitetura CSS, a tipografia e os padrões visuais aplicados aos componentes da camada **Uiux**.
## 1. Princípios Visuais & Design System
A estilização do sistema é estritamente utilitária e semântica, construída sobre uma stack moderna e unificada.
### Stack de Design
* **Tailwind CSS v3:** Framework CSS utility-first usado para toda a estilização.
* **shadcn/ui:** Componentes base acessíveis (Radix UI) estilizados via Tailwind.
* **Lucide Icons:** Biblioteca padrão para ícones em SVG.
* **Recharts:** Biblioteca para renderização de gráficos responsivos.
* **Framer Motion:** Utilizado para animações declarativas.
### Regra de Ouro da Camada UI/UX
Os componentes visuais puros (`.uiux.tsx`) são 100% desacoplados do banco de dados e de regras de negócio. Eles apenas recebem dados prontos via `props`, emitem eventos via `callbacks` e utilizam **exclusivamente tokens semânticos**, sendo expressamente proibido o uso de cores hardcoded (ex: `bg-white`, `text-black`, `bg-amber-500`).
---
## 2. Tipografia
O sistema utiliza duas famílias tipográficas principais para garantir legibilidade e distinção entre interface e dados técnicos:
* **Inter — Display (Font-weight 700):** Utilizada em títulos e headings (aplicada via classe `font-display`).
* **Inter — Body (Font-weights 400, 500, 600):** Utilizada para o texto geral da aplicação (aplicada via classe `font-sans`).
* **JetBrains Mono — Code:** Utilizada especificamente para blocos de código e dados técnicos formatados (aplicada via classe `font-mono-code`).
---
## 3. Tokens CSS e Variáveis de Cor
O coração da estilização é o uso de variáveis CSS customizadas baseadas em HSL. Elas permitem a transição perfeita entre os temas.
### Tokens de Superfície
* `--background`: Fundo geral da aplicação.
* `--foreground`: Cor do texto principal.
* `--card`: Fundo dos cards de conteúdo.
* `--muted`: Fundo de áreas secundárias.
* `--border`: Bordas e divisores estruturais.
* `--input`: Bordas de campos de formulário.
### Tokens de Ação e Feedback
* `--primary`: Ação principal e elementos de destaque.
* `--secondary`: Ações secundárias.
* `--accent`: Destaques e acentos visuais menores.
* `--destructive`: Ações destrutivas ou mensagens de erro.
* `--success`: Feedbacks de sucesso e confirmação.
* `--warning`: Alertas e pontos de atenção.
* `--info`: Dados e balões informativos.
* `--ring`: Cor do anel de foco de acessibilidade.
### Exemplo de Aplicação (Certo vs. Errado)
```tsx
// ✅ CORRETO — Uso exclusivo de tokens semânticos
Título
Descrição
SucessoErro
// ❌ ERRADO — Proibido o uso de cores literais/diretas
Título
```
---
## 4. Temas Duais (Light & Dark)
A interface suporta dois modos globais gerenciados através da injeção de classes no elemento `` (gerenciado por um Zustand store).
* **☀️ Tema Light:** Estética off-white com tons dourados quentes.
* **🌙 Tema Dark:** Estética em azul profundo, remetendo ao "azul espacial".
A transição ocorre injetando a classe `dark` no `:root`, que remapeia automaticamente todas as variáveis `hsl()` citadas acima.
---
## 5. Padrões de Layout e Componentes
A estrutura de espaçamento e montagem de tela obedece a um esqueleto rígido de alinhamento e respiro.
### Padrão Base de Página (Layout de Contexto)
```tsx
{/* Header/Nav fixo com altura h-11 */}
{/* Offset correspondente ao header */}
{/* Padding interno padrão da tela */}
{/* Espaçamento padrão entre título e seções */}
Título
Subtítulo
```
### Padrão Visual: Card de KPI
Aplicado em dashboards e resumos de métricas:
```tsx
Entregas Realizadas
1.247
+12.5%vs. semana anterior
```
### Padrão Visual: Tabelas de Listagem
Utilizado em telas de gestão (Clientes, Vendedores, etc.):
```tsx