# Elevação e efeitos

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

Todo componente sobreposto aparece um nível acima da superfície em que foi aberto (overlay/surface + overlay/border + elevation/overlay). Os valores de sombra são iguais nos três temas.

## Elevação

| Nível | Token | Variável CSS | CSS | Uso |
| --- | --- | --- | --- | --- |
| 1 | `elevation/control` | `--midas-elevation-control` | `0 1px 2px 0 rgb(15 23 41 / 0.04), 0 2px 8px 0 rgb(15 23 41 / 0.05)` | Controles com leve relevo (inputs, botões outline). Combine com borda border/subtle. |
| 2 | `elevation/card` | `--midas-elevation-card` | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` | Cards e superfícies elevadas em repouso. |
| 3 | `elevation/raised` | `--midas-elevation-raised` | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` | Cards em hover/drag, elementos sticky. |
| 4 | `elevation/overlay` | `--midas-elevation-overlay` | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` | Dropdown, popover, combobox, date picker, tooltip, menus. Sempre com overlay/surface + overlay/border. |
| 5 | `elevation/modal` | `--midas-elevation-modal` | `0 25px 50px -12px rgb(0 0 0 / 0.25)` | Dialogs, sheets e drawers. |

```css
.dropdown {
  background: var(--midas-overlay-surface);
  border: 1px solid var(--midas-overlay-border);
  border-radius: var(--midas-radius-role-overlay);
  box-shadow: var(--midas-elevation-overlay);
}
```

## Foco

Focus ring do sistema = borda de 1px + halo suave de 4px ao redor. Os halos mudam sozinhos por tema.

| Variante | Borda | Halo (token de cor) | Variável do efeito | CSS |
| --- | --- | --- | --- | --- |
| Brand | `selection/border` | `focus/halo` | `--midas-effect-focus-ring` | `0 0 0 4px var(--midas-focus-halo)` |
| Neutral | `border/strong` | `focus/halo-neutral` | `--midas-effect-focus-ring-neutral` | `0 0 0 4px var(--midas-focus-halo-neutral)` |
| Erro | `status/danger/border` | `focus/halo-danger` | `--midas-effect-focus-ring-danger` | `0 0 0 4px var(--midas-focus-halo-danger)` |

Foco tem prioridade sobre hover. Disabled não tem hover. Em campos, a borda focus/ring tem contraste ≥ 3:1.

```css
.input:focus-visible {
  border-color: var(--midas-selection-border);
  box-shadow: var(--midas-effect-focus-ring);
  outline: none;
}
```

## Materiais, blur e glass

Superfícies translúcidas para uso sobre mídia. Mais blur = mais legibilidade e menos fundo. Só sobre imagem, vídeo ou gradiente.

| Material | Blur | Fundo | Brilho (borda superior) | Sombra | Uso |
| --- | --- | --- | --- | --- | --- |
| `material/glass` | 24px | `material/glass/bg` | `material/glass/border` | `0 1px 3px 0 rgb(0 0 0 / 0.12)` | Vidro padrão: blur 24 + brilho superior + sombra mínima. |
| `material/glass-strong` | 40px | `material/glass/bg` | `material/glass/border` | `0 2px 8px 0 rgb(0 0 0 / 0.16)` | Vidro intenso: blur 40 para fundos muito detalhados. |
| `material/liquid` | - | `material/glass/bg` | - | `0 1px 3px 0 rgb(0 0 0 / 0.12)` | Liquid glass: refração e distorção do fundo (efeito GLASS do Figma) + sombra mínima. Não tem equivalente exato em CSS: use glass como aproximação. |
| `material/frosted` | 28px | `material/scrim/bg` | `material/scrim/border` | - | Frosted padrão: blur 28 + brilho sutil. |
| `material/frosted-strong` | 48px | `material/scrim/bg` | `material/scrim/border` | - | Frosted intenso: blur 48, quase opaco, para leitura sobre vídeo/imagem movimentada. |
| `material/sheen` | - | - | `material/sheen` | `0 1px 2px 0 rgb(0 0 0 / 0.08)` | Acabamento flat moderno para botões degradê/sólidos: brilho de 1px no topo + sombra mínima. |
| `material/raised-button` | - | - | `material/sheen` | `elevation/card` | Botões sólidos com leve relevo (Secondary, On media, Gradient): brilho superior + elevation/card. |

| Blur | Valor |
| --- | --- |
| `blur/sm` | 8px |
| `blur/md` | 16px |
| `blur/lg` | 32px |

Receita do vidro padrão:

```css
.glass {
  background: var(--midas-material-glass-bg);
  backdrop-filter: blur(var(--midas-material-glass-blur));
  box-shadow: inset 0 1px 0 var(--midas-material-glass-border), var(--midas-material-glass-shadow);
}

.frosted {
  background: var(--midas-material-scrim-bg);
  backdrop-filter: blur(var(--midas-material-frosted-blur));
  box-shadow: inset 0 1px 0 var(--midas-material-scrim-border);
}
```

O efeito liquid glass do Figma (refração e distorção reais) não tem equivalente em CSS; use glass como aproximação. Texto sobre vidro usa `material/glass/surface` (contraste >= 4,5:1) e sobre mídia escura `material/on-media/content` com `material/scrim/strong`.