# Design System — Generic

Sistema de tokens e componentes para o nicho **generic** — fallback maximamente reskinnable. Estrutura semântica fixa, identidade vem do `themeJson` aplicado pelo agente IA com base nos sinais do site auditado.

> Regra de ouro: **token-driven absoluto**. Trocar 7 variáveis CSS + 2 fontes deve transformar o demo em algo reconhecidamente diferente.

---

## 1. Tokens

### 1.1 Cores semânticas

| Token | Função | Corporate B2B | Profissional solo | Comércio local |
|---|---|---|---|---|
| `--color-primary` | Marca, CTA, header | `#1A3A52` | `#1A1814` | `#2F5D3A` |
| `--color-secondary` | Apoio, hover | `#3A5C78` | `#6B5C4A` | `#8C7A4D` |
| `--color-accent` | CTA destaque, badge | `#C99536` | `#9A2A2A` | `#E8B23C` |
| `--color-bg` | Fundo página | `#F7F5F0` | `#FFFCF5` | `#EFE6D2` |
| `--color-surface` | Cards, form | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` |
| `--color-text` | Texto | `#0E1116` | `#1A1814` | `#1F1A13` |
| `--color-muted` | Metadata | `#4F5B6B` | `#6B5C4A` | `#6B5F45` |

Aux: `--color-border`, `--color-success`, `--color-warning`, `--color-danger`. Derivar de primary/secondary com ajuste de luminância.

### 1.2 Tipografia

| Demo | `--font-heading` | `--font-body` |
|---|---|---|
| Corporate B2B | GT Sectra / Tiempos Headline (serif autoridade) | GT America / Söhne |
| Profissional solo | Tiempos Headline (serif editorial) | Tiempos Text |
| Comércio local | Sligoil / Migra (display vintage) | Karla / Söhne |

Evitar Inter/Roboto/Arial/Helvetica como display. Usar como body é aceitável quando o display compensar.

Escala (rem, base 16px) idêntica aos demais nichos.

Pesos: 400 (body), 500 (UI), 600 (subtítulo), 700 (título).
Line-height: 1.1 títulos, 1.5 corpo, 1.7 textos longos.

### 1.3 Espaço (4px)

`0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32`.

- Padding lateral mobile: `5` (20px). Desktop: `8`/`10` ou container `max-w-6xl`.
- Entre seções: `16` mobile, `24` desktop.

### 1.4 Raio

| Token | Valor | Uso |
|---|---|---|
| `--radius-none` | 0 | corporate sério |
| `--radius-sm` | 4px | inputs |
| `--radius-md` | 8px | cards padrão |
| `--radius-lg` | 16px | cards destaque |
| `--radius-xl` | 24px | hero card |
| `--radius-full` | 9999px | pílulas |

Cada demo escolhe um raio dominante e mantém consistência.

### 1.5 Sombra

| Token | Valor | Uso |
|---|---|---|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.04)` | input focus |
| `--shadow-md` | `0 6px 16px rgba(0,0,0,0.06)` | card |
| `--shadow-lg` | `0 20px 40px rgba(0,0,0,0.10)` | hero, sticky CTA |

---

## 2. Componentes-base

### 2.1 Botão

Variantes: `btn-primary`, `btn-accent`, `btn-ghost`. Tamanhos `sm`/`md`/`lg`.

Hit target mínimo 44px. CTA principal `lg` em mobile.

### 2.2 Card de serviço

Anatomia: título · descrição · preço/faixa opcional · CTA opcional. Padding interno 6.

Variantes: `card-service`, `card-testimonial`, `card-stat`, `card-case`.

### 2.3 Header

Sticky. Logo + nav + CTA. Mobile: hamburguer.

### 2.4 Hero

Variantes:
- `hero-report`: layout de relatório, dados gigantes (corporate).
- `hero-column`: coluna editorial estreita, foto P&B (solo).
- `hero-storefront`: hero caloroso com foto fachada/interior (comércio local).

### 2.5 Trust strip

Faixa horizontal: anos + clientes + projetos + nota Google. Sempre logo após hero.

### 2.6 About block

História, missão ou método. Pode ser texto + foto, citação grande, ou ficha técnica.

### 2.7 Differentials

4 itens em grid 2x2 ou linha. Título curto + descrição de 1–2 linhas.

### 2.8 Cases

Grid de 3–6 cases com foto/imagem + título + 1 métrica + link "ler mais". Opcional por demo.

### 2.9 Testimonial

Aspas + texto + autor (nome + cargo + empresa). Logo do cliente quando aplicável.

### 2.10 FAQ

Accordion. 4–6 perguntas focadas em objeção real. Apenas 1 aberta por vez.

### 2.11 CTA block

Bloco de meio/fim com headline + CTA primário + CTA secundário. Fundo `--color-primary` ou imagem com overlay.

### 2.12 Contact form

Form curto: nome + e-mail + telefone + mensagem. Submit `lg`. Privacy note LGPD.

### 2.13 Footer

Colunas: marca + endereço · navegação · contato · redes sociais. Faixa inferior: CNPJ, política, **disclaimer demo**.

---

## 3. Estados

| Componente | Estados |
|---|---|
| Botão | default, hover, focus, active, disabled, loading |
| Input | default, focus, filled, error, disabled |
| Card | default, hover, selected |
| Accordion | collapsed, expanded |

---

## 4. Regras de uso

1. **Token-driven absoluto.** Zero hex hardcoded em componentes.
2. **Estrutura constante.** Reskin = trocar variáveis, não markup.
3. **Linguagem neutra.** "Cliente", não termo de setor.
4. **Endereço/área de atendimento sempre visível.** Footer obrigatório.
5. **Dois canais de contato mínimo.** WhatsApp + e-mail ou telefone.
6. **Trust strip obrigatória.** Anos + clientes + projetos.
7. **FAQ obrigatória.** 4–6 perguntas focadas em objeção.
8. **Mobile-first.** Testado em 360px.
9. **Contraste WCAG AA.** Validar em ferramenta.
10. **LGPD.** Política visível no footer.

---

## 5. Como tematizar

```html
<style>
  :root {
    --color-primary:   #1A3A52;
    --color-secondary: #3A5C78;
    --color-accent:    #C99536;
    --color-bg:        #F7F5F0;
    --color-surface:   #FFFFFF;
    --color-text:      #0E1116;
    --color-muted:     #4F5B6B;
    --font-heading:    'GT Sectra', serif;
    --font-body:       'GT America', sans-serif;
    --radius-base:     0px;
    --shadow-card:     0 6px 16px rgba(0,0,0,0.06);
  }
</style>
```

Markup idêntico entre demos. Identidade nasce do CSS.