Shadows

Shadow tokens provide depth and elevation hierarchy. Use them consistently to communicate interactive states and layering.

Shadow Scale

Small

shadow-sm

Subtle elevation for cards at rest

Medium

shadow-md

Hover states, dropdowns, tooltips

Large

shadow-lg

Modals, popovers, floating panels

Glow

shadow-glow

Primary action emphasis, focus rings

Interactive Example

Card at rest

shadow-sm

Card hovered

shadow-md

Primary action

shadow-glow

css

/* Shadow Tokens */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
--shadow-glow: 0 4px 20px rgba(29,185,84,0.3);

/* Usage */
box-shadow: var(--shadow-sm);   /* Default card */
box-shadow: var(--shadow-md);   /* Hover state */
box-shadow: var(--shadow-lg);   /* Modal / overlay */
box-shadow: var(--shadow-glow); /* Primary CTA focus */