diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
index 24465565d..40b45c8ff 100644
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -249,10 +249,10 @@
     <a href="/docs/theming/borders">Borders</a>
   </li>
   <li>
-    <a href="/docs/theming/corners">Corners</a>
+    <a href="/docs/theming/shadows">Shadows</a>
   </li>
   <li>
-    <a href="/docs/theming/shadows">Shadows</a>
+    <a href="/docs/theming/motion">Motion</a>
   </li>
   <li>
     <a href="/docs/theming/extras">Extras</a>
diff --git a/docs/docs/theming/color.md b/docs/docs/theming/color.md
index 267c6dfe6..2de022128 100644
--- a/docs/docs/theming/color.md
+++ b/docs/docs/theming/color.md
@@ -504,10 +504,10 @@ Surfaces are background layers that other components and content rest on. Surfac
 
 | Custom Property               |  Preview                        |
 | ----------------------------- | ------------------------------- |
-| `--wa-color-surface-raised`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-level-1)"></div></div> |
-| `--wa-color-surface-default`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-surface-default)"></div></div> |
-| `--wa-color-surface-lowered`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow:var(--wa-shadow-inset)"></div></div> |
-| `--wa-color-surface-border`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-surface-border)"></div></div> |
+| `--wa-color-surface-raised`   | <div class="color-swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-level-1)"></div> |
+| `--wa-color-surface-default`  | <div class="color-swatch" style="background-color: var(--wa-color-surface-default)"></div> |
+| `--wa-color-surface-lowered`  | <div class="color-swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow:var(--wa-shadow-inset)"></div> |
+| `--wa-color-surface-border`   | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-surface-border)"></div> |
 
 ### Text
 
@@ -515,9 +515,9 @@ Text colors are used for standard text elements. We recommend a minimum 4.5:1 co
 
 | Custom Property               |  Preview                        |
 | ----------------------------- | ------------------------------- |
-| `--wa-color-text-normal`   | <div class="color-preview"><div class="color-swatch text-only" style="color: var(--wa-color-text-normal)">AaBb</div></div> |
-| `--wa-color-text-quiet`  | <div class="color-preview"><div class="color-swatch text-only" style="color: var(--wa-color-text-quiet)">AaBb</div></div> |
-| `--wa-color-text-link`  | <div class="color-preview"><div class="color-swatch text-only" style="color: var(--wa-color-text-link)">AaBb</div></div> |
+| `--wa-color-text-normal`   | <div class="color-swatch text-only" style="color: var(--wa-color-text-normal)">AaBb</div> |
+| `--wa-color-text-quiet`  | <div class="color-swatch text-only" style="color: var(--wa-color-text-quiet)">AaBb</div> |
+| `--wa-color-text-link`  | <div class="color-swatch text-only" style="color: var(--wa-color-text-link)">AaBb</div> |
 
 ### Overlays
 
@@ -525,8 +525,8 @@ Overlays provide a backdrop to isolate content, often allowing background contex
 
 | Custom Property               |  Preview                        |
 | ----------------------------- | ------------------------------- |
-| `--wa-color-overlay-modal`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-overlay-modal)"></div></div> |
-| `--wa-color-overlay-inline`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-overlay-inline)"></div></div> |
+| `--wa-color-overlay-modal`   | <div class="color-swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
+| `--wa-color-overlay-inline`  | <div class="color-swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
 
 ### Shadow
 
@@ -534,7 +534,7 @@ Shadows indicate elevation. `--wa-color-shadow` is used to construct your theme'
 
 | Custom Property               |  Preview                        |
 | ----------------------------- | ------------------------------- |
-| `--wa-color-shadow`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-shadow)"></div></div> |
+| `--wa-color-shadow`   | <div class="color-swatch" style="background-color: var(--wa-color-shadow)"></div> |
 
 ### Interactions
 
@@ -544,7 +544,7 @@ Web Awesome uses a single, consistent focus color for predictable keyboard navig
 
 | Custom Property               |  Preview                        |
 | ----------------------------- | ------------------------------- |
-| `--wa-color-focus`   | <div class="color-preview"><div class="color-swatch" style="outline: var(--wa-focus-ring)"></div></div> |
+| `--wa-color-focus`   | <div class="color-swatch" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
 
 #### Hover and Active
 
@@ -552,8 +552,8 @@ We leverage `color-mix()` to achieve consistent hover and active states across c
 
 | Custom Property               |  Preview                        |
 | ----------------------------- | ------------------------------- |
-| `--wa-color-mix-hover`   | <div class="color-preview"><div class="color-swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud)">mixed</small></div></div> |
-| `--wa-color-mix-active`   | <div class="color-preview"><div class="color-swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud);">mixed</small></div></div> |
+| `--wa-color-mix-hover`   | <div class="color-swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud)">mixed</small></div> |
+| `--wa-color-mix-active`   | <div class="color-swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud);">mixed</small></div> |
 
 
 ## Semantic Colors
@@ -580,12 +580,12 @@ Finally, each color is named according to how much attention it draws. Here, we
 
 | Custom Property               |  <code>brand</code>             |  <code>success</code>           |  <code>neutral</code>           |  <code>warning</code>           | <code>danger</code>             |
 | ----------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- |
-| `--wa-color-*-fill-quiet`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div></div> |
-| `--wa-color-*-fill-normal`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal)"></div></div> |<div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div></div> |
-| `--wa-color-*-fill-loud`   | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div></div> |  <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div></div> |
-| `--wa-color-*-border-quiet`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div></div> |
-| `--wa-color-*-border-normal`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div></div> |
-| `--wa-color-*-border-loud`   | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div></div> |
-| `--wa-color-*-on-quiet`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div></div> |
-| `--wa-color-*-on-normal`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div></div> |
-| `--wa-color-*-on-loud`  | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div></div> |
\ No newline at end of file
+| `--wa-color-*-fill-quiet`   | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> |  <div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
+| `--wa-color-*-fill-normal`   | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
+| `--wa-color-*-fill-loud`   | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> |  <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> |  <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
+| `--wa-color-*-border-quiet`   | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div> |
+| `--wa-color-*-border-normal`   | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div> |
+| `--wa-color-*-border-loud`   | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div> |
+| `--wa-color-*-on-quiet`  | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
+| `--wa-color-*-on-normal`  | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
+| `--wa-color-*-on-loud`  | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
\ No newline at end of file
diff --git a/docs/docs/theming/corners.md b/docs/docs/theming/corners.md
deleted file mode 100644
index fb1c68290..000000000
--- a/docs/docs/theming/corners.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Corners
-description: Sharpen or soften the appearance of your components with Web Awesome's corner properties.
-layout: page.njk
----
-
-coming soon!
\ No newline at end of file
diff --git a/docs/docs/theming/extras.md b/docs/docs/theming/extras.md
index 24c7295c3..37fd8a877 100644
--- a/docs/docs/theming/extras.md
+++ b/docs/docs/theming/extras.md
@@ -5,6 +5,13 @@ layout: page.njk
 ---
 
 ## Focus
+| Custom Property               |  Preview                        |
+| ----------------------------- | ------------------------------- |
+| `--wa-color-focus`   | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
+| `--wa-focus-ring-style`   | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
+| `--wa-focus-ring-width`   | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
+| `--wa-focus-ring`   | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
+| `--wa-focus-ring-offset`   | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
 
 ## Links
 
diff --git a/docs/docs/theming/motion.md b/docs/docs/theming/motion.md
new file mode 100644
index 000000000..4f6ea70a5
--- /dev/null
+++ b/docs/docs/theming/motion.md
@@ -0,0 +1,24 @@
+---
+title: Motion
+description: Customize your theme's built-in transitions and animations with Web Awesome's motion properties.
+layout: page.njk
+---
+
+<style>
+  .motion-swatch {
+    height: 2em;
+    background-color: var(--wa-color-neutral-fill-normal);
+  }
+
+  .motion-swatch:hover {
+    background-color: var(--wa-color-brand-fill-loud);
+  }
+</style>
+
+## Transitions
+
+| Custom Property               |  Preview                        |
+| ----------------------------- | ------------------------------- |
+| `--wa-transition-normal`   | <div class="motion-swatch" style="transition: background-color var(--wa-transition-normal)"></div> |
+| `--wa-transition-fast`   | <div class="motion-swatch" style="transition: background-color var(--wa-transition-fast)"></div> |
+| `--wa-transition-faster`   | <div class="motion-swatch" style="transition: background-color var(--wa-transition-faster)"></div> |
\ No newline at end of file
diff --git a/src/themes/default.css b/src/themes/default.css
index 14bbf6ed5..f5bbc8c1a 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -307,7 +307,7 @@
   --wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
   --wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
 
-  /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
+  /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
   --wa-border-radius-pill: 9999px;
   --wa-border-radius-circle: 50%;
   --wa-border-radius-sharp: 0;
@@ -318,7 +318,7 @@
   --wa-focus-ring-style: solid;
   --wa-focus-ring-width: 0.1875rem; /* 3px */
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-    color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
+    color-mix(in oklab, var(--wa-color-focus) 99%, transparent);
   --wa-focus-ring-offset: 0.0625rem; /* 1px */
 
   /**