Add CSS variables for global focus styling, document it

scss/_root.scss

@@ -50,5 +50,15 @@
   }
   --#{$variable-prefix}body-bg: #{$body-bg};
   // scss-docs-end root-body-variables
+
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{$variable-prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$variable-prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$variable-prefix}focus-ring-color: #{$focus-ring-color};
+  --#{$variable-prefix}focus-ring-blur: #{$focus-ring-blur};
+  // By default, there is no `--bs-focus-ring-offset-x` or `--bs-focus-ring-offset-y`, but we provide CSS variables with fallbacks to initial `0` values
+  --#{$variable-prefix}focus-ring-box-shadow: var(--#{$variable-prefix}focus-ring-offset-x, 0) var(--#{$variable-prefix}focus-ring-offset-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
+  // scss-docs-end root-focus-variables
   // stylelint-enable custom-property-empty-line-before
 }

site/content/docs/5.1/content/reboot.md

@@ -393,6 +393,16 @@ Reboot includes an enhancement for `role="button"` to change the default cursor
 <span role="button" tabindex="0">Non-button element button</span>
 {{< /example >}}
 
+## Focus state
+
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
+
+Bootstrap globally updates the styling for `:focus` styles using a combination of Sass and CSS variables. In our Sass, we set default values that can be customized pre-compiling. Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).
+
+{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
+
 ## Misc elements
 
 ### Address