fix(web): all accent text and icons use accent-fg (#5318)

The raw accent fails AA as text on every dark surface, not only on its
own tint: 3.04:1 on the page, 2.70 on iron, 2.21 on slate, against 4.5.
accent-fg (the house formula, 45% toward parchment) measures 5.62 at
worst across both modes. The operator chose the readable colour over the
signature teal for text, on 2026-10-08.

- 36 sites swap. They are 35 Tailwind uses: links, "Now playing", the
  ingest progress line, active shuffle/repeat, the liked heart, the app
  download icon and its hover. The last is the alphabet rail's pending
  spinner in CSS. Icons follow the text: as graphics they need only
  3:1, and the raw accent misses even that on iron.
- check-tint-contrast adds accent to TEXT_NEVER_RAW, so a new raw
  text-accent or color: var(--fs-accent) fails the web lane. Run against
  the files before the swap, it finds all 36. Borders, rings and fills
  keep the raw accent.

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

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

@@ -290,7 +290,7 @@
     <header class="flex items-baseline justify-between">
       <h3 class="font-display text-xl font-medium text-text-primary">Pending requests</h3>
       {#if pendingCount > PREVIEW_LIMIT}
-        <a href="/admin/requests" class="text-sm text-accent hover:underline">View all {pendingCount} →</a>
+        <a href="/admin/requests" class="text-sm text-accent-fg hover:underline">View all {pendingCount} →</a>
       {/if}
     </header>
 
@@ -523,7 +523,7 @@
     <header class="flex items-baseline justify-between">
       <h3 class="font-display text-xl font-medium text-text-primary">Quarantine</h3>
       {#if quarantineCount > PREVIEW_LIMIT}
-        <a href="/admin/quarantine" class="text-sm text-accent hover:underline">View all {quarantineCount} →</a>
+        <a href="/admin/quarantine" class="text-sm text-accent-fg hover:underline">View all {quarantineCount} →</a>
       {/if}
     </header>
 

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

@@ -424,7 +424,7 @@
     <div>
       <h3 class="font-display text-lg font-medium text-text-primary">Lidarr</h3>
       <p class="mt-1 text-sm text-text-secondary">
-        Search Lidarr from <span class="font-mono text-accent">/discover</span> and
+        Search Lidarr from <span class="font-mono text-accent-fg">/discover</span> and
         route approved requests to it.
       </p>
     </div>

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

@@ -225,7 +225,7 @@
               {rowMeta(r)}
             </div>
             {#if r.imported_album_count > 0 || r.imported_track_count > 0}
-              <div class="text-sm text-accent" data-testid="ingest-progress">
+              <div class="text-sm text-accent-fg" data-testid="ingest-progress">
                 {#if r.kind === 'artist'}
                   {r.imported_album_count} {r.imported_album_count === 1 ? 'album' : 'albums'}
                   · {r.imported_track_count} {r.imported_track_count === 1 ? 'track' : 'tracks'} ingested

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

@@ -495,7 +495,7 @@
                   {/each}
                   {#if s.points.length > 1}
                     <polyline
-                      class="text-accent"
+                      class="text-accent-fg"
                       points={sparkPoints(s)}
                       fill="none"
                       stroke="currentColor"
@@ -503,7 +503,7 @@
                     />
                   {:else if s.points.length === 1}
                     <circle
-                      class="text-accent"
+                      class="text-accent-fg"
                       cx={xFor(s.points[0].week_start)}
                       cy={SPARK_H - s.points[0].skip_rate * SPARK_H}
                       r="2" fill="currentColor"

web/src/routes/albums/[id]/+page.svelte

@@ -95,7 +95,7 @@
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">
       <p>Album not found.</p>
-      <a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
+      <a href="/" class="mt-2 inline-block text-sm text-accent-fg">Back to Library</a>
     </div>
   {:else if query.isError}
     <ApiErrorBanner error={query.error} onRetry={query.refetch} />
@@ -131,7 +131,7 @@
              in that genre. -->
         {#if album.year}
           <p class="text-sm">
-            <a href={`/library/years?y=${album.year}`} class="text-accent hover:underline">
+            <a href={`/library/years?y=${album.year}`} class="text-accent-fg hover:underline">
               {album.year}
             </a>
           </p>

web/src/routes/artists/[id]/+page.svelte

@@ -73,7 +73,7 @@
   {#if notFound}
     <div role="alert" class="rounded border border-border bg-surface p-4">
       <p>Artist not found.</p>
-      <a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
+      <a href="/" class="mt-2 inline-block text-sm text-accent-fg">Back to Library</a>
     </div>
   {:else if query.isError}
     <ApiErrorBanner error={query.error} onRetry={query.refetch} />

web/src/routes/forgot-password/+page.svelte

@@ -71,7 +71,7 @@
     {/if}
 
     <p class="mt-4 text-center text-sm text-text-secondary">
-      Remembered? <a href="/login" class="text-accent hover:underline">Log in</a>
+      Remembered? <a href="/login" class="text-accent-fg hover:underline">Log in</a>
     </p>
   </div>
 </main>

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

@@ -65,7 +65,7 @@
     <p class="text-text-secondary">
       No albums in your loaded library match
       <span class="font-medium">'{filter.trim()}'</span>.
-      <a href={`/search/albums?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
+      <a href={`/search/albums?q=${encodeURIComponent(filter.trim())}`} class="text-accent-fg hover:underline">
         Search the full library →
       </a>
     </p>

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

@@ -63,7 +63,7 @@
     <p class="text-text-secondary">
       No artists in your loaded library match
       <span class="font-medium">'{filter.trim()}'</span>.
-      <a href={`/search/artists?q=${encodeURIComponent(filter.trim())}`} class="text-accent hover:underline">
+      <a href={`/search/artists?q=${encodeURIComponent(filter.trim())}`} class="text-accent-fg hover:underline">
         Search the full library →
       </a>
     </p>

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

@@ -112,7 +112,7 @@
     <header class="space-y-2">
       <a
         href="/library/genres"
-        class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+        class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
       >
         <ChevronLeft size={14} aria-hidden="true" />
         All genres

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

@@ -89,7 +89,7 @@
         title="No liked artists yet."
       >
         {#snippet actions()}
-          <a href="/library/artists" class="text-accent hover:underline">Browse artists →</a>
+          <a href="/library/artists" class="text-accent-fg hover:underline">Browse artists →</a>
         {/snippet}
       </EmptyState>
     {:else}
@@ -121,7 +121,7 @@
         title="No liked albums yet."
       >
         {#snippet actions()}
-          <a href="/library/albums" class="text-accent hover:underline">Browse albums →</a>
+          <a href="/library/albums" class="text-accent-fg hover:underline">Browse albums →</a>
         {/snippet}
       </EmptyState>
     {:else}
@@ -153,7 +153,7 @@
         title="No liked tracks yet."
       >
         {#snippet actions()}
-          <a href="/" class="text-accent hover:underline">Find something new →</a>
+          <a href="/" class="text-accent-fg hover:underline">Find something new →</a>
         {/snippet}
       </EmptyState>
     {:else}

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

@@ -97,7 +97,7 @@
     <header class="space-y-2">
       <a
         href="/library/years"
-        class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+        class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
       >
         <ChevronLeft size={14} aria-hidden="true" />
         All years

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

@@ -85,11 +85,11 @@
     </form>
 
     <p class="mt-4 text-center text-sm text-text-secondary">
-      <a href="/forgot-password" class="text-accent hover:underline">Forgot password?</a>
+      <a href="/forgot-password" class="text-accent-fg hover:underline">Forgot password?</a>
     </p>
     <p class="mt-2 text-center text-sm text-text-secondary">
       Don't have an account?
-      <a href="/register" class="text-accent hover:underline">Register</a>
+      <a href="/register" class="text-accent-fg hover:underline">Register</a>
     </p>
   </div>
 </main>

web/src/routes/now-playing/+page.svelte

@@ -163,7 +163,7 @@
           aria-label="Shuffle"
           aria-pressed={player.shuffle}
           class="flex items-center justify-center min-h-[44px] min-w-[44px] rounded
-                 {player.shuffle ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}
+                 {player.shuffle ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}
                  focus-visible:ring-2 focus-visible:ring-accent"
         >
           <Shuffle size={20} strokeWidth={1.5} />
@@ -216,7 +216,7 @@
           aria-label={repeatLabel}
           aria-pressed={player.repeat !== 'off'}
           class="flex items-center justify-center min-h-[44px] min-w-[44px] rounded
-                 {player.repeat !== 'off' ? 'text-accent' : 'text-text-secondary hover:text-text-primary'}
+                 {player.repeat !== 'off' ? 'text-accent-fg' : 'text-text-secondary hover:text-text-primary'}
                  focus-visible:ring-2 focus-visible:ring-accent"
         >
           {#if player.repeat === 'one'}

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

@@ -170,7 +170,7 @@
 
     <p class="mt-4 text-center text-sm text-text-secondary">
       Already have an account?
-      <a href="/login" class="text-accent hover:underline">Sign in</a>
+      <a href="/login" class="text-accent-fg hover:underline">Sign in</a>
     </p>
   </div>
 </main>

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

@@ -107,7 +107,7 @@
               {rowMeta(r)}
             </div>
             {#if r.imported_album_count > 0 || r.imported_track_count > 0}
-              <div class="text-sm text-accent" data-testid="ingest-progress">
+              <div class="text-sm text-accent-fg" data-testid="ingest-progress">
                 {#if r.kind === 'artist'}
                   {r.imported_album_count} {r.imported_album_count === 1 ? 'album' : 'albums'}
                   · {r.imported_track_count} {r.imported_track_count === 1 ? 'track' : 'tracks'} ingested
@@ -139,7 +139,7 @@
               <a
                 {href}
                 aria-label={`Listen to ${rowAccessibleName(r)}`}
-                class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
+                class="inline-flex items-center gap-1 text-sm text-accent-fg hover:underline"
               >
                 <Music2 size={16} strokeWidth={1} /> Listen
               </a>

web/src/routes/reset-password/[token]/+page.svelte

@@ -89,7 +89,7 @@
       </button>
     </form>
     <p class="mt-4 text-center text-sm text-text-secondary">
-      <a href="/login" class="text-accent hover:underline">Back to login</a>
+      <a href="/login" class="text-accent-fg hover:underline">Back to login</a>
     </p>
   </div>
 </main>

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

@@ -56,7 +56,7 @@
           {#if artists.total > artists.items.length}
             <a
               href={`/search/artists?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {artists.total} →
             </a>
@@ -77,7 +77,7 @@
           {#if albums.total > albums.items.length}
             <a
               href={`/search/albums?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {albums.total} →
             </a>
@@ -98,7 +98,7 @@
           {#if tracks.total > tracks.items.length}
             <a
               href={`/search/tracks?q=${encodeURIComponent(q)}`}
-              class="text-sm text-accent hover:underline"
+              class="text-sm text-accent-fg hover:underline"
             >
               See all {tracks.total} →
             </a>

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

@@ -363,7 +363,7 @@
               <button
                 type="button"
                 onclick={clearToken}
-                class="text-sm text-accent hover:underline"
+                class="text-sm text-accent-fg hover:underline"
                 disabled={$tokenMutation.isPending}
               >clear</button>
             </div>
@@ -402,7 +402,7 @@
         {/if}
 
         <p class="text-xs text-text-secondary">
-          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent hover:underline">listenbrainz.org/profile</a>.
+          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent-fg hover:underline">listenbrainz.org/profile</a>.
           Tokens are stored unencrypted in this server's database — treat as sensitive.
         </p>
       </div>
@@ -682,7 +682,7 @@
     <h2 class="text-lg font-semibold">Library</h2>
     <ul class="space-y-2 text-sm">
       <li>
-        <a href="/library/hidden" class="text-accent hover:underline">Hidden tracks</a>
+        <a href="/library/hidden" class="text-accent-fg hover:underline">Hidden tracks</a>
         <span class="text-text-secondary"> — tracks you've flagged as bad rips, wrong tags, or otherwise unplayable.</span>
       </li>
     </ul>