Convert pagination component to CSS variables

[mdo]

This PR represents a potential shift in how we're using CSS variables for our components. In previous cases like #34600, I've been creating new CSS variables for each state-property pairing (e.g., --bs-btn-color, --bs-btn-hover-color, and --bs-btn-active-color). This matches our Sass-based customization of variables for almost every property and state, but it does create bloat in the component base class.

In contrast, this PR only sets the essential variables on the base class and uses CSS variable reassignment as needed to modify those properties for each state with their Sass variables. For example, --bs-pagination-color is set on .pagination and then overridden on .page-link:hover using the same --bs-pagination-color variable with a new value.

I think this approach makes more sense and can steer us toward more CSS variable re-use (e.g., --bs-pagination-bg: var(--bs-body-bg)), steering us away from too much Sass variable re-use that led to complicated customization issues.

Updated to use the same method we're using elsewhere, all in on the base class.

/cc @twbs/css-review

---

• Revert to all CSS vars on base class
• Update documentation

[Kopyov]

Although this solution looks cleaner, it makes customization and specifically overrides a bit more complicated as they are spread across the states. But considering the main advantage of generating less CSS variables, it's definitely a good step forward. Will other components get the same update anytime soon?

[ffoodd]

Looks great as-is. I'm almost sure there's room for improvements, either on CSS or Sass side, but can't find them for now :)

[ffoodd]

Nice job 👌