diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css
index 44e69f6..46d79c9 100755
--- a/src/assets/css/src/0.2.variables.css
+++ b/src/assets/css/src/0.2.variables.css
@@ -24,14 +24,17 @@
   --color-black-70: hsla(0, 0%, 10%, .7); /* Black 70 */
   --color-black-100: hsla(0, 0%, 10%, 1); /* Black 100 */
   --color-black: var(--color-black-100); /* Black */
-  --color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */
-  --color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */
-  --color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */
-  --color-primary-50: hsla(177, 100%, 29%, .5); /* Focus 50% */
-  --color-primary-70: hsla(177, 100%, 29%, .7); /* Focus 70% */
-  --color-primary-100: hsla(177, 100%, 29%, 1); /* Focus 100% */
+  --color-primary-h: 177;
+  --color-primary-s: 100%;
+  --color-primary-l: 29%;
+  --color-primary-10: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .1); /* Focus 10% */
+  --color-primary-20: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2); /* Focus 20% */
+  --color-primary-40: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .4); /* Focus 40% */
+  --color-primary-50: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .5); /* Focus 50% */
+  --color-primary-70: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .7); /* Focus 70% */
+  --color-primary-100: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 1); /* Focus 100% */
   --color-primary: var(--color-primary-100); /* Focus */
-  --color-primary-hover: hsla(177, 100%, 22%, 1); /* Focus - Accent */
+  --color-primary-hover: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 7%), 1); /* Focus - Accent */
   --color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
   --color-brand: var(--color-brand-100); /* Brand */
   --color-background: var(--color-white);