fix(a11y): make every text colour clear WCAG AA on every ramp

a11y.md flagged --yj-text-tertiary on --yj-bg-surface as 'borderline
(~4.1:1) but that needs a real measurement', and plan 007 parked it as
'worth measuring before planning'. Measured, against the rendered app
and then across all three background ramps: it failed AA in nine of
twelve text/surface combinations, as low as 2.31:1 on dark's overlay
and 2.55:1 on light's -- the app's most-used secondary text colour,
failing on every view. Not borderline. 110 failing nodes across twelve
views, now 0 of 659.

Three separate mechanisms, and only the first is the finding:

- The ramps. Tertiary is raised per ramp (#a6a6a6 dark, #949494 darker,
  #5c636a light), sized to the lightest surface it actually sits on and
  keeping its hue. Sizing it to bgOverlay too would need a grey lighter
  than secondary, so bgOverlay is documented as not a text surface and
  the one component that put text there uses primary.
- The avatar generator. hsl(hue, 45%, 35%) behind white initials failed
  for 35 of the 360 hues -- the yellow-green band -- so which artists
  were unreadable depended on how their names hashed. The two a sweep
  found were not the finding. 32% clears every hue.
- Jobs' local #ff6b6b, at 4.15:1 on elevated.

Pinned by a unit test over the palette table rather than a DOM sweep:
the ramps are pure data, and checking only what happens to be on screen
is exactly how the light ramp went unexamined. Note that make ui-visual
cannot see any of this -- the component tier renders the fallbacks,
because theme-store sets :root only in the real app.

frontend/src/components/explore-artist-details/explore-artist-details.ts

@@ -1,3 +1,4 @@
+import { avatarBackground } from '@utils/avatar-color';
 import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { designTokens } from '../../styles/tokens.css';
@@ -60,14 +61,6 @@ const NON_STUDIO_SECONDARY_TYPES = new Set([
 
 /* ── Utility functions (duplicated from explore-view per design decision) ── */
 
-function nameToHue(name: string): number {
-    let hash = 0;
-    for (let i = 0; i < name.length; i++) {
-        hash = name.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return Math.abs(hash) % 360;
-}
-
 function extractYear(dateStr: string): string {
     if (!dateStr) return '';
     return dateStr.substring(0, 4);
@@ -1884,7 +1877,6 @@ export class ExploreArtistDetails extends LitElement {
     /* ── Render ── */
 
     override render() {
-        const hue = nameToHue(this.artistName);
 
         return html`
             <div class="artist-header">
@@ -1898,7 +1890,7 @@ export class ExploreArtistDetails extends LitElement {
                 </button>
                 <div
                     class="artist-avatar"
-                    style="background: hsl(${hue}, 45%, 35%)"
+                    style="background: ${avatarBackground(this.artistName)}"
                 >
                     ${this.artistImageURL
                         ? html`<img
@@ -2392,7 +2384,6 @@ export class ExploreArtistDetails extends LitElement {
                 <h3 class="section-header">Similar Artists</h3>
                 <div class="similar-row ${collapsed ? 'collapsed' : ''}">
                     ${visible.map((a) => {
-                        const hue = nameToHue(a.name);
                         const imgURL = this.similarImageURLs.get(a.artistMbid);
                         return html`
                             <div
@@ -2412,7 +2403,7 @@ export class ExploreArtistDetails extends LitElement {
                             >
                                 <div
                                     class="similar-avatar"
-                                    style="background: hsl(${hue}, 45%, 35%)"
+                                    style="background: ${avatarBackground(a.name)}"
                                 >
                                     ${imgURL
                                         ? html`<img