/* ============================================================
   ELEVATION — STACKED shadows (multiple small offsets) plus an
   inset hairline ring. Never a single heavy drop-shadow.
   ============================================================ */
:root {
  /* Level 1 — inset hairline: the universal "this is a card" cue */
  --shadow-1: 0 0 0 1px #00000014;

  /* Level 2 — subtle drop (template-grid, marketing-card) */
  --shadow-2: 0px 1px 1px #00000005, 0px 2px 2px #0000000a, 0 0 0 1px #00000014;

  /* Level 3 — soft stack (feature-grid cards) */
  --shadow-3: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a, 0 0 0 1px #00000014;

  /* Level 4 — float stack (pricing cards, callout panels) */
  --shadow-4: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a, 0 0 0 1px #00000014;

  /* Level 5 — modal / dialog / dropdown */
  --shadow-5: 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, 0 0 0 1px #00000014;
}