Shadow

Each step follows --eun-shadow-<step>. Five elevation steps, from a barely-there xs to a strong xl used for modals and popovers floating well above the page.

Token	Typical use
--eun-shadow-xs	Subtle card elevation
--eun-shadow-s	raised button variant at rest
--eun-shadow-m	raised button variant on hover, dropdowns
--eun-shadow-l	raised button variant on active, popovers
--eun-shadow-xl	Modals, dialogs

--eun-shadow-xs:
  rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
--eun-shadow-s:
  rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--eun-shadow-m:
  rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
--eun-shadow-l:
  rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
--eun-shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;

Same black at low opacity throughout, mode-independent: two layers per step (a tight contact shadow plus a softer cast one), with the offset, blur, and spread all scaling up together from xs to xl and the second layer's opacity easing down slightly as the shadow grows. That's what keeps the five steps reading as one continuous scale instead of five unrelated shadows.

Usage

.custom-popover {
  box-shadow: var(--eun-shadow-l);
}

eun-button's raised variant already layers --eun-shadow-s at rest, --eun-shadow-m on hover, and --eun-shadow-l on active. See Button: Shapes for the live example.