Only use derived variables

docs/_sass/main.sass

@@ -5,7 +5,7 @@
 .bd-figure
   +block
   align-items: center
-  border: 2px solid $white-ter
+  border: 2px solid $scheme-main-ter
   border-radius: $radius
   display: flex
   flex-direction: column
@@ -14,7 +14,7 @@
     margin: 1em
   figcaption
     align-self: stretch
-    background-color: $white-ter
+    background-color: $scheme-main-ter
     color: $text-light
     font-size: $size-small
     padding: 1em
@@ -33,7 +33,7 @@
 
 .bd-prev-next
   align-items: flex-start
-  color: $grey-light
+  color: $border-hover
   display: none
   flex-grow: 0
   flex-shrink: 0
@@ -87,7 +87,7 @@
       overflow: visible
       ul,
       a
-        border-bottom-color: $white-ter
+        border-bottom-color: $scheme-main-ter
         border-bottom-width: 2px
       a
         margin-bottom: -2px
@@ -109,7 +109,7 @@
 
 .bd-side,
 .bd-side-background
-  background-color: $white-bis
+  background-color: $scheme-main-bis
 
 .bd-side
   position: relative
@@ -128,7 +128,7 @@
       margin-bottom: 0.5em
     &.is-past
       a
-        color: $grey-light
+        color: $border-hover
     &.is-current
       a
         color: $link
@@ -156,7 +156,7 @@
 .bd-category-toggle
   +overlay
   align-items: center
-  color: $grey-light
+  color: $border-hover
   display: flex
   justify-content: flex-end
   .icon
@@ -201,7 +201,7 @@
       top: 0
 
 .bd-anchors-title
-  color: $grey-light
+  color: $border-hover
   font-size: 0.875rem
   font-weight: $weight-semibold
   margin-bottom: 0.5rem
@@ -229,7 +229,7 @@
   .bd-duo
     display: flex
   .bd-lead
-    background-color: $white
+    background-color: $scheme-main
     overflow: hidden
     flex-grow: 1
     flex-shrink: 1