Foundations
Elevation.
Four shadow tokens — the system avoids depth as decoration. Shadows mean: this thing was lifted off the page on purpose.
Shadows
--sprout-shadow-surface
Resting card (light).
0 1px 2px 0 rgba(0,0,0,0.06)
--sprout-shadow-overlay
Dropdown, tooltip, popover (light).
0 4px 12px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06)
--sprout-shadow-floater
Modal, FAB, drawer (light).
0 16px 32px 0 rgba(0,0,0,0.16), 0 4px 8px 0 rgba(0,0,0,0.08)
Depth, two ways
Light mode borrows from print. Dark mode borrows from physics.
The four shadow tokens above only render in light mode. In dark mode, components reach for the matching
--surface-N token instead — the elevation API is the same, the visual mechanism flips.