Foundations

Shadows & focus rings

Effect styles from the Figma variables. The primary button uses the skeuomorphic recipe (drop shadow + 1px inner border + 2px inner bottom shadow); every interactive control shows the 4px brand focus ring on keyboard focus.

--shadow-xs
0 1px 2px rgba(10,13,18,0.05) - secondary buttons, inputs
--shadow-xs-skeuomorphic
shadow-xs + inner border + inner bottom shadow - primary buttons
--shadow-lg
layered drop shadow - tooltips and overlays
--focus-ring
0 0 0 2px white + 0 0 0 4px #003CFF - focused controls