Shadows

Seven steps from a hairline under a control to a full drop shadow. Offset and blur grow together while the black stays translucent — 5% at the bottom of the scale, 25% only at shadow-2xl.

Elevation tracks distance from the page. Controls and cards sit at shadow-xs, surfaces raised in place — active tabs, slider thumbs, the floating sidebar — take shadow-sm, popovers and menus float at shadow-md, sheets and submenus at shadow-lg, and the chart tooltip tops out at shadow-xl.

Translucent black disappears on a dark background, so a shadow alone cannot separate an elevated surface in dark mode. Every floating surface therefore pairs its shadow with ring-1 ring-foreground/10 — press D to see the ring take over as the shadow fades. Dialogs sit on a dimmed overlay and use the ring alone.