:root {
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;

  /* Base shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px -1px hsl(var(--shadow-color) /
        calc(var(--shadow-strength) + 9%));
  --shadow-base: 0 3px 5px -2px hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-md: 0 -1px 3px 0 hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-lg: 0 -2px 5px 0 hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
  --shadow-xl: 0 -1px 2px 0 hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 2%)),
    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-2xl: 0 -1px 2px 0 hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px hsl(var(--shadow-color) /
          calc(var(--shadow-strength) + 7%));

  /* Inset shadows */
  --shadow-inner-sm: inset 0 0 0 1px
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-inner-base: inset 0 1px 2px 0
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-inner-md: inset 0 1px 4px 0
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-inner-lg: inset 0 2px 8px 0
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-inner-xl: inset 0 2px 14px 0
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-inner-2xl: inset 0 2px 20px 0
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));

  /* Inherit element colour as box shadow */
  --shadow-inherit-sm: 0 1px 2px -1px;
  --shadow-inherit-base: 0 3px 5px -2px, 0 7px 14px -5px;
  --shadow-inherit-md: 0 -1px 3px 0, 0 2px 5px -5px, 0 4px 12px -5px,
    0 12px 15px -5px;
  --shadow-inherit-lg: 0 -2px 5px 0, 0 2px 2px -2px, 0 5px 5px -2px,
    0 16px 16px -2px;
  --shadow-inherit-xl: 0 -1px 2px 0, 0 5px 5px -2px, 0 10px 10px -2px,
    0 40px 40px -2px;
  --shadow-inherit-2xl: 0 -1px 2px 0, 0 7px 5px -2px, 0 12px 10px -2px,
    0 41px 33px -2px, 0 100px 80px -2px;
}