Shadows
Elevation shadows for floating UI elements — modals, dropdowns, tooltips, and toasts. Do not use shadows on cards or content containers; use borders instead.
Elevation
--force-shadow-xs 0px 1px 2px 0px #00000014, 0px 0px 2px 0px #0000001a Smallest elevation. Use for dropdown menus. Do NOT use on cards.
--force-shadow-sm 0px 2px 4px 0px #0000001a, 0px 0px 2px 0px #00000014 Small elevation. Use for popovers, select dropdowns.
--force-shadow-md 0px 4px 8px 0px #0000001a, 0px 0px 4px 0px #00000014 Medium elevation. Use for floating panels, persistent popovers.
--force-shadow-lg 0px 8px 16px 0px #0000001a, 0px 0px 8px 0px #00000014 Large elevation. Use for modals, drawers.
--force-shadow-xl 0px 16px 32px 0px #0000001f, 0px 0px 16px 0px #00000014 Largest elevation. Use for wizard panels, major overlays.
Focus Rings
--force-shadow-focus-ring 0px 0px 0px 2px {color.bg.surface}, 0px 0px 0px 4px #5405ff Two-stop focus ring; inner spacer matches surface, outer band carries brand contrast — guarantees ≥3:1 (WCAG 1.4.11) against every documented surface. Apply alongside border.focus on keyboard focus. Do NOT use for hover states.
--force-shadow-focus-ring-error 0px 0px 0px 2px {color.bg.surface}, 0px 0px 0px 4px #d11323 Two-stop error focus ring; inner spacer matches surface, outer band carries brand contrast — guarantees ≥3:1 (WCAG 1.4.11) against every documented surface. Apply on focused inputs with validation errors.
--force-shadow-focus-ring-on-brand 0px 0px 0px 2px {color.bg.primary}, 0px 0px 0px 4px {color.bg.surface} Two-stop focus ring for elements sitting on bg.primary (e.g. primary buttons, on-brand surfaces); inner spacer matches surface, outer band carries brand contrast — guarantees ≥3:1 (WCAG 1.4.11) against every documented surface. Use this when an element sits on bg.primary.