Update form validation styles to use new CSS variables for color and border-color

[mdo]

Linked to #38041.

This is an alternate fix that includes some new CSS variables dedicated to form validation valid and invalid colors. This approach should suffice for a number of customization options while also solving our color contrast and color mode issues.

• We're not programmatically generating the CSS variables for form validation states (e.g., if folks move from valid/invalid to custom ones like warning/error), but that's okay I think. Maybe something to tackle in v6 if possible.
• This means folks can customize via Sass only (the validation map, Sass variables, and Sass mixin), or via CSS variables, depending on their needs.

What this doesn't, and can't, resolve is the icon color since we're embedding SVGs. I don't think the path of duplicating the SVG as embedded in our CSS is a good option either since that adds a good chunk of file size.

[julien-deramond]

Suggestion for the documentation:

diff --git a/scss/_root.scss b/scss/_root.scss
index d2216cdcf..1fc660b8d 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -124,10 +124,12 @@
   --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
   // scss-docs-end root-focus-variables
 
+  // scss-docs-start root-form-validation-variables
   --#{$prefix}form-valid-color: #{$green-500};
   --#{$prefix}form-valid-border-color: #{$green-500};
   --#{$prefix}form-invalid-color: #{$red-500};
   --#{$prefix}form-invalid-border-color: #{$red-500};
+  // scss-docs-end root-form-validation-variables
 }
 
 @if $enable-dark-mode {
diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index cf2a87e80..03dd9de5e 100644
--- a/site/content/docs/5.3/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -351,6 +351,14 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 
 ## CSS
 
+### Variables
+
+{{< added-in "5.3.0" >}}
+
+As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}}
+
 ### Sass variables
 
 {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}