refactor(design-system): extend DS::Alert and migrate 9 inline alert blocks (#1731)

* feat(design-system): add info semantic color token

Mirrors success/warning/destructive: --color-info maps to blue-600 in
light mode, blue-500 in dark mode. Unblocks the DS::Alert info variant
from carrying a raw 'blue-600' literal in icon_color and lets surface
tokens use bg-info/N alpha modifiers like the rest of the system.

Refs #1715

* refactor(design-system): adopt semantic tokens and add body slot in DS::Alert

Replaces the bg-{blue,green,yellow,red}-50 / text-{...}-700 / border-{...}-200
palette block in DS::Alert with semantic alpha-modifier surfaces
(bg-{info,success,warning,destructive}/10 + matching /20 borders).
Drops the 'blue-600' literal that icon_color was returning for the
info variant; helpers#icon now accepts color: :info backed by the
new --color-info token.

Adds an optional title: kwarg and an opt-in block-content slot so
rich alerts (title + paragraph, lists, embedded actions) can render
without callers reaching for a hand-rolled flex layout. The existing
message: API stays backward-compatible — nothing in the codebase that
already calls DS::Alert.new(message: ..., variant: ...) needs to change.

Lookbook gains with_title and with_body_slot examples covering the
new shapes.

Refs #1715

* refactor(views): migrate api_keys, hostings, lunchflow alerts to DS::Alert

Cleans up nine bespoke alert blocks that hand-rolled the same
flex + icon + bordered-surface shape DS::Alert already provides:

- settings/api_keys/{new,created,created.turbo_stream}.html.erb — three
  near-identical 'Security Warning' / 'Important Security Note' boxes
  using the broken bg-warning-50 / text-warning-700 raw-palette pair.
- settings/hostings/{_alpha_vantage,_eodhd,_yahoo_finance,_twelve_data,_provider_selection}_settings.html.erb —
  five amber-50 / amber-200 warning boxes covering rate-limit notes,
  health-check failure messaging, and the env-configured override
  banner. The twelve_data plan-restriction block keeps its bullet
  list and pricing link inside the new DS::Alert body slot.
- lunchflow_items/{_api_error,_setup_required}.html.erb — two modal
  alert headers whose flex+icon scaffolding now collapses onto
  DS::Alert. The surrounding bg-surface 'Common issues' / 'Setup
  steps' info cards stay as-is; this PR only touches the alert
  shape itself.

No functional or behavioural changes. Locale keys preserved.
amber-* palette uses on the alerts disappear; remaining bg-amber-*
hits in the codebase live outside the alert pattern and stay for
follow-up sub-PRs of #1715.

Refs #1715

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

@@ -34,13 +34,8 @@
                         data: { "auto-submit-form-target": "auto" } %>
   <% end %>
 
-  <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
-    <div class="flex items-start gap-2">
-      <%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5") %>
-      <div class="text-sm text-amber-700">
-        <p><%= t(".rate_limit_warning") %></p>
-        <p class="mt-1"><%= t(".no_health_check_note") %></p>
-      </div>
-    </div>
-  </div>
+  <%= render DS::Alert.new(variant: :warning) do %>
+    <p><%= t(".rate_limit_warning") %></p>
+    <p><%= t(".no_health_check_note") %></p>
+  <% end %>
 </div>

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

@@ -35,12 +35,5 @@
                         data: { "auto-submit-form-target": "auto" } %>
   <% end %>
 
-  <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
-    <div class="flex items-start gap-2">
-      <%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5") %>
-      <p class="text-sm text-amber-700">
-        <%= t(".rate_limit_warning") %>
-      </p>
-    </div>
-  </div>
+  <%= render DS::Alert.new(message: t(".rate_limit_warning"), variant: :warning) %>
 </div>

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

@@ -71,13 +71,6 @@
   </div>
 
   <% if ENV["EXCHANGE_RATE_PROVIDER"].present? || ENV["SECURITIES_PROVIDERS"].present? || ENV["SECURITIES_PROVIDER"].present? %>
-    <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
-      <div class="flex items-start gap-2">
-        <%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5 shrink-0") %>
-        <p class="text-sm text-amber-700">
-          <%= t(".env_configured_message") %>
-        </p>
-      </div>
-    </div>
+    <%= render DS::Alert.new(message: t(".env_configured_message"), variant: :warning) %>
   <% end %>
 </div>

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

@@ -57,30 +57,26 @@
       </div>
 
       <% if @plan_restricted_securities.present? %>
-        <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mt-4">
-          <div class="flex items-start gap-2">
-            <%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5") %>
-            <div class="text-sm">
-              <p class="font-medium text-amber-800"><%= t(".plan_upgrade_warning_title") %></p>
-              <p class="text-amber-700 mt-1"><%= t(".plan_upgrade_warning_description") %></p>
-              <ul class="mt-2 space-y-1">
-                <% @plan_restricted_securities.each do |security| %>
-                  <li class="text-amber-700">
-                    <span class="font-medium"><%= security[:ticker] %></span>
-                    <% if security[:name].present? %>
-                      <span class="text-amber-600">(<%= security[:name] %>)</span>
-                    <% end %>
-                    <span class="text-amber-600">— <%= t(".requires_plan", plan: security[:required_plan]) %></span>
-                  </li>
-                <% end %>
-              </ul>
-              <p class="mt-2">
-                <a href="https://twelvedata.com/pricing" target="_blank" rel="noopener noreferrer" class="text-amber-800 underline font-medium">
-                  <%= t(".view_pricing") %>
-                </a>
-              </p>
-            </div>
-          </div>
+        <div class="mt-4">
+          <%= render DS::Alert.new(title: t(".plan_upgrade_warning_title"), variant: :warning) do %>
+            <p><%= t(".plan_upgrade_warning_description") %></p>
+            <ul class="space-y-1">
+              <% @plan_restricted_securities.each do |security| %>
+                <li>
+                  <span class="font-medium text-primary"><%= security[:ticker] %></span>
+                  <% if security[:name].present? %>
+                    <span class="text-secondary">(<%= security[:name] %>)</span>
+                  <% end %>
+                  <span class="text-secondary">— <%= t(".requires_plan", plan: security[:required_plan]) %></span>
+                </li>
+              <% end %>
+            </ul>
+            <p>
+              <a href="https://twelvedata.com/pricing" target="_blank" rel="noopener noreferrer" class="text-link underline font-medium">
+                <%= t(".view_pricing") %>
+              </a>
+            </p>
+          <% end %>
         </div>
       <% end %>
     </div>

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

@@ -20,15 +20,11 @@
           <%= t(".status_inactive") %>
         </p>
       </div>
-      <div class="bg-amber-50 border border-amber-200 rounded-lg p-3">
-        <div class="flex items-start gap-2">
-          <%= icon("alert-triangle", size: "sm", class: "text-amber-600 mt-0.5 shrink-0") %>
-          <div>
-            <h3 class="text-sm font-medium text-amber-700"><%= t(".connection_failed") %></h3>
-            <p class="text-sm text-amber-700 mt-1"><%= t(".troubleshooting") %></p>
-          </div>
-        </div>
-      </div>
+      <%= render DS::Alert.new(
+        title: t(".connection_failed"),
+        message: t(".troubleshooting"),
+        variant: :warning
+      ) %>
     </div>
   <% end %>
 </div>