# Efeitos & Tokens — Fundação do Design System Phorte

> Raios (derivados de um raio base) e os quatro degraus de sombra, com o uso de cada um contado do código.

- Página: https://phorte-design-system.vercel.app/styleguide/fundacao/efeitos
- Índice do design system: https://phorte-design-system.vercel.app/llms.txt

## Raios

Os quatro derivam de `--radius: 0.5rem` por `calc()`: mudar o raio base muda os quatro juntos.

| Classe | Variável | Valor |
| --- | --- | --- |
| `rounded-sm` | `--radius-sm` | calc(8px - 4px) = 4px |
| `rounded-md` | `--radius-md` | calc(8px - 2px) = 6px |
| `rounded-lg` | `--radius-lg` | 8px — o raio base |
| `rounded-xl` | `--radius-xl` | calc(8px + 4px) = 12px |

## Sombras

Quatro degraus de elevação, cada um com o seu token em `:root` (E53). Os usos são contados de `app/components` no build.

| Classe | Token | Uso | Usos no código |
| --- | --- | --- | --- |
| `shadow-sm` | `--sombra-repouso` | Repouso — cartão parado | 19 |
| `shadow-md` | `--sombra-hover` | Hover de cartão e botão | 11 |
| `shadow-lg` | `--sombra-flutuante` | Flutuante — cartão destacado, menu | 19 |
| `shadow-xl` | `--sombra-sobreposicao` | Sobreposição — o que passa por cima da página | 10 |
| `shadow-2xl` | — | Fora dos degraus: mega-menu e destaque (valor do Tailwind) | 11 |