Use var() notation

docs/_sass/footer.sass

@@ -1,5 +1,5 @@
 .bd-footer-title
-  color: $text-strong
+  color: var(--#{$prefix}-text-strong)
   font-size: 1.25rem
   line-height: 1.25
   margin-bottom: 0.5rem
@@ -9,7 +9,7 @@
     font-weight: $weight-semibold
 
 .bd-footer-subtitle
-  color: $border-hover
+  color: var(--#{$prefix}-border-hover)
   margin-top: -0.5rem
   transition-duration: $speed
   transition-property: color
@@ -29,7 +29,7 @@
       width: 100%
 
 .bd-footer-tsp
-  color: $border-hover
+  color: var(--#{$prefix}-border-hover)
   margin-top: 1.5rem
 
 %bd-footer-box
@@ -42,7 +42,7 @@
 
 .bd-footer-support
   @extend %bd-footer-box
-  border-top: 2px solid $scheme-main-ter
+  border-top: 2px solid var(--#{$prefix}-scheme-main-ter)
   box-shadow: none
   padding: 3rem
   .bd-footer-title
@@ -63,7 +63,7 @@
     padding: 0.75rem 1.5rem
 
 .bd-footer-donation-title
-  color: $border-hover
+  color: var(--#{$prefix}-border-hover)
   margin-bottom: 0.5rem
   strong
     color: currentColor
@@ -103,11 +103,11 @@ $star-figure-height: 156px
   +tablet
     width: calc(33.3333% - 2rem)
   &:hover
-    box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1)
+    box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}-scheme-invert), 0.1)
     transform: translateY(-0.5rem)
     .bd-footer-title,
     .bd-footer-subtitle
-      color: $link
+      color: var(--#{$prefix}-link)
   &.bd-is-expo,
   &.bd-is-love
     padding-bottom: $star-figure-height
@@ -144,10 +144,10 @@ $star-figure-height: 156px
   a
     color: currentColor
     &:hover
-      color: $link
+      color: var(--#{$prefix}-link)
 
 .bd-footer-link-title
-  color: $text-strong
+  color: var(--#{$prefix}-text-strong)
   font-size: 1.25rem
   font-weight: $weight-semibold
   &:not(:first-child)
@@ -158,7 +158,7 @@ $star-figure-height: 156px
   &.bd-is-more
     font-size: 0.875rem
     a:not(:hover)
-      color: $border-hover
+      color: var(--#{$prefix}-border-hover)
   &.bd-has-subtitle
     a
       align-items: center
@@ -174,7 +174,7 @@ $star-figure-height: 156px
         font-style: normal
       &:not(:hover)
         em
-          color: $border-hover
+          color: var(--#{$prefix}-border-hover)
       +mobile
         flex-wrap: wrap
         margin-top: 1rem