[class*=box-shadow] {
    box-shadow: 
      /* direct-shadow */ 
      var(--box-shadow-offset-x, 0)
      var(--box-shadow-offset-y, 1px) 
      var(--box-shadow-blur-radius, 3px)
      var(--box-shadow-spread-radius, 0) 
      var(--box-shadow-direct-color, rgba(0,0,0,0.2))
      ,
      /* ambient shadow */ 
      var(--box-shadow-ambient-offset-x, 0)
      var(--box-shadow-ambient-offset-y, 1px) 
      var(--box-shadow-ambient-blur-radius, 3px)
      var(--box-shadow-ambient-spread-radius, 0) 
      var(--box-shadow-ambient-color, transparent);
}
.box-shadow--level-1 {
    --box-shadow-offset-y: 1px;  
    --box-shadow-blur-radius: 3px;  
    --box-shadow-ambient-offset-y: 1px;  
    --box-shadow-ambient-blur-radius: 3px;  
}
.box-shadow--level-2 {
    --box-shadow-offset-y: 3px;  
    --box-shadow-blur-radius: 11px;  
    --box-shadow-ambient-offset-y: 2px;  
    --box-shadow-ambient-blur-radius: 5px;  
}
.box-shadow--level-3 {
    --box-shadow-offset-y: 7px;  
    --box-shadow-blur-radius: 19px;  
    --box-shadow-ambient-offset-y: 3px;  
    --box-shadow-ambient-blur-radius: 7px;  
}
.box-shadow--level-4 {
    --box-shadow-offset-y: 11px;  
    --box-shadow-blur-radius: 27px;  
    --box-shadow-ambient-offset-y: 4px;  
    --box-shadow-ambient-blur-radius: 9px;  
}
.box-shadow--level-5 {
    --box-shadow-offset-y: 15px;  
    --box-shadow-blur-radius: 35px;  
    --box-shadow-ambient-offset-y: 5px;  
    --box-shadow-ambient-blur-radius: 11px;  
}