# Elevation

Four surface levels, each paired with its shadow, so depth means the same thing on every screen.

Elevation shows what sits on top of what. Atrium has four levels. Each raised level pairs a surface token with a shadow token: always use them together.

| Level | Tokens | Use for |
|---|---|---|
| **Sunken** | `--at-surface-sunken` | A backdrop that groups other content, such as a column of cards |
| **Default** | `--at-surface` | The page itself, inputs and secondary buttons |
| **Raised** | `--at-surface-raised` + `--at-shadow-raised` | Cards |
| **Overlay** | `--at-surface-overlay` + `--at-shadow-overlay` | Dialogs and menus that sit over everything else |

```html
<div class="at-stack" style="padding:var(--at-space-5);background:var(--at-surface-sunken);border-radius:var(--at-radius-2)"><div class="at-card"><h3 class="at-card__title">Raised card</h3><p class="at-muted">On a sunken backdrop.</p></div><dialog class="at-dialog" open aria-label="Overlay example" style="position:static"><p>Overlay: dialogs and menus.</p></dialog></div>
```

## Rules

- Always pair a raised or overlay surface with its own shadow.
- Do not raise things just for emphasis. Most content sits flat on the page; use a card only to group.
- Never put a card inside a card, or a shadow on a shadow.
- In dark mode, higher surfaces are **lighter**, because shadows are hard to see on dark backgrounds. The tokens handle this for you.