diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css
index fe44c76de..eb84701f1 100644
--- a/app/assets/stylesheets/actiontext-lexical.css
+++ b/app/assets/stylesheets/actiontext-lexical.css
@@ -45,7 +45,7 @@
       &:is([type="submit"]) {
         --btn-background: var(--card-color, var(--color-link));
         --btn-color: var(--color-ink-inverted);
-        --outline-color: var(--card-color, var(--color-link));
+        --focus-ring-color: var(--card-color, var(--color-link));
       }
     }
 
@@ -55,8 +55,6 @@
   }
 
   .lexical-editor__content {
-    --outline-size: max(2px, 0.08em);
-
     margin: var(--block-space-half) 0;
     min-block-size: calc(7lh + var(--block-space));
     outline: 0;
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 2cc074617..cc8e2186b 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -55,14 +55,13 @@
     --btn-color: inherit;
     --btn-icon-size: 100%;
     --btn-padding: 0;
-    --outline-size: 0;
   }
 
   .btn--link {
     --btn-background: var(--color-link);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-link);
+    --focus-ring-color: var(--color-link);
   }
 
   .btn--circle,
@@ -85,14 +84,14 @@
     --btn-background: var(--color-negative);
     --btn-border-color: var(--color-negative);
     --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-negative);
+    --focus-ring-color: var(--color-negative);
   }
 
   .btn--positive {
     --btn-background: var(--color-positive);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-ink-inverted);
-    --outline-color: var(--color-positive);
+    --focus-ring-color: var(--color-positive);
   }
 
   .btn--success {
@@ -118,7 +117,7 @@
     --btn-background: var(--color-ink);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-canvas);
-    --outline-color: var(--color-ink);
+    --focus-ring-color: var(--color-ink);
   }
 
   /* Toggleable buttons
@@ -153,7 +152,7 @@
       --btn-background: var(--color-ink);
       --btn-border-color: var(--color-ink);
       --btn-color: var(--color-ink-inverted);
-      --outline-color: var(--color-ink);
+      --focus-ring-color: var(--color-ink);
 
       .checked {
         display: block;
diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css
index 2d7f8d145..0182f6497 100644
--- a/app/assets/stylesheets/expander.css
+++ b/app/assets/stylesheets/expander.css
@@ -98,7 +98,6 @@
   --btn-border-size: 0;
   --btn-font-weight: 500;
   --btn-padding: var(--inline-space-half) var(--inline-space);
-  --outline-color: transparent;
 
   inline-size: calc(100% + var(--inline-space-double));
   margin-inline-start: calc(-1 * var(--inline-space));
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index a219b3575..6643ed065 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -132,9 +132,7 @@
 
     &:has(:focus-visible) {
       .switch__btn {
-        box-shadow:
-          0 0 0 var(--outline-size) var(--color-canvas),
-          0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
+        outline: var(--focus-ring-size) solid var(--focus-ring-color);
       }
     }
   }
@@ -150,6 +148,7 @@
     border-radius: 2em;
     cursor: pointer;
     inset: 0;
+    outline-offset: var(--focus-ring-offset);
     position: absolute;
     transition: 150ms ease;
 
@@ -195,8 +194,6 @@
       --input-border-radius: 0;
       --input-background: transparent;
       --input-border-size: 0;
-      --outline-size: 0;
-      --outline-color: transparent;
 
       inline-size: 100%;
       outline: 0;
@@ -223,7 +220,6 @@
     --input-border-radius: 0;
     --input-border-size: 0;
     --input-padding: 0;
-    --outline-size: 0;
 
     color: inherit;
     font-size: inherit;
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 216afb5e0..1b158f9e6 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -80,7 +80,6 @@
     --btn-border-size: 0;
     --btn-font-weight: 500;
     --btn-padding: var(--inline-space-half) 0 var(--inline-space-half) var(--inline-space);
-    --outline-color: transparent;
 
     flex: 1 1 auto;
     justify-content: start;
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 1405d3895..f232c925f 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -86,6 +86,11 @@
       transform-origin: left center;
     }
 
+    &:has(.input:focus) {
+      outline: var(--focus-ring-size) solid var(--focus-ring-color);
+      outline-offset: var(--focus-ring-offset);
+    }
+
     .reaction__form-label:focus {
       outline: none;
     }
@@ -95,7 +100,6 @@
     --input-background: transparent;
     --input-border-size: 0;
     --input-padding: 0;
-    --outline-size: 0;
 
     box-shadow: none;
     display: inherit;
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index dd4459715..9f4966f7c 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -94,8 +94,6 @@
     --input-border-color: transparent;
     --input-border-radius: 0.3em;
     --input-color: var(--color-terminal-text);
-    --outline-size: 0;
-    --outline-color: transparent;
 
     accent-color: var(--color-terminal-text);
     caret-color: var(--color-terminal-text);
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index dfd22536d..7b47b61da 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -63,8 +63,6 @@
   /* ------------------------------------------------------------------------ */
 
   .tray__expander {
-    --outline-size: 0;
-
     align-self: stretch;
     background: transparent;
     border: 0;