# Elevation and Depth

## Purpose

How layering, shadow and surface hierarchy are expressed.

## Decisions

### Floating layers and depth

Surfaces are flat tiers, and **floating layers add a shadow**.

- **Floating layers (menus, popovers, toasts, dialogs):** above-background fill `#171615`, 1px background-accent border `#272523`, and a soft shadow `0 8px 24px rgba(0,0,0,.55)`.
- **Behind a dialog:** a 50% black scrim with a slight blur (2px).
- **Dragged item:** the lighter hover fill `#272523` with a shadow `0 8px 20px rgba(0,0,0,.6)`, and no violet border.
- **Tooltips:** above-background fill, 1px `#322f2c` border, soft white text, 8px radius, 4px / 10px padding, 12px / 16px text.