Shadows
Elevation shadows using CSS variables. Adapts to theme changes.
Shadow Tokens
2 shadow tokens covering the elevation levels used across the site.
Small
shadow-smSubtle elevation for small elements (toggles, pills)
Large
shadow-lgStrong elevation for modals and lightboxes
Popover
shadow-popoverSoft lift for floating panels — applied by the .popover-surface class, so popovers should not add a shadow of their own
Button Primary
shadow-btn-primaryFour stacked layers under the primary button — a tight contact shadow beneath a wider soft one, so it reads as seated rather than floating.
Button Secondary
shadow-btn-secondaryThe secondary button has no border at all — its entire edge is this: an inner ring, a brighter inner top edge (lit from above), an outer ring and a soft drop.
Elevation Shadows
Standard elevation shadows for depth hierarchy:
shadow-smshadow-lgUsage
Common Patterns
shadow-sm — Buttons, small elementsshadow-lg — Modals, dropdowns