# Elevation (Shadows) — Full Reference

> There are 3 shadow types. 4dp is a highlighted element close to the surface.
> 8dp is a fully elevated element.

---

## Tokens

| Token    | CSS box-shadow value                          | Usage |
|----------|-----------------------------------------------|-------|
| 4dp      | `-1px 4px 8px 0px rgba(233, 233, 244, 100%)` | Actionable cards (with a button) |
| 8dp      | `-1px 8px 16px 0px rgba(170, 170, 186, 45%)` | Elements above others (dropdown, menu). Hover state of actionable Card Container |
| Inverted | `0px -2px 24px 0px rgba(103, 103, 121, 50%)` | Backdrops that emerge from below on mobile (bottom sheets) |

---

## CSS

```css
/* 4dp — actionable cards */
box-shadow: -1px 4px 8px 0px rgba(233, 233, 244, 1);

/* 8dp — dropdowns, card hover */
box-shadow: -1px 8px 16px 0px rgba(170, 170, 186, 0.45);

/* Inverted — mobile bottom sheets */
box-shadow: 0px -2px 24px 0px rgba(103, 103, 121, 0.50);
```

---

## Usage Rules

- **4dp** → always on cards that contain an action (button)
- **8dp** → floating elements above content (dropdowns, menus) + hover state of actionable cards
- **Inverted** → exclusive to elements that emerge from below (mobile bottom sheets, drawers)
- Never invent shadows outside these 3 tokens
