How to customize advanced focus rings in Bootstrap 5.3?

/* Custom focus ring styles */
.focus-ring-custom {
  --bs-btn-focus-width: 0.25rem;
  --bs-btn-focus-style: solid;
  --bs-btn-focus-shift: 0;
  box-shadow: 
    0 0 0 var(--bs-btn-focus-width) 
    rgba(var(--bs-primary-rgb), .25),
    0 0 0 0.15rem rgba(255,255,255,.5);
}

/* Theme-aware variants */
.focus-ring-primary.focus-ring-2:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.focus-ring-success.focus-ring-3:focus-visible {
  box-shadow: 0 0 0 0.375rem rgba(var(--bs-success-rgb), 0.25);
}
      

<!-- Usage examples -->
<button class="btn btn-outline-primary focus-ring-custom">
  Custom Focus Ring
</button>

<button class="btn btn-success focus-ring-2 focus-ring-success">
  Success Focus Ring
</button>

<a href="#" class="btn btn-link focus-ring-primary focus-ring-1 p-0">
  Link with Focus Ring
</a>