Default shadow-2 upgrades to shadow-3 + glow-lime-soft + lime ring on hover. Used on every clickable card.
shadow-3, ring lime/15, glow-lime/18
Maximum elevation. shadow-5 alone — no glow. The backdrop scrim does the focus work, not the glow.
0 28px 96px /.7, 0 12px 32px /.4
Floating in the corner. shadow-4 + glow-cyan tints the lift to match the toast role (cyan info, red error, lime success).
shadow-4, glow-cyan/20, ring cyan/40
Every shadow is at least two layers — a sharp short-distance shadow for contact, a soft long-distance shadow for depth. 0 1px 2px + 0 16px 48px. Single-layer drop shadows look like 2010 Bootstrap.
A glow is a signal that something is active or interactive. Static cards never glow. CTAs, focus rings, status pills, hover states — anything that says "this is alive" — earn one.
Glow color tells the user what kind of attention. Lime = brand affordance. Cyan = informational. Red = danger. Violet = premium. Never mix glow colors on the same element.