fix(web): text on a tint of its own hue uses the house -fg tokens (#3150)

A hue painted as text on a color-mix tint of itself sits close to the
surface under it. On Minstrel's surfaces the raw accent on its 15% tint
measures 1.97:1 at worst (dark mode, hover surface), against AA's 4.5.

- tokens.json gains colors.fg: the five FabledSword -fg formulas (accent
  45%, success 45%, warning, error and info 50%), each mixed toward
  parchment so one declaration serves both modes. Success is Minstrel's
  moss. tokens-to-css emits them in :root.
- Tailwind exposes them as text-accent-fg, text-warning-fg, text-error-fg
  and text-info-fg.
- 23 sites swapped: 14 Tailwind class strings (PlayerBar and the admin
  count pills) and 9 CSS rules (StatusPill's four tones and five accent
  chips). Worst case after: accent-fg 5.03, error-fg 4.75, warning-fg
  4.92, success-fg 4.85.
- scripts/check-tint-contrast.js finds the pair in either spelling. Its
  test scans src in the web Vitest lane and fails on any new site, with
  fixture cases showing it can fail.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/routes/admin/duplicates/+page.svelte

@@ -138,7 +138,7 @@
         <h2 class="font-display text-2xl font-medium text-text-primary">Duplicates</h2>
         {#if total > 0}
           <span
-            class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
+            class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
             data-testid="duplicates-count-pill"
           >
             {total}
@@ -302,7 +302,7 @@
                       <!-- The proposed copy to keep, with the rule that chose it.
                            A default the merge will let the operator override. -->
                       <span
-                        class="shrink-0 rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
+                        class="shrink-0 rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
                         data-testid="survivor-badge"
                         title="Proposed to keep: {group.survivor_reason}"
                       >

web/src/routes/admin/missing-files/+page.svelte

@@ -53,7 +53,7 @@
       <h2 class="font-display text-2xl font-medium text-text-primary">Missing files</h2>
       {#if total > 0}
         <span
-          class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
+          class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
           data-testid="missing-count-pill"
         >
           {total}

web/src/routes/admin/playback-errors/+page.svelte

@@ -167,7 +167,7 @@
       </p>
     </div>
     {#if !query.isPending && !query.isError && !resolved}
-      <span class="rounded-full bg-accent/15 px-3 py-1 text-sm text-accent">
+      <span class="rounded-full bg-accent/15 px-3 py-1 text-sm text-accent-fg">
         {rows.length} unresolved
       </span>
     {/if}
@@ -220,7 +220,7 @@
                 {kindLabel(r.kind)}
               </span>
               {#if resolved && r.resolution}
-                <span class="rounded bg-accent/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-accent">
+                <span class="rounded bg-accent/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-accent-fg">
                   {resolutionLabel(r.resolution)}
                 </span>
               {/if}

web/src/routes/admin/quarantine/+page.svelte

@@ -150,7 +150,7 @@
       <h2 class="font-display text-2xl font-medium text-text-primary">Quarantine</h2>
       {#if totalReports > 0}
         <span
-          class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
+          class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
           data-testid="report-count-pill"
         >
           {totalReports}
@@ -392,6 +392,6 @@
     font-size: 11px;
     line-height: 14px;
     background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
-    color: var(--fs-accent);
+    color: var(--fs-accent-fg);
   }
 </style>

web/src/routes/admin/requests/+page.svelte

@@ -183,7 +183,7 @@
             {tab.label}
             {#if isActive}
               <span
-                class="ml-1.5 inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
+                class="ml-1.5 inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
                 data-testid="active-tab-count"
               >
                 {rows.length}
@@ -377,7 +377,7 @@
     font-size: 11px;
     line-height: 14px;
     background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
-    color: var(--fs-accent);
+    color: var(--fs-accent-fg);
     text-transform: capitalize;
   }
 </style>

web/src/routes/admin/users/+page.svelte

@@ -274,7 +274,7 @@
                 <span class="text-base font-medium text-text-primary">{u.username}</span>
                 {#if u.is_admin}
                   <span
-                    class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent"
+                    class="inline-flex items-center rounded-full bg-accent-tint px-2 py-0.5 text-xs text-accent-fg"
                     data-testid="admin-badge"
                   >admin</span>
                 {/if}

web/src/routes/library/hidden/+page.svelte

@@ -100,6 +100,6 @@
     font-size: 11px;
     line-height: 14px;
     background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
-    color: var(--fs-accent);
+    color: var(--fs-accent-fg);
   }
 </style>

web/src/routes/requests/+page.svelte

@@ -160,7 +160,7 @@
     font-size: 11px;
     line-height: 14px;
     background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
-    color: var(--fs-accent);
+    color: var(--fs-accent-fg);
     text-transform: capitalize;
   }
 </style>