Use var() notation

docs/_sass/index.sass

@@ -11,14 +11,14 @@
     &:hover
       color: $blue
       strong
-        color: $link
+        color: var(--#{$prefix}-link)
   strong
     font-weight: $weight-semibold
   .title
     strong
       color: $primary
   .subtitle
-    color: $border-hover !important
+    color: var(--#{$prefix}-border-hover) !important
     strong
       color: currentColor
   &:not(:last-child)
@@ -41,7 +41,7 @@
     margin-right: auto
 
 .bd-index-custom-title
-  color: $border-hover
+  color: var(--#{$prefix}-border-hover)
 
 .bd-index-custom-example
   padding: 1rem
@@ -77,28 +77,28 @@
   .button
     &.is-primary
       background-color: $mauve
-      color: $scheme-main
+      color: var(--#{$prefix}-scheme-main)
       &:hover
         background-color: darken($mauve, 2.5%)
       &:active
         background-color: darken($mauve, 5%)
     &.is-link
       background-color: $pink
-      color: $scheme-main
+      color: var(--#{$prefix}-scheme-main)
       &:hover
         background-color: darken($pink, 2.5%)
       &:active
         background-color: darken($pink, 5%)
   +selection
     background-color: $pink
-    color: $scheme-main
+    color: var(--#{$prefix}-scheme-main)
 
 // Fullscreen
 
 .bd-index-fullscreen
   .tabs
     a
-      color: $border-hover !important
+      color: var(--#{$prefix}-border-hover) !important
 
 // Columns
 
@@ -161,13 +161,13 @@
     transition-duration: $speed * 2
     transition-property: color
   .subtitle
-    color: $border-hover
+    color: var(--#{$prefix}-border-hover)
     position: relative
     strong
       color: currentColor
   &::before
     +overlay
-    background-color: $scheme-main-bis
+    background-color: var(--#{$prefix}-scheme-main-bis)
     border-radius: $radius-large
     content: ""
     display: block
@@ -182,7 +182,7 @@
       opacity: 1
       transform: scale(1)
     .subtitle
-      color: $text
+      color: var(--#{$prefix}-text)
   &:nth-child(1):hover
     .title
       color: $orange
@@ -191,10 +191,10 @@
       color: $success
   &:nth-child(3):hover
     .title
-      color: $link
+      color: var(--#{$prefix}-link)
   &:nth-child(4):hover
     .title
-      color: $scheme-invert
+      color: var(--#{$prefix}-scheme-invert)
 
 .bd-focus-icon
   position: relative
@@ -292,7 +292,7 @@
       color: $black-ter
     &.is-success,
     &.is-error
-      color: $scheme-main
+      color: var(--#{$prefix}-scheme-main)
       pointer-events: none
       text-decoration: none
     &.is-success
@@ -301,10 +301,10 @@
       background-color: $red
   \::-moz-selection
     background: $yellow
-    color: $scheme-invert-ter
+    color: var(--#{$prefix}-scheme-invert-ter)
   \::selection
     background: $yellow
-    color: $scheme-invert-ter
+    color: var(--#{$prefix}-scheme-invert-ter)
 
 .intro-buttons
   margin-top: 1.5rem
@@ -313,7 +313,7 @@
     padding-right: 1.375em
 
 .intro-video
-  background-color: $scheme-main
+  background-color: var(--#{$prefix}-scheme-main)
   margin-left: auto
   margin-right: auto
   max-width: 640px
@@ -384,12 +384,12 @@
     width: 100%
 
 .intro-author
-  color: $text-light
+  color: var(--#{$prefix}-text-light)
   font-size: $size-small
   margin-top: 40px
   text-align: center
   a
-    color: $text-strong
+    color: var(--#{$prefix}-text-strong)
     &:hover
       text-decoration: underline
   span