Layers, not shadows
On the page, depth comes from stepping up the gray scale: bg-surface → bg-neutral-50 → bg-neutral-100. Cards are flat, either a filled layer or a 1px border.
Layer 01
Bordered
<div class="bg-neutral-50 p-6">Layer 01</div> <div class="border border-neutral-200 p-6">Bordered</div>
Overlays
Only things that float over the page get a shadow: menus and popovers use --shadow-overlay, dialogs use --shadow-modal.
Dialog
<div class="shadow-[var(--shadow-overlay)]">Menu</div> <div class="shadow-[var(--shadow-modal)]">Dialog</div>