Shadows

Only use on elevated surfaces: modals, dropdowns, overlays. Not on page cards.

shadow-sm

shadow-md

shadow-lg

Usage

.dropdown { box-shadow: var(--shadow-sm); }
.modal { box-shadow: var(--shadow-md); }
.overlay { box-shadow: var(--shadow-lg); }

Rules

1. Use hairline borders for structure, shadows only for elevation and interaction hints.
2. Never stack shadows on page-level cards.
3. Use --shadow-focus for focus indicators.