refactor(design-system): migrate fg-* utilities to text-* and remove namespace

The design system carried two parallel namespaces for foreground colors:
text-* (canonical, ~2,000 uses) and fg-* (32 uses). Most fg-* tokens
were 1:1 duplicates of a text-* counterpart. fg-gray was nearly
identical to text-secondary, with a one-step shade difference in dark
mode.

This PR migrates all 32 usages to their text-* equivalents and removes
the fg-* block from the design tokens. Closes #1606.

Mapping:
- fg-inverse  -> text-inverse  (20 usages, identical light/dark values)
- fg-gray     -> text-secondary (7 usages; light values match, dark is
                                 one step lighter: gray-300 vs gray-400)
- fg-primary  -> text-primary  (3 usages, identical values)
- fg-subdued  -> text-subdued  (2 usages, identical values)

The four other fg-* tokens (fg-contrast, fg-primary-variant,
fg-secondary, fg-secondary-variant) had zero usages despite being
defined; they are removed without replacement.

JSON / build:
- design/tokens/sure.tokens.json: $version 1.0.0 -> 2.0.0 (breaking
  schema change per the policy added in #1620). 8 fg-* token
  definitions removed.
- button-bg-ghost-hover's dark value still references "fg-inverse"
  internally; rewritten to "bg-gray-800 text-inverse" so the cleanup
  doesn't break that utility.
- _generated.css regenerated. 42 utility blocks now (was 50).

Lookbook tokens preview:
- The Text & foregrounds section dropped its split between text-*
  (canonical) and fg-* (legacy). Now a single section listing the
  five text-* utilities. The "(legacy)" framing is gone since there's
  no legacy left.

README:
- design/tokens/README.md's button-bg-ghost-hover edge-case example
  updated to reflect the new "bg-gray-800 text-inverse" dark value.

Visual review needed in dark mode:
- Anywhere icons use the application_helper#icon helper with
  color: "default" (most icons in the app). The default class moved
  from fg-gray (gray-400 dark) to text-secondary (gray-300 dark), so
  default-color icons render slightly lighter in dark mode.
- DS::Buttonish icons in secondary buttons (same shade shift).
- DS::Link icons (same).
- Time series chart axes (same).
- All tooltips, account add flow, settings hostings buttons,
  invitations, AI consent, family export, danger-zone buttons --
  these used fg-inverse, which is identical to text-inverse, so no
  visual change expected.

test/components/previews/design_tokens_preview.rb

@@ -48,10 +48,7 @@ class DesignTokensPreview < ViewComponent::Preview
   end
 
   def text
-    render_with_template(locals: {
-      text_utilities: collect_utilities { |name| name.start_with?("text-") },
-      fg_utilities:   collect_utilities { |name| name.start_with?("fg-") }
-    })
+    render_with_template(locals: { utilities: collect_utilities { |name| name.start_with?("text-") } })
   end
 
   def borders

test/components/previews/design_tokens_preview/text.html.erb

@@ -3,59 +3,34 @@
   meta        = "text-xs text-secondary font-mono"
   light_ctx   = "rounded p-3 bg-surface"
   dark_ctx    = "rounded p-3 bg-gray-900"
-
-  render_group = ->(items) {
-    capture do
-      content_tag(:div, class: "grid gap-3 grid-cols-1 lg:grid-cols-2") do
-        safe_join(items.map do |u|
-          content_tag(:div, class: card) do
-            safe_join([
-              content_tag(:div, class: "grid grid-cols-2 gap-2") do
-                safe_join([
-                  content_tag(:div, class: light_ctx) do
-                    content_tag(:p, "Quick brown fox", class: "text-sm font-medium #{u[:name]}")
-                  end,
-                  content_tag(:div, class: dark_ctx) do
-                    content_tag(:p, "Quick brown fox", class: "text-sm font-medium #{u[:name]}")
-                  end
-                ])
-              end,
-              content_tag(:div, class: "space-y-0.5") do
-                safe_join([
-                  content_tag(:p, u[:name], class: "text-xs font-medium text-primary"),
-                  content_tag(:p, u[:light_resolved] || u[:light_value], class: "#{meta} truncate"),
-                  (u[:dark_value] ? content_tag(:p, "dark: #{u[:dark_resolved] || u[:dark_value]}", class: "#{meta} truncate text-subdued") : nil)
-                ].compact)
-              end
-            ])
-          end
-        end)
-      end
-    end
-  }
 %>
-<div class="bg-surface min-h-screen p-6 space-y-10">
+<div class="bg-surface min-h-screen p-6 space-y-6">
   <header>
     <h2 class="text-2xl font-semibold text-primary">Text &amp; foregrounds</h2>
     <p class="text-sm text-secondary">
-      Each example renders the literal class on a light <em>and</em> a dark surface so utilities meant for inverse contexts show their intended state.
+      <code class="font-mono">text-*</code> utilities. Each example renders the literal class on a light <em>and</em> a dark surface so utilities meant for inverse contexts show their intended state.
     </p>
   </header>
 
-  <section class="space-y-3">
-    <header class="space-y-1">
-      <h3 class="text-lg font-medium text-primary"><code class="font-mono">text-*</code> <span class="text-xs text-secondary font-normal">(canonical, ~2,000 uses across the codebase)</span></h3>
-    </header>
-    <%= render_group.call(text_utilities) %>
-  </section>
-
-  <section class="space-y-3">
-    <header class="space-y-1">
-      <h3 class="text-lg font-medium text-primary"><code class="font-mono">fg-*</code> <span class="text-xs text-warning font-normal">(legacy — prefer <code class="font-mono">text-*</code>)</span></h3>
-      <p class="text-sm text-secondary">
-        Older namespace, ~40 uses left in the codebase. Most are 1:1 duplicates of a <code class="font-mono">text-*</code> equivalent. Tracked for migration; no new code should reference these.
-      </p>
-    </header>
-    <%= render_group.call(fg_utilities) %>
-  </section>
+  <div class="grid gap-3 grid-cols-1 lg:grid-cols-2">
+    <% utilities.each do |u| %>
+      <div class="<%= card %>">
+        <div class="grid grid-cols-2 gap-2">
+          <div class="<%= light_ctx %>">
+            <p class="text-sm font-medium <%= u[:name] %>">Quick brown fox</p>
+          </div>
+          <div class="<%= dark_ctx %>">
+            <p class="text-sm font-medium <%= u[:name] %>">Quick brown fox</p>
+          </div>
+        </div>
+        <div class="space-y-0.5">
+          <p class="text-xs font-medium text-primary"><%= u[:name] %></p>
+          <p class="<%= meta %> truncate"><%= u[:light_resolved] || u[:light_value] %></p>
+          <% if u[:dark_value] %>
+            <p class="<%= meta %> truncate text-subdued">dark: <%= u[:dark_resolved] || u[:dark_value] %></p>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
 </div>