# Efeitos

Sombras e blur. O Figma os agrupa como estilos de efeito; o DS os expõe como tokens e utilitários.

## Sistema de elevação

Hierarquia por **contexto de uso**, não por tamanho abstrato. Cada nível usa **duas camadas de sombra**: uma próxima e nítida, outra distante e suave. Cor sempre `secondary/opacity/950-10%` (#14508F1A em claro, #1961AC1A em escuro).

Camada 1

Sombra próxima e nítida — define a borda imediata e dá presença.

Camada 2

Sombra distante e suave — espalha luz e sugere altura física.

Cor

Azul tintado a 10% (valores acima).

## Sombras (box-shadow)

3 níveis. A amostra renderizada fica à esquerda; os valores copiáveis ficam à direita.

### Sombra média

Card sobre a página, bloco e item de lista elevado.

Camada 1: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 1px Raio: 2px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: 0px Atrás do elemento: Não

Camada 2: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 4px Raio: 6px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: \-1px Atrás do elemento: Não

Tailwind: `shadow-medium` `shadow-card` · CSS var: `--shadow-medium`

### Sombra grande

Dropdown, popover, tooltip e mega menu.

Camada 1: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 4px Raio: 6px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: \-4px Atrás do elemento: Não

Camada 2: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 10px Raio: 15px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: \-3px Atrás do elemento: Não

Tailwind: `shadow-large` `shadow-overlay` · CSS var: `--shadow-large`

### Sombra extra grande

Modal, dialog e drawer em tela cheia.

Camada 1: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 8px Raio: 10px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: \-6px Atrás do elemento: Não

Camada 2: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 20px Raio: 25px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: \-5px Atrás do elemento: Não

Tailwind: `shadow-extra-large` `shadow-popup` · CSS var: `--shadow-extra-large`

## Como usar

Card

```html
<div
  class="
    rounded-2xl
    bg-background
    p-6
    shadow-card
  "
>
  Conteúdo
</div>
```

Dropdown

```html
<div
  class="
    rounded-xl
    bg-background
    shadow-overlay
    ring-1
    ring-border
  "
>
  Itens do menu
</div>
```

Modal

```html
<dialog
  class="
    rounded-3xl
    bg-background
    p-8
    shadow-popup
  "
>
  Diálogo crítico
</dialog>
```

## Desfoque de fundo

O Figma define um único nível, de 4px. Use para superfícies translúcidas sutis sobre conteúdo.

### Desfoque pequeno (4px)

Desfoque de fundo sutil em cabeçalhos e navbars fixas sobre conteúdo.

Camada 1: desfoque de fundo

Visível: Sim Raio: 4px

Tailwind: `backdrop-blur-small` · Nativo: `backdrop-blur-sm` · CSS var: `--blur-small`

Copiado