# Design System — Restaurant

Sistema de tokens para o nicho **restaurant**. As 3 demos têm direções estéticas **nomeadas**, com identidades irreconhecíveis entre si. Tokens semânticos comuns, tematizados via `themeJson`.

> Regra: nenhum componente carrega hex hardcoded. Tudo via `var(--token)`.

---

## 1. Tokens base (semânticos)

| Token | Função |
|---|---|
| `--color-primary` | Identidade dominante |
| `--color-secondary` | Suporte / fundo alternativo |
| `--color-accent` | UM acento por demo (nunca dois) |
| `--color-bg` | Fundo da página |
| `--color-surface` | Cards, áreas elevadas |
| `--color-text` | Texto principal |
| `--color-muted` | Texto secundário, legendas |

**Tipografia** (sem Inter/Roboto/Arial — diretiva da marca):
- `--font-heading`: display da direção (Fraunces, DM Serif Display, Big Shoulders, etc).
- `--font-body`: sans neutra (Manrope, Karla) ou mono (JetBrains Mono em direções técnicas).

**Escala** (rem): xs 0.75 · sm 0.875 · base 1 · lg 1.125 · xl 1.25 · 2xl 1.5 · 3xl 1.875 · 4xl 2.25 · 5xl 3 · 6xl 3.75 · 7xl 4.5 · 8xl 6.

**Espaço** (4px): 0/1/2/3/4/5/6/8/10/12/16/20/24/32.
**Raio**: none/sm 4/md 8/lg 16/full.
**Sombra**: sm/md/lg conforme demo (em Noir, sombra = ausência de borda, contraste de luz; em Neon, glow box-shadow saturado).

## 2. Direções estéticas (DFII alto — irreconhecíveis entre si)

### 01 · Editorial Noir (fine dining)
- bg `#0B0B0A` · text `#EFE7D6` · accent ouro **fosco** `#B89968`
- Heading: **Fraunces** (italic optical) · Body: **Manrope**
- Numeração de prato em **romanos** (I, II, III) display
- Composição: grid editorial assimétrico, whitespace agressivo (>50%), foto fullbleed alternada com tipografia gigante
- Motion: fade lento, hover de prato revela ingredientes em serif italic
- **Banido**: dourado brilhante, scripts cursivos, "menu rústico", emoji

### 02 · Mercado Vibrante (casual popular)
- bg off-white `#F5EFE3` · primary tomate `#C7311F` · accent mostarda `#E9B949`
- Heading: **DM Serif Display** · Body: **Manrope**
- Cards com leve rotação (−1° a +1°), bordas grossas pretas, etiquetas tipo feira
- Composição: densa, modular, preço grande, selo "favorito da casa"
- Motion: hover com mini-shake
- **Banido**: madeira+verde-oliva rústico genérico

### 03 · Neon Brutalismo (bar noturno)
- bg concreto `#18171A` · primary magenta neon `#FF2D7A` · secondary ciano `#2DE3FF` (uso pontual)
- Heading: **Big Shoulders Display** ou **Archivo Black** · Body: **JetBrains Mono**
- Composição: grid quebrado, sobreposição, blocos de cor chapada, números de drink em mono massivos
- Motion: glow pulsante sutil no logo, hover com leve chromatic-aberration
- **Banido**: speakeasy madeira+âmbar genérico

## 3. Componentes (anatomia compartilhada, visual divergente)

- **Header**: logo · nav · CTA reserva/WhatsApp (FAB mobile alinhado ao bg)
- **Hero**: foto hero ou tipografia hero · CTAs · prova social
- **Menu/menu_highlights**: lista de 6–10 pratos com nome · descrição · preço · marcadores dietéticos
- **About / Manifesto**: 1 parágrafo grande + 1 ou 2 detalhes biográficos
- **Ambience / Gallery**: 4–8 fotos do espaço/bastidor
- **Hours + Delivery info**: bloco compacto e claro
- **Testimonials**: 2–3, autor + contexto curto
- **Reservation CTA**: bloco com data/hora + WhatsApp ou plataforma
- **Contact + Footer**: endereço, redes, responsável, disclaimer

## 4. Regras

1. Direção estética é **um bloco fechado** — não misturar Noir com Vibrante no mesmo demo.
2. **Um accent só** por demo. Magenta + ciano em Neon = magenta primário, ciano só pontual.
3. Foto sempre placeholder com explainer monoespaçado em modo `prato top-down`, `ambiente vazio`, etc.
4. Cardápio nunca em PDF — sempre HTML acessível.
5. WhatsApp ou reserva sempre fixos em mobile (variante de FAB que combine com a estética).
6. Disclaimer "Proposta conceitual — não é site oficial" em todas as demos.