diff --git a/src/_box-shadow.css b/src/_box-shadow.css
index a41391e..c5caecd 100644
--- a/src/_box-shadow.css
+++ b/src/_box-shadow.css
@@ -2,6 +2,8 @@
 
   BOX-SHADOW
   Docs: http://tachyons.io/docs/themes/box-shadow/
+
+  REF
   Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
 
   Media Query Extensions:
@@ -11,74 +13,109 @@
 
  */
 
-.shadow-border { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
-.shadow-border-light  { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
-.shadow-border-solid  { box-shadow: inset 0 0 1px 0 currentColor; }
-.shadow-border-2 { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
-.shadow-border-light-2 {  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
-.shadow-border-solid-2 {  box-shadow: inset 0 0 2px 0 currentColor; }
-
-.shadow-1 { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
-.shadow-2 {  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
-.shadow-3 {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
-.shadow-4 {  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
-.shadow-5 {  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
-.shadow-6 {  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
-.shadow-7 {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
-.shadow-8 {  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
-
-
-@media (--breakpoint-small) {
-  .shadow-border-s {  box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
-  .shadow-border-light-s  { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
-  .shadow-border-solid-s  { box-shadow: inset 0 0 1px 0 currentColor; }
-  .shadow-border-2-s { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
-  .shadow-border-light-2-s {  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
-  .shadow-border-solid-2-s {  box-shadow: inset 0 0 2px 0 currentColor; }
-
-  .shadow-1-s { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
-  .shadow-2-s {  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
-  .shadow-3-s {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
-  .shadow-4-s {  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
-  .shadow-5-s {  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
-  .shadow-6-s {  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
-  .shadow-7-s {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
-  .shadow-8-s {  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
+.shadow { 
+  box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5))); 
 }
 
-@media (--breakpoint-medium) {
-  .shadow-border-m {  box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
-  .shadow-border-light-m  { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
-  .shadow-border-solid-m  { box-shadow: inset 0 0 1px 0 currentColor; }
-  .shadow-border-2-m { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
-  .shadow-border-light-2-m {  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
-  .shadow-border-solid-2-m {  box-shadow: inset 0 0 2px 0 currentColor; }
-
-  .shadow-1-m { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
-  .shadow-2-m {  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
-  .shadow-3-m {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
-  .shadow-4-m {  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
-  .shadow-5-m {  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
-  .shadow-6-m {  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
-  .shadow-7-m {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
-  .shadow-8-m {  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
+.shadow-hover:hover,
+.shadow-hover:focus { 
+  --shadow-opacity: .15;
 }
 
-@media (--breakpoint-large) {
-  .shadow-border-l {  box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
-  .shadow-border-light-l  { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
-  .shadow-border-solid-l  { box-shadow: inset 0 0 1px 0 currentColor; }
-  .shadow-border-2-l { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
-  .shadow-border-light-2-l {  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
-  .shadow-border-solid-2-l {  box-shadow: inset 0 0 2px 0 currentColor; }
+/* 
+ * TODO: potential pattern 
+  .shadow-hover:hover {
+    --shadow-opacity: .09;
+    --shadow-x: 1px;
+    --shadow-y: 1px;
+    --shadow-blur: 1px;
+    --shadow-spread: 1px;
+    --shadow-multiplier: 2;
+  }
+*/
 
-  .shadow-1-l { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
-  .shadow-2-l {  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
-  .shadow-3-l {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
-  .shadow-4-l {  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
-  .shadow-5-l {  box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
-  .shadow-6-l {  box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
-  .shadow-7-l {  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
-  .shadow-8-l {  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
+/* Box shadow based borders */
+ 
+.shadow-border-1 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); }
+.shadow-border-2 { box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor; }
+.shadow-border-3 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125)); }
+.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125))}
+.shadow-border-5 { box-shadow: inset 0 0 2px 0 currentColor; }
+
+.shadow-1 { 
+  box-shadow: 
+    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
+    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
+    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
+    0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
+    0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); 
 }
 
+.shadow-2 {  
+  box-shadow: 
+    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
+    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
+    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 
+    0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); 
+}
+
+.shadow-3 {  
+  --shadow-opacity: .11;
+  box-shadow: 
+    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
+    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
+    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
+    0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
+    0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 
+    0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)); 
+}
+
+.shadow-4 {  
+  --shadow-opacity: .05;
+  box-shadow: 
+    0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.25) * 5)), 
+    0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 4)),
+    0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.15) * 3)), 
+    0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.10) * 2)), 
+    0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.05)); 
+}
+
+.shadow-5 {  
+  --shadow-opacity: .08;
+  box-shadow: 
+    0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.08) * 1)), 
+    0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.12) * 1.5)), 
+    0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.16) * 2)), 
+    0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 2.5)); 
+}
+
+.shadow-6 {  
+  --shadow-opacity: .07;
+  box-shadow: 
+    0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
+    0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
+    0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
+    0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
+    0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)), 
+    0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)); 
+}
+
+.shadow-7 {  
+  --shadow-opacity: .11;
+  box-shadow: 
+    0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
+    0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
+    0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
+    0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)), 
+    0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)); 
+}
+
+.shadow-8 {  
+  --shadow-opacity: .09;
+  box-shadow: 
+    0 2px 1px rgb(var(--shadow-color, 0 0 0) / 0.09), 
+    0 4px 2px rgb(var(--shadow-color, 0 0 0) / 0.09), 
+    0 8px 4px rgb(var(--shadow-color, 0 0 0) / 0.09), 
+    0 16px 8px rgb(var(--shadow-color, 0 0 0) / 0.09), 
+    0 32px 16px rgb(var(--shadow-color, 0 0 0) / 0.09); 
+}