refactor: components read the obsidian surface from its token, not a typed rgba (3108)

Thirteen rgba(20, 23, 26, ...) across six components (the task counted
eleven). They now use --v-theme-background, which Vuetify maps to obsidian;
ArtistHeader's banner fade uses --fc-chrome-rgb, since it is nav-style
chrome. A spec fails if the literal reappears outside a comment. Values are
unchanged, so nothing should render differently.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LVjrnpQjRgHdvq95rASoiR

frontend/src/components/modal/ImageViewer.vue

@@ -213,7 +213,7 @@ function nextFrame() {
   --fc-side-w: 320px;
   /* Obsidian haze (#14171A = 20,23,26) — same palette as TopNav,
      mid-opacity + blur so the page behind shows through faintly. */
-  background: rgba(20, 23, 26, 0.65);
+  background: rgba(var(--v-theme-background), 0.65);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   outline: none;
@@ -221,7 +221,7 @@ function nextFrame() {
 }
 .fc-viewer__close, .fc-viewer__nav {
   position: absolute; top: 50%;
-  background: rgba(20, 23, 26, 0.7);
+  background: rgba(var(--v-theme-background), 0.7);
   color: rgb(var(--v-theme-parchment, 232 228 216));
   border: 1px solid rgb(var(--v-theme-surface-light));
   border-radius: 50%;
@@ -359,7 +359,7 @@ function nextFrame() {
     z-index: 1;
     /* Opaque obsidian so the scrolling panel never bleeds through the
        haze behind the pinned image. */
-    background: rgb(20, 23, 26);
+    background: rgb(var(--v-theme-background));
   }
   .fc-viewer__side {
     width: 100%;