# Elevação — contrato v1.5

## Escala

A escala possui cinco níveis progressivos. Elevação comunica distância da superfície base e hierarquia temporária; não substitui foco, seleção ou contraste.

| Token | Claro | Uso principal |
|---|---|---|
| `--elevation-1` | `0 1px 3px / 15%` | cards e inputs elevados |
| `--elevation-2` | `0 4px 12px / 15%` | menus, popovers e hover de cards |
| `--elevation-3` | `0 6px 24px / 18%` | toasts e painéis |
| `--elevation-4` | `0 10px 36px / 25%` | painéis flutuantes de alta prioridade |
| `--elevation-5` | `0 16px 56px / 30%` | modais e drawers |

No tema escuro, a geometria permanece estável e apenas a opacidade sobe para preservar a separação entre superfícies.

## Regras

- O hover de um card interativo usa no máximo `--elevation-2`.
- Hover não escurece a borda para simular elevação.
- Active pode retornar a `--elevation-1` para comunicar pressão.
- Toasts e painéis comuns não saltam diretamente para o nível modal.
- Modais e drawers usam `--elevation-5`.
- Não crie sombras ad hoc, glows ou combinações de múltiplas sombras fora desta escala.
- Motion reduzido não remove a hierarquia estática da sombra; apenas encurta a transição.

Gaussian não é um sexto nível de elevação. Vidro sticky segue `GAUSSIAN-GLASS.md` e não deve combinar blur com sombra alta para simular profundidade excessiva.

## Migração

O antigo `--elevation-4` representava `0 16px 56px` e foi renomeado para `--elevation-5`. Para preservar a aparência anterior de modais e drawers, substitua:

```css
box-shadow: var(--elevation-4);
```

por:

```css
box-shadow: var(--elevation-5);
```

O novo `--elevation-4` é intermediário e não deve ser adotado como substituição automática.

## Specimen no portal

Os cinco níveis aparecem em escadaria, preservando sombras computadas, altura de 80px e larguras uniformes e fluidas entre 150 e 224px conforme o viewport. A posição vertical é composicional; não altera o token. O vidro Gaussian é demonstrado com `backdrop-filter` real e continua separado da escala de sombras.