diff --git a/qt/aqt/data/web/css/reviewer-bottom.scss b/qt/aqt/data/web/css/reviewer-bottom.scss
index b6a02ee5b..1cb56868b 100644
--- a/qt/aqt/data/web/css/reviewer-bottom.scss
+++ b/qt/aqt/data/web/css/reviewer-bottom.scss
@@ -1,10 +1,11 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "sass/card-counts";
+ @use "vars" as *;
+ @use "sass/card-counts";
 
 :root {
-    --focus-color: #0078d7;
+    --focus-color: color(button-focus);
 
     .isMac {
         --focus-color: rgba(0 103 244 / 0.247);
diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss
index c98a5e231..907a87c04 100644
--- a/sass/_button-mixins.scss
+++ b/sass/_button-mixins.scss
@@ -1,5 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+@use "vars" as *;
 @use "fusion-vars";
 
 @import "bootstrap/scss/functions";
@@ -131,8 +132,7 @@ $btn-base-color-night: fusion-vars.$button-border;
     }
 }
 
-// should be similar to -webkit-focus-ring-color
-$focus-color: rgba(21 97 174);
+$focus-color: color(shadow-focus, default);
 
 @function down-arrow($color) {
     @return url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
diff --git a/sass/bootstrap-tooltip.scss b/sass/bootstrap-tooltip.scss
index a4d57e81d..5860e7e16 100644
--- a/sass/bootstrap-tooltip.scss
+++ b/sass/bootstrap-tooltip.scss
@@ -1,6 +1,8 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
+@use "vars" as *;
+
 $tooltip-padding-y: 0.45rem;
 $tooltip-padding-x: 0.65rem;
 $tooltip-max-width: 300px;
@@ -19,7 +21,7 @@ $tooltip-max-width: 300px;
     // the default code color in tooltips is difficult to read; we'll probably
     // want to add more of our own styling in the future
     code {
-        color: #ffaaaa;
+        color: palette(red, 0);
         direction: inherit;
     }
 }
diff --git a/sass/buttons.scss b/sass/buttons.scss
index 70a28e363..32c58fcfb 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -1,7 +1,8 @@
+@use "vars" as *;
 @use "fusion-vars";
 
 :root {
-    --focus-color: #0078d7;
+    --focus-color: color(button-focus);
 
     .isMac {
         --focus-color: rgba(0 103 244 / 0.247);
diff --git a/ts/reviewer/reviewer.scss b/ts/reviewer/reviewer.scss
index fbf3b2641..afc770917 100644
--- a/ts/reviewer/reviewer.scss
+++ b/ts/reviewer/reviewer.scss
@@ -1,8 +1,9 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+@use "vars" as *;
 
 hr {
-    background-color: #ccc;
+    background-color: palette(gray, 4);
 }
 
 body {
diff --git a/ts/tag-editor/AutocompleteItem.svelte b/ts/tag-editor/AutocompleteItem.svelte
index 167b70cb4..a6d24f71f 100644
--- a/ts/tag-editor/AutocompleteItem.svelte
+++ b/ts/tag-editor/AutocompleteItem.svelte
@@ -37,6 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
+    @use "sass/vars" as *;
     @use "sass/button-mixins" as button;
 
     .autocomplete-item {
@@ -74,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         color: black;
 
         &.selected {
-            background-color: #e9ecef;
-            border-color: #e9ecef;
+            background-color: palette(gray, 1);
+            border-color: palette(gray, 1);
         }
     }