chore(design-system): swap raw gray classes for semantic tokens in settings/ (#1652)

* chore(design-system): swap raw gray classes for semantic tokens in settings/

Pilot for the broader raw-color sweep. Maps 21 occurrences across 11
files to design-system equivalents:

- text-white bg-gray-900 hover:bg-gray-800 (CTA buttons)
  -> text-inverse button-bg-primary hover:button-bg-primary-hover
- bg-gray-25 / bg-gray-50 / bg-gray-100 (subtle surface backgrounds)
  -> bg-surface-inset
- bg-gray-800 (tooltip pills) -> bg-inverse
- text-white inside tooltips -> text-inverse
- text-gray-300 (muted tooltip labels) -> text-inverse opacity-70
- text-gray-600 (muted body text) -> text-secondary
- hover:text-gray-700 -> hover:text-primary
- focus:ring-gray-900 -> focus:ring-button-bg-primary

The 7 status-indicator dots (`bg-gray-400`) are intentionally left
as raw classes. Gray-400 against both light and dark container bgs
gives reasonable contrast either way, and there's no semantic token
that fits a "neutral inactive indicator" use case yet. Worth a
follow-up if a `bg-subdued` token would benefit other places.

* fix(design-system): use theme-aware focus ring on provider submit buttons

Two issues caught in code review:

1. focus:ring-button-bg-primary silently emits no CSS (CodeRabbit, Codex).
   button-bg-primary is a custom @utility, not a theme color, so Tailwind's
   ring-{name} resolution finds no --color-button-bg-primary and falls
   back to the default. Replaces with focus:ring-gray-900
   theme-dark:focus:ring-white — same color flip as the button bg, but
   resolved through theme colors so ring-{name} actually generates CSS.

2. _enable_banking_panel.html.erb dropped focus-ring + transition entirely
   in the original sweep (CodeRabbit). Restores parity with the other
   provider panels using the corrected ring classes.

Long-term cleanup: tracked under issue #1653 (modifier-aware utilities)
to make button-bg-primary also a theme color so ring-button-bg-primary
becomes valid.

app/views/settings/hostings/_twelve_data_settings.html.erb

@@ -45,12 +45,12 @@
                 limit: number_with_delimiter(@twelve_data_usage.data.limit),
                 percentage: number_to_percentage(@twelve_data_usage.data.utilization, precision: 1)) %>
         </p>
-        <div class="w-52 h-1.5 bg-gray-100 rounded-2xl">
+        <div class="w-52 h-1.5 bg-surface-inset rounded-2xl">
           <div class="h-full bg-green-500 rounded-2xl"
                style="width: <%= [@twelve_data_usage.data.utilization, 2].max %>%;"></div>
         </div>
       </div>
-      <div class="bg-gray-100 rounded-md px-1.5 py-0.5 w-fit">
+      <div class="bg-surface-inset rounded-md px-1.5 py-0.5 w-fit">
         <p class="text-xs font-medium text-secondary uppercase">
           <%= t(".plan", plan: @twelve_data_usage.data.plan) %>
         </p>