# 04 — Design System

## Conceito Visual

**"Control Room"** — Um dashboard de administração que transmite profissionalismo e controlo. Inspirado em interfaces de broadcasting desportivo e software de gestão profissional. Dark theme como padrão (ambiente de trabalho, ecrãs durante os jogos).

**Palavras-chave:** Preciso. Funcional. Desportivo. Autoritativo.

---

## Paleta de Cores

```css
:root {
  /* Backgrounds */
  --bg-base:        #0a0e1a;   /* Azul noite — fundo principal */
  --bg-surface:     #111827;   /* Cards e painéis */
  --bg-elevated:    #1a2235;   /* Elementos elevados */
  --bg-overlay:     #243047;   /* Hover states, dropdowns */

  /* Brand */
  --brand-primary:  #22c55e;   /* Verde campo — ação principal */
  --brand-accent:   #3b82f6;   /* Azul — informação, links */
  --brand-danger:   #ef4444;   /* Vermelho — perigo, cartões vermelhos */
  --brand-warning:  #f59e0b;   /* Amarelo — cartões amarelos */

  /* Texto */
  --text-primary:   #f9fafb;   /* Texto principal */
  --text-secondary: #9ca3af;   /* Texto secundário */
  --text-muted:     #4b5563;   /* Texto inativo */

  /* Bordas */
  --border:         #1e2d45;   /* Bordas subtis */
  --border-active:  #22c55e;   /* Borda ativa */

  /* Estados */
  --live-pulse:     #ef4444;   /* Indicador LIVE */
  --success:        #22c55e;
  --error:          #ef4444;
  --warning:        #f59e0b;
  --info:           #3b82f6;
}
```

---

## Tipografia

```css
/* Display / Headings — Força e presença */
--font-display: 'Bebas Neue', 'Impact', sans-serif;

/* Interface / Corpo — Legibilidade técnica */
--font-body: 'IBM Plex Sans', 'Menlo', monospace-adjacent, sans-serif;

/* Dados / Números — Clareza em scoreboards */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
```

**Escala tipográfica:**
```
xs:   11px  — Labels, metadados
sm:   13px  — Texto secundário
base: 15px  — Corpo de texto
lg:   17px  — Subtítulos
xl:   20px  — Títulos de secção
2xl:  24px  — Títulos de página
3xl:  32px  — Scores (Bebas Neue)
4xl:  48px  — Score principal live
```

---

## Componentes Base

### Scoreboard (Live)
```
┌─────────────────────────────────────────┐
│  ● LIVE  75'                            │
│                                         │
│  FC Porto          2 — 1          SLB  │
│  (crest)        [grande]         (crest)│
│                                         │
│  [−] [+]                    [−] [+]    │
└─────────────────────────────────────────┘
```
- Números do score em Bebas Neue 64px
- Indicador LIVE com pulse animation (vermelho)
- Botões +/- grandes (acessíveis em tablet)

### Game Card
```
┌─────────────────────────────────────────┐
│  Jornada 15  •  Sáb 15 Mar  •  20:30   │
│                                         │
│  FC Porto          —          Benfica   │
│                                         │
│  [Iniciar Jogo]              [Editar]  │
└─────────────────────────────────────────┘
```

### Status Badges
- `AGENDADO` — cinza
- `A DECORRER` — verde com pulse
- `INTERVALO` — amarelo
- `TERMINADO` — azul
- `ADIADO` — laranja

### Sidebar
```
┌─────────┐
│  ⚽ ADM  │
├─────────┤
│ Dashboard│
│ Jogos    │ ← item ativo tem barra verde à esquerda
│ Clubes   │
│ Jogadores│
│ Classif. │
│ Artilh.  │
├─────────┤
│ Settings │
│ Logout   │
└─────────┘
```
Largura: 240px desktop, colapsável para 60px (ícones apenas)

---

## Layout

```
┌──────────────────────────────────────────────────────┐
│                    HEADER (64px)                      │
│  [☰ Logo]  Jornada atual: 15/34    [● LIVE: Porto-B] │
├───────────┬──────────────────────────────────────────┤
│           │                                          │
│  SIDEBAR  │              CONTENT AREA               │
│  (240px)  │              (flex 1)                   │
│           │                                          │
│           │                                          │
│           │                                          │
└───────────┴──────────────────────────────────────────┘
```

---

## Animações e Microinterações

| Elemento | Animação | Duração |
|---|---|---|
| Indicador LIVE | Pulse (scale + opacity) | 1.5s infinite |
| Score update | Flash verde → normal | 600ms |
| Sidebar item hover | Translate X 4px | 150ms |
| Card hover | BoxShadow + Y -2px | 200ms |
| Toast notifications | Slide in from right | 300ms |
| Página load | Fade in staggered | 400ms |
| Botão click | Scale 0.96 | 100ms |

---

## Responsividade

| Breakpoint | Layout |
|---|---|
| `< 768px` (mobile) | Sidebar escondida (drawer), conteúdo full-width |
| `768px-1024px` (tablet) | Sidebar colapsada (ícones), otimizado para live scoring |
| `> 1024px` (desktop) | Layout completo |

**Nota:** O Live Score Editor deve ser especialmente otimizado para tablet — é o mais provável de ser usado durante os jogos.

---

## Ícones

Usar **Lucide React** exclusivamente. Ícones principais:
- `Trophy` — classificação
- `Users` — clubes
- `User` — jogadores  
- `Calendar` — jornadas
- `BarChart` — estatísticas
- `Zap` — live/em tempo real
- `Plus` / `Minus` — adicionar/remover golos
- `Flag` — cartões
- `Clock` — tempo de jogo