/* @import '/assets/css/media.css'; */

:where(html) {
  --shadow-color: 220 3% 15%;
  --_shadow-strength: 1%;
  --_inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--_shadow-strength) + 9%));
  --shadow-2: 
    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-3: 
    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-4: 
    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-5: 
    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-6: 
    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%));
  --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--_shadow-strength) + 9%));
  --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--_shadow-strength) + 9%)), var(--_inner-shadow-highlight);
  --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--_shadow-strength) + 9%)), var(--_inner-shadow-highlight);
  --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--_shadow-strength) + 9%)), var(--_inner-shadow-highlight);
  --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--_shadow-strength) + 9%)), var(--_inner-shadow-highlight);

  /*** Shadow/Elevation/Layer ***/
  --elevation-04: var(--inner-shadow-4);
  --elevation-03: var(--inner-shadow-3);
  --elevation-02: var(--inner-shadow-2);
  --elevation-01: var(--inner-shadow-1);
  --elevation-none: none;
  --elevation-base: none;
  --elevation-0: none;
  --elevation-1: var(--shadow-1);
  --elevation-2: var(--shadow-2);
  --elevation-3: var(--shadow-3);
  --elevation-4: var(--shadow-4);
  --elevation-5: var(--shadow-5);
  --elevation-6: var(--shadow-6);

  --layer-deep: -999999;
  --layer-below: -1;
  --layer-base: 1;
  --layer-1: 10;
  --layer-2: 20;
  --layer-3: 30;
  --layer-4: 40;
  --layer-5: 50;
  --layer-mask: 200;
  --layer-dropdown: 300;
  --layer-sticky: 300;
  --layer-overlay: 600;
  --layer-spinner: 700;
  --layer-popover: 800;
  --layer-top: 2147483647;

  /*** Backdrop Blur ***/
  --blur-none: blur(0);
  --blur-xs: blur(4px);
  --blur-s: blur(8px);
  --blur-m: blur(16px);
  --blur-l: blur(30px);
  --blur-xl: blur(40px);
}

@media (--OSdark) {
  :where(html) {
    --shadow-color: 220 40% 2%;
    --_shadow-strength: 25%;
    --_inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
  }
}