refactor: port content shadow to Open Props shadow-4 pattern

Replace PicoCSS-style blur-only shadow (7 layers, rem units, 0 spread)
with Open Props shadow-4 structure (negative -2px spread, px units,
tighter 1-16px blur range). Reduces visible striation by shrinking each
layer's footprint so they overlap gradually instead of stacking as
concentric rings.

Author: Leftium

src/_shadow.scss

@@ -17,32 +17,36 @@
 @use 'sass:string';
 @use 'config' as *;
 
-// Helper: build a shadow layer with spread value and light-dark() color
-@function _shadow-layer-spread($blur, $spread, $light-color, $light-alpha, $dark-color, $dark-alpha) {
+// Helper: build a shadow layer with light-dark() color
+@function _shadow-layer($blur, $spread, $light-color, $light-alpha, $dark-color, $dark-alpha) {
   @return string.unquote(
     '0 0 #{$blur} #{$spread} light-dark(oklch(#{$light-color} / #{$light-alpha}), oklch(#{$dark-color} / #{$dark-alpha}))'
   );
 }
 
 // Build a 7-layer progressive content shadow.
-// Each layer uses light-dark() so opacity adapts to the color scheme.
-// Modeled after PicoCSS/veneer card shadow with stronger presence.
+// Ported from Open Props --shadow-4: negative spread (-2px) on blur layers
+// so visible footprints overlap gradually instead of stacking as concentric
+// rings. light-dark() on each layer's color swaps shadow (dark oklch) for
+// glow (light oklch) automatically.
 @function _content-shadow($light-color, $dark-color) {
   @return
-    _shadow-layer-spread(0.15rem, 0,  $light-color, 0.02,  $dark-color, 0.015),
-    _shadow-layer-spread(0.3rem,  0,  $light-color, 0.03,  $dark-color, 0.02),
-    _shadow-layer-spread(0.75rem, 0,  $light-color, 0.04,  $dark-color, 0.025),
-    _shadow-layer-spread(1.35rem, 0,  $light-color, 0.04,  $dark-color, 0.03),
-    _shadow-layer-spread(2.5rem,  0,  $light-color, 0.05,  $dark-color, 0.035),
-    _shadow-layer-spread(6rem,    0,  $light-color, 0.06,  $dark-color, 0.04),
-    _shadow-layer-spread(0rem, 0.0625rem, $light-color, 0.015, $dark-color, 0.01);
+    _shadow-layer(5px,   0,          $light-color, 0.03,  $dark-color, 0.015),
+    _shadow-layer(1px,   -2px,       $light-color, 0.04,  $dark-color, 0.02),
+    _shadow-layer(2px,   -2px,       $light-color, 0.04,  $dark-color, 0.025),
+    _shadow-layer(5px,   -2px,       $light-color, 0.05,  $dark-color, 0.03),
+    _shadow-layer(9px,   -2px,       $light-color, 0.06,  $dark-color, 0.035),
+    _shadow-layer(16px,  -2px,       $light-color, 0.07,  $dark-color, 0.04),
+    _shadow-layer(0px,   0.0625rem,  $light-color, 0.015, $dark-color, 0.01);
 }
 
 @layer nimble.base {
 
   :root {
     // Soft elevation shadow on the padded content column.
     // Uses surface hue for tonal consistency; adapts to light/dark mode.
+    // Each layer uses light-dark() on the color: dark oklch for shadow,
+    // light oklch for glow. Switches automatically with color-scheme.
     // Override with --nc-content-shadow: none to disable.
     #{$prefix}content-shadow: #{_content-shadow(
       $content-shadow-color-light, $content-shadow-color-dark