/* Five steps, all resting on --bg-canvas. Dark mode switches from tinted navy shadows to
   flat black at higher opacity — a scaled-down light shadow reads as muddy on a dark
   surface, so each dark step is hand-tuned rather than inverted. */
:root {
  --shadow-xs: 0 1px 2px rgb(15 36 64 / 0.05);
  --shadow-sm: 0 1px 2px rgb(15 36 64 / 0.06), 0 2px 6px -1px rgb(15 36 64 / 0.07);
  --shadow-md: 0 2px 4px rgb(15 36 64 / 0.06), 0 8px 20px -6px rgb(15 36 64 / 0.12);
  --shadow-lg: 0 4px 8px rgb(15 36 64 / 0.07), 0 18px 40px -12px rgb(15 36 64 / 0.16);
  --shadow-xl: 0 8px 16px rgb(15 36 64 / 0.08), 0 32px 72px -20px rgb(15 36 64 / 0.22);
  --shadow-focus: 0 0 0 3px var(--state-focus-ring);
  --shadow-inset: inset 0 1px 2px rgb(15 36 64 / 0.06);
}

:root[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.36), 0 2px 6px -1px rgb(0 0 0 / 0.40);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.40), 0 8px 20px -6px rgb(0 0 0 / 0.52);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.44), 0 18px 40px -12px rgb(0 0 0 / 0.60);
  --shadow-xl: 0 8px 16px rgb(0 0 0 / 0.48), 0 32px 72px -20px rgb(0 0 0 / 0.68);
  --shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.40);
}