realgoatish

--shadow-color:
  var(--h) clamp(0%, var(--s), 50%) 50%;

.shadow-small {
  filter: 
    drop-shadow(0.5px 1px 1px hsl(var(--shadow-color) / 0.7));
}

.shadow-medium {
  filter: 

realgoatish

  /* hsl color palette can be adjusted on the fly & is derived from a single primary color */
  /* define your primary color from its h/s/l values */

  --primary-color-h: 196;
  --primary-color-s: 64%;
  --primary-color-l: 38%;

  --primary-color: hsl(
    var(--primary-color-h),
    var(--primary-color-s),