refactor(ui): single global .fc-muted token (DRY pattern sweep)

The muted-text token was redefined identically in 12 component <style scoped>
blocks. Consolidate to one global utility in styles/app.css; remove the 12
copies. Keeps the explicit on-surface-variant (vellum) token, NOT Vuetify's
opacity-based text-medium-emphasis (per the muted-text-token rule). Behavior-
preserving: every class=fc-muted usage now resolves to the single source.

§8b exhaustiveness caught (and I fixed) my own sed clobbering the new app.css
rule — now exactly one .fc-muted definition exists, zero component-local.
Catalog updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/artist/ArtistDangerZone.vue

@@ -91,5 +91,4 @@ async function onConfirm(token) {
   border-color: rgb(var(--v-theme-error));
   border-radius: 8px;
 }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>

frontend/src/components/cleanup/MinDimensionCard.vue

@@ -121,5 +121,4 @@ async function onConfirmedDelete(token) {
 
 <style scoped>
 .fc-clean-card { border-radius: 8px; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>

frontend/src/components/cleanup/SingleColorAuditCard.vue

@@ -190,5 +190,4 @@ async function onConfirmedApply(token) {
 
 <style scoped>
 .fc-clean-card { border-radius: 8px; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>

frontend/src/components/cleanup/TransparencyAuditCard.vue

@@ -173,5 +173,4 @@ async function onConfirmedApply(token) {
 
 <style scoped>
 .fc-clean-card { border-radius: 8px; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>

frontend/src/components/settings/BackupCard.vue

@@ -192,7 +192,6 @@ async function onConfirmSubmit(token) {
 
 <style scoped>
 .fc-backup-card { border-radius: 8px; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-section-title {
   font-family: 'Fraunces', Georgia, serif;
   font-size: 16px; font-weight: 500;

frontend/src/components/settings/BackupRunsTable.vue

@@ -97,5 +97,4 @@ function formatRelative(iso) {
 <style scoped>
 .fc-backup-table { background: transparent; }
 .fc-tabular { font-variant-numeric: tabular-nums; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>

frontend/src/components/settings/BrowserExtensionCard.vue

@@ -187,7 +187,4 @@ async function copy(text, label) {
 .fc-ext-install {
   display: flex; flex-wrap: wrap; gap: 8px;
 }
-.fc-muted {
-  color: rgb(var(--v-theme-on-surface-variant));
-}
 </style>

frontend/src/components/settings/PostMaintenanceCard.vue

@@ -94,7 +94,6 @@ async function onCommit() {
 
 <style scoped>
 .fc-post-maint { border-radius: 8px; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-name-grid {
   display: flex; flex-wrap: wrap; gap: 4px 8px;
   max-height: 200px; overflow-y: auto;

frontend/src/components/settings/QueuesTable.vue

@@ -101,7 +101,6 @@ function recentErr(name) { return recentByQueue.value[name]?.err || 0 }
 .fc-ok { color: rgb(var(--v-theme-success, 76 175 80)); }
 .fc-err { color: rgb(var(--v-theme-error, 220 80 80)); }
 .fc-warn { color: rgb(var(--v-theme-warning, 255 179 0)); font-weight: 500; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-sep {
   margin: 0 4px;
   color: rgb(var(--v-theme-on-surface-variant));

frontend/src/components/settings/SystemActivityTab.vue

@@ -305,5 +305,4 @@ function formatRelative(iso) {
   cursor: pointer;
 }
 .fc-err-link:hover { text-decoration: underline; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>

frontend/src/components/settings/TagMaintenanceCard.vue

@@ -304,7 +304,6 @@ async function onNormCommit() {
 
 <style scoped>
 .fc-tag-maint { border-radius: 8px; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-name-grid {
   display: flex; flex-wrap: wrap; gap: 4px 8px;
   max-height: 200px; overflow-y: auto;

frontend/src/styles/app.css

@@ -31,3 +31,11 @@
   border: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.25);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
+
+/* Canonical muted/secondary text token (DRY pattern sweep 2026-06-09).
+   Was redefined identically in 12 component <style scoped> blocks; now one
+   global utility. Muted text uses the explicit on-surface-variant (vellum)
+   token, NOT opacity — Vuetify's text-medium-emphasis is opacity-based and is
+   deliberately not used here. `.fc-muted` is a custom class Vuetify never
+   emits, so no specificity/reorder fight — no !important needed. */
+.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }

frontend/src/views/CleanupView.vue

@@ -29,5 +29,4 @@ import TagMaintenanceCard from '../components/settings/TagMaintenanceCard.vue'
 
 <style scoped>
 .fc-cleanup { max-width: 900px; }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>