# 🎨 Design System — ReservaMesa

## Identidade Visual

### Conceito
**"Elegância Operacional"** — Um dashboard que parece profissional e de alta confiança, como um sistema de gestão de um restaurante Michelin. Cores quentes (não o típico azul SaaS), tipografia editorial, e uma sensação de ambiente noturno de restaurante premium.

### Tom e Personalidade
- Profissional, mas com calor humano
- Moderno sem ser frio
- Eficiente mas confortável para uso prolongado
- Inspirado na estética de restaurantes de autor europeus

---

## Paleta de Cores

### Tema Escuro (Padrão)
```css
:root {
  /* Backgrounds */
  --bg-primary: #0F0E0C;        /* Quase preto, tom quente */
  --bg-secondary: #1A1814;      /* Cards e panels */
  --bg-tertiary: #252219;       /* Input fields */
  --bg-hover: #2E2A22;          /* Hover states */

  /* Brand */
  --brand-primary: #D4891A;     /* Âmbar — cor principal */
  --brand-secondary: #E8A832;   /* Âmbar claro — accents */
  --brand-muted: #3D2E0F;       /* Âmbar muito escuro — bg de badges */

  /* Status */
  --status-pending: #F59E0B;    /* Amarelo — pendente */
  --status-confirmed: #10B981;  /* Verde — confirmado */
  --status-seated: #3B82F6;     /* Azul — sentado */
  --status-completed: #6B7280;  /* Cinza — concluído */
  --status-cancelled: #EF4444;  /* Vermelho — cancelado */
  --status-noshow: #8B5CF6;     /* Roxo — no-show */

  /* Text */
  --text-primary: #F5F0E8;      /* Branco quente */
  --text-secondary: #A09880;    /* Cinza quente */
  --text-muted: #6B6355;        /* Muted */
  --text-accent: #D4891A;       /* Links e destaques */

  /* Borders */
  --border: #2A261E;
  --border-strong: #3D3828;
}
```

### Tema Claro (Opcional)
```css
[data-theme="light"] {
  --bg-primary: #FAF7F2;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F0EDE6;
  --text-primary: #1A1814;
  --text-secondary: #5C5548;
  --border: #E5DDD0;
}
```

---

## Tipografia

### Fontes
```css
/* Display — títulos e métricas grandes */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

/* Body — texto de interface */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');

/* Monospace — números, timestamps */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');
```

### Escala Tipográfica
```css
--font-display: 'Playfair Display', serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'DM Mono', monospace;

--text-xs: 0.75rem;     /* 12px — labels, metadata */
--text-sm: 0.875rem;    /* 14px — body secundário */
--text-base: 1rem;      /* 16px — body principal */
--text-lg: 1.125rem;    /* 18px — subtítulos */
--text-xl: 1.25rem;     /* 20px — títulos de section */
--text-2xl: 1.5rem;     /* 24px — títulos de página */
--text-3xl: 1.875rem;   /* 30px — métricas grandes */
--text-4xl: 2.25rem;    /* 36px — hero numbers */
```

---

## Componentes de Design

### Status Badges
```
● Pendente     → âmbar/amarelo
● Confirmado   → verde
● Sentado      → azul
● Concluído    → cinza
● Cancelado    → vermelho
● No-Show      → roxo
```

### Cards de Métricas (Dashboard)
- Fundo: `--bg-secondary`
- Número grande em `Playfair Display`
- Label em `DM Sans` muted
- Ícone à esquerda com cor da brand
- Trend indicator (↑↓) com cor verde/vermelho

### Tabelas
- Header: `--bg-tertiary` com texto `--text-secondary`
- Rows alternadas: transparente e `--bg-hover` em 30% opacity
- Hover: `--bg-hover`
- Border: `--border` a 1px

### Sidebar
- Largura: 240px (collapsed: 64px)
- Fundo: `--bg-secondary`
- Border right: `--border`
- Active item: fundo `--brand-muted`, texto `--brand-secondary`
- Logo no topo com tipografia editorial

---

## Layout Grid

### Desktop
- Sidebar: 240px fixo à esquerda
- Content area: `calc(100vw - 240px)`
- Max content width: 1400px
- Padding interno: 24px

### Mobile (< 768px)
- Sidebar: bottom navigation bar
- Content: full width com padding 16px
- Gestão de reservas adaptada para toque

---

## Iconografia

**Biblioteca**: Lucide React
- Estilo: outline, 1.5px stroke
- Tamanho padrão: 20px
- Cor: herda do contexto

### Ícones-chave por secção
| Secção | Ícone |
|---|---|
| Dashboard | `LayoutDashboard` |
| Reservas | `CalendarCheck` |
| Mesas | `Grid3x3` |
| Calendário | `Calendar` |
| Analytics | `TrendingUp` |
| Configurações | `Settings` |
| Notificações | `Bell` |
| Staff | `Users` |

---

## Motion & Animações

### Princípios
- Subtil — nunca distrai do trabalho
- Rápido — max 300ms para feedback, 500ms para transições de página
- Funcional — animações comunicam estado

### Padrões
```javascript
// Entrada de página
{ opacity: 0, y: 8 } → { opacity: 1, y: 0 }, duration: 0.3

// Cards em stagger
children com delay: i * 0.05s

// Status change (reserva confirmada, etc.)
Scale: 1 → 1.05 → 1, duration: 0.2

// Toast notifications
{ x: 100, opacity: 0 } → { x: 0, opacity: 1 }
```

---

## Responsividade

| Breakpoint | Largura | Comportamento |
|---|---|---|
| Mobile | < 640px | Navegação inferior, lista simplificada |
| Tablet | 640-1024px | Sidebar colapsada (ícones apenas) |
| Desktop | > 1024px | Layout completo |
| Wide | > 1440px | Conteúdo centrado com max-width |

---

*Versão: 1.0.0 | Maio 2026*