shadows #

fuz_css provides four semantic shadow types that build on the light model in the shading docs: umbra for natural depth, highlight for rim lighting, glow for light emphasis, and shroud for dark overlays.

Umbras are adaptive shadows that darken in light mode and lighten in dark mode. This is the default shadow behavior, creating natural depth perception in both color schemes. In light mode umbra is untinted (pure black); in dark mode it's tinted toward hue_neutral.

Highlights are adaptive shadows that lighten in light mode and darken in dark mode. In light mode highlight is tinted using hue_neutral; in dark mode it's untinted (pure black).

Glows are non-adaptive shadows that lighten in both light and dark mode. Glow colors are tinted using the theme's hue_neutral.

Shrouds are non-adaptive shadows that darken in both light and dark mode. Unlike glow, shroud is untinted (pure black) because dark shadows typically don't benefit from tinting. This asymmetry is intentional but subject to change.

Three surfaces read their shadow from a variable a theme can retarget: buttons from --button_shadow (with _hover and _active), a floating .pane from --pane_shadow, and an embedded .panel from --panel_shadow, which is none unless a theme lifts its panels. A shadow shape class like shadow_md on the same element still wins, but a shadow color or alpha class alone doesn't tint them, since the variables name their shadow colors outright.

Use shadow_{letter}_{intensity} classes to apply colored shadows. The intensity controls the color's prominence; 60 is a fine starting point for visible colored shadows.