Foundations

Elevation & shadows

Structure is separated by a 1px border. Shadows are for lift: a raised surface (card, menu, dropdown) may pair surface-raised with shadow-raised, and floating overlays (modal, drawer) use shadow-overlay. Stacking comes from the z-index scale. In the Accessibility theme every shadow is none — borders carry all elevation. This is guardrail 8.

The two shadow tokens

shadow-raised lifts cards and menus; shadow-overlay floats modals and drawers. Tables and forms stay flat with a border.

--shadow-raised raised

--shadow-overlay overlay

Theme-specific — and gone in Accessibility

The same shadow-overlay surface across the themes. In Accessibility it flattens to none and leans on the border instead.

shadow-overlay

Light

shadow-overlay

Dark

shadow-overlay

Accessibility

The rule

8Containers separate via 1px solid var(--color-border-strong); hairline for subtle dividers. A raised surface may add var(--shadow-raised); overlays use var(--shadow-overlay).
Never hardcode an rgba() shadow — always the token. The modal scrim is var(--color-overlay); stacking comes from the z-index scale (--z-modal, --z-tooltip, …).

Per-theme shadow values are on the Shadow tokens page.