Use var() notation

docs/_sass/global.sass

@@ -16,10 +16,10 @@ svg
   strong
     color: currentColor
   a
-    border-bottom: 1px solid rgba($scheme-main, 0.5)
+    border-bottom: 1px solid rgba(var(--#{$prefix}-scheme-main), 0.5)
     padding-bottom: 2px
     &:hover
-      border-bottom-color: $scheme-main
+      border-bottom-color: var(--#{$prefix}-scheme-main)
   span
     margin: 0 0.25em
     opacity: 0.5
@@ -99,8 +99,8 @@ $carbon-poweredby-height: 20px
   padding: 0
   position: relative
   &:hover
-    background-color: $scheme-main
-    box-shadow: 0 0 0 $carbon-shadow-size $scheme-main
+    background-color: var(--#{$prefix}-scheme-main)
+    box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}-scheme-main)
   +tablet
     width: $carbon-width
 
@@ -138,20 +138,20 @@ $carbon-poweredby-height: 20px
       width: $carbon-image-width
     &:hover
       & + .carbon-text
-        color: $link
+        color: var(--#{$prefix}-link)
     &:active
       opacity: 0.8
   .carbon-text
     display: block
-    color: $text-strong
+    color: var(--#{$prefix}-text-strong)
     line-height: 20px
     min-height: $carbon-height
     padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
     &:hover
-      color: $link
+      color: var(--#{$prefix}-link)
   .carbon-poweredby
     bottom: 0
-    color: $border-hover
+    color: var(--#{$prefix}-border-hover)
     display: inline
     font-size: $size-small
     line-height: $carbon-poweredby-height