diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss
index 0631e7b46..3e674d4b5 100644
--- a/src/assets/stylesheets/Button.scss
+++ b/src/assets/stylesheets/Button.scss
@@ -31,7 +31,7 @@
   }
 
   &:focus-visible {
-    border: 3px solid $rpf-brand-raspberry;
+    border: 3px solid var(--editor-focus-color);
     outline: none;
   }
 
@@ -219,10 +219,11 @@
     &:focus-visible {
       background-clip: padding-box;
       border: 2px solid transparent;
-      outline: 3px solid $rpf-brand-raspberry;
+      outline: 3px solid var(--editor-focus-color);
     }
 
-    &.btn--secondary, &.btn--secondary:hover {
+    &.btn--secondary,
+    &.btn--secondary:hover {
       border-color: var(--rpf-alert-error);
       --rpf-button-secondary-border-color-hover: var(--rpf-alert-error);
     }
@@ -276,7 +277,7 @@
     outline: none;
 
     .btn {
-      border: 3px solid $rpf-brand-raspberry;
+      border: 3px solid var(--editor-focus-color);
     }
   }
 
@@ -308,7 +309,7 @@
   --rpf-button-primary-text-color: var(--rpf-white);
 
   // Secondary
-  --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry);
+  --rpf-button-secondary-background-color-focus: var(--editor-focus-color);
   --rpf-button-secondary-background-color-hover: var(
     --editor-color-theme-tertiary
   );
@@ -340,7 +341,7 @@
   --rpf-button-primary-text-color: var(--rpf-black);
 
   // Secondary
-  --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry);
+  --rpf-button-secondary-background-color-focus: var(--editor-focus-color);
   --rpf-button-secondary-background-color-hover: var(--editor-color-outline);
   --rpf-button-secondary-background-color-active: var(--rpf-navy-200);
   --rpf-button-secondary-background-color-disabled: var(--editor-color-layer-3);
diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
index 6e7ae5989..aeb0903c3 100644
--- a/src/assets/stylesheets/EditorPanel.scss
+++ b/src/assets/stylesheets/EditorPanel.scss
@@ -24,7 +24,7 @@
       position: absolute;
       z-index: 201;
       inset: 4px;
-      outline: 4px solid var(--rpf-input-outline-color);
+      outline: 4px solid var(--editor-focus-color);
       pointer-events: none;
     }
 
diff --git a/src/assets/stylesheets/Global.scss b/src/assets/stylesheets/Global.scss
index 663b7875a..0b5711847 100644
--- a/src/assets/stylesheets/Global.scss
+++ b/src/assets/stylesheets/Global.scss
@@ -14,7 +14,7 @@
 
 a:not(:where(.rpf-button)) {
   &:focus-visible {
-    outline: 3px solid var(--rpf-raspberry-800);
+    outline: 3px solid var(--editor-focus-color);
   }
 }
 
@@ -22,7 +22,7 @@ button:not(:where(.rpf-button)) {
   all: initial;
   cursor: pointer;
   &:focus-visible {
-    outline: 3px solid var(--rpf-raspberry-800);
+    outline: 3px solid var(--editor-focus-color);
   }
 }
 
diff --git a/src/assets/stylesheets/HtmlRunner.scss b/src/assets/stylesheets/HtmlRunner.scss
index 8078ef75f..fdda40540 100644
--- a/src/assets/stylesheets/HtmlRunner.scss
+++ b/src/assets/stylesheets/HtmlRunner.scss
@@ -40,7 +40,7 @@ a.htmlrunner-link {
 
   &:focus-visible {
     background-color: inherit;
-    border: 3px solid $rpf-brand-raspberry;
+    border: 3px solid var(--editor-focus-color);
     outline: none;
   }
 
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 32c680570..47e2fad0a 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -349,7 +349,7 @@
       border: 0;
 
       &:focus-visible {
-        border: 3px solid $rpf-brand-raspberry;
+        border: 3px solid var(--editor-focus-color);
         outline: none;
       }
     }
diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 4cae26ed2..681145b44 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -58,6 +58,7 @@
   --editor-color-text: var(--rpf-text-primary);
   --editor-color-text-secondary: var(--rpf-text-secondary);
   --editor-color-tab-background: var(--rpf-off-white);
+  --editor-focus-color: var(--rpf-raspberry-800);
 
   --rpf-files-list-item-active: var(--editor-color-theme-tertiary);
   --rpf-files-list-item-hover: var(--editor-color-theme-tertiary);
@@ -88,6 +89,7 @@
   --editor-color-theme-tertiary: var(--rpf-navy-900);
   --editor-color-text: var(--rpf-white);
   --editor-color-text-secondary: var(--rpf-text-secondary-darkmode);
+  --editor-focus-color: var(--rpf-raspberry-800);
 
   --rpf-files-list-item-active: var(--editor-color-layer-2);
   --rpf-files-list-item-hover: var(--editor-color-layer-2);
@@ -151,7 +153,6 @@
     white 30%
   );
 
-  --rpf-button-background-color-focus: var(--editor-color-theme);
   --rpf-button-background-color-disabled: var(--rpf-grey-500);
 
   // Some parts of the button are not currently themeable via dedicated custom properties yet
diff --git a/src/assets/stylesheets/Modal.scss b/src/assets/stylesheets/Modal.scss
index 6cb3235d9..d2b9c2b50 100644
--- a/src/assets/stylesheets/Modal.scss
+++ b/src/assets/stylesheets/Modal.scss
@@ -38,7 +38,7 @@
   }
 
   &:focus-visible {
-    border: 3px solid $rpf-brand-raspberry;
+    border: 3px solid var(--editor-focus-color);
     outline: none;
   }
 }
diff --git a/src/assets/stylesheets/SelectButtons.scss b/src/assets/stylesheets/SelectButtons.scss
index 37e48fca4..c5704402f 100644
--- a/src/assets/stylesheets/SelectButtons.scss
+++ b/src/assets/stylesheets/SelectButtons.scss
@@ -82,5 +82,5 @@
 }
 
 .select-buttons__button:focus-visible + .select-buttons__label {
-  outline: 3px solid $rpf-brand-raspberry;
+  outline: 3px solid var(--editor-focus-color);
 }
diff --git a/src/assets/stylesheets/Tabs.scss b/src/assets/stylesheets/Tabs.scss
index 636bca3c3..d7fb6464e 100644
--- a/src/assets/stylesheets/Tabs.scss
+++ b/src/assets/stylesheets/Tabs.scss
@@ -53,7 +53,7 @@
 
       &:focus-visible {
         outline-offset: -3px;
-        outline: 3px solid $rpf-brand-raspberry;
+        outline: 3px solid var(--editor-focus-color);
       }
 
       &:focus:after {
@@ -87,7 +87,7 @@
         border: 0;
 
         svg {
-          border: 3px solid $rpf-brand-raspberry;
+          border: 3px solid var(--editor-focus-color);
         }
       }
     }