@cat-factory/app 0.302.2 → 0.303.1

package/app/components/auth/LoginScreen.vue

@@ -213,16 +213,14 @@ const noSignInMethod = computed(
 
 <template>
   <div
-    class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100"
+    class="flex h-screen w-screen items-center justify-center bg-app-950 text-app-100"
     data-testid="login-screen"
   >
-    <div
-      class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
-    >
+    <div class="w-full max-w-sm rounded-xl border border-default bg-default/80 p-8 backdrop-blur">
       <div class="mb-6 text-center">
-        <UIcon name="i-lucide-layout-dashboard" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white">{{ t('auth.login.appTitle') }}</h1>
-        <p class="text-sm text-slate-400">
+        <UIcon name="i-lucide-layout-dashboard" class="mx-auto mb-3 h-10 w-10 text-primary" />
+        <h1 class="mb-1 text-lg font-semibold text-highlighted">{{ t('auth.login.appTitle') }}</h1>
+        <p class="text-sm text-muted">
           <template v-if="mode === 'forgot'">{{ t('auth.login.forgotSubtitle') }}</template>
           <template v-else>{{
             invite ? t('auth.login.inviteSubtitle') : t('auth.login.subtitle')
@@ -243,10 +241,10 @@ const noSignInMethod = computed(
         >
           {{ t('auth.mothership.signIn') }}
         </UButton>
-        <p class="px-1 text-xs text-slate-400">{{ t('auth.mothership.hint') }}</p>
+        <p class="px-1 text-xs text-muted">{{ t('auth.mothership.hint') }}</p>
         <p
           v-if="auth.mothershipError"
-          class="px-1 text-xs text-rose-400"
+          class="px-1 text-xs text-app-error-400"
           data-testid="mothership-error"
         >
           {{ t('auth.mothership.error') }}
@@ -294,22 +292,22 @@ const noSignInMethod = computed(
               :href="tokenCreateUrl(p)"
               target="_blank"
               rel="noopener noreferrer"
-              class="text-xs text-indigo-400 hover:underline"
+              class="text-xs text-primary hover:underline"
             >
               {{ t('auth.localMode.createToken', { provider: PROVIDER_LABELS[p] }) }}
             </a>
           </div>
         </template>
 
-        <p v-if="patError" class="text-sm text-rose-400">{{ patError }}</p>
+        <p v-if="patError" class="text-sm text-app-error-400">{{ patError }}</p>
       </div>
 
       <div
         v-if="isLocalMode && auth.providers.password && mode !== 'forgot'"
-        class="my-4 flex items-center gap-3 text-xs text-slate-500"
+        class="my-4 flex items-center gap-3 text-xs text-dimmed"
       >
-        <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.localMode.orDivider') }}
-        <span class="h-px flex-1 bg-slate-800" />
+        <span class="h-px flex-1 bg-elevated" /> {{ t('auth.localMode.orDivider') }}
+        <span class="h-px flex-1 bg-elevated" />
       </div>
 
       <!-- A refused SSO round-trip: name the rule that refused, don't return the user to an
@@ -341,10 +339,10 @@ const noSignInMethod = computed(
 
       <div
         v-if="showSsoDivider && mode !== 'forgot'"
-        class="my-4 flex items-center gap-3 text-xs text-slate-500"
+        class="my-4 flex items-center gap-3 text-xs text-dimmed"
       >
-        <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.login.or') }}
-        <span class="h-px flex-1 bg-slate-800" />
+        <span class="h-px flex-1 bg-elevated" /> {{ t('auth.login.or') }}
+        <span class="h-px flex-1 bg-elevated" />
       </div>
 
       <!-- OAuth providers -->
@@ -374,10 +372,10 @@ const noSignInMethod = computed(
 
       <div
         v-if="showOAuthDivider && mode !== 'forgot'"
-        class="my-4 flex items-center gap-3 text-xs text-slate-500"
+        class="my-4 flex items-center gap-3 text-xs text-dimmed"
       >
-        <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.login.or') }}
-        <span class="h-px flex-1 bg-slate-800" />
+        <span class="h-px flex-1 bg-elevated" /> {{ t('auth.login.or') }}
+        <span class="h-px flex-1 bg-elevated" />
       </div>
 
       <!-- Email / password -->
@@ -413,7 +411,7 @@ const noSignInMethod = computed(
           class="w-full"
           data-testid="login-password"
         />
-        <p v-if="error" class="text-sm text-rose-400" data-testid="login-error">{{ error }}</p>
+        <p v-if="error" class="text-sm text-app-error-400" data-testid="login-error">{{ error }}</p>
         <UButton
           block
           size="lg"
@@ -424,13 +422,13 @@ const noSignInMethod = computed(
         >
           {{ mode === 'signup' ? t('auth.login.createAccount') : t('auth.login.signIn') }}
         </UButton>
-        <p class="text-center text-xs text-slate-400">
+        <p class="text-center text-xs text-muted">
           <template v-if="mode === 'login'">
             <i18n-t keypath="auth.login.needAccount" tag="span" scope="global">
               <template #signUp>
                 <button
                   type="button"
-                  class="text-indigo-400 hover:underline"
+                  class="text-primary hover:underline"
                   @click="setMode('signup')"
                 >
                   {{ t('auth.login.signUp') }}
@@ -443,7 +441,7 @@ const noSignInMethod = computed(
               <template #signIn>
                 <button
                   type="button"
-                  class="text-indigo-400 hover:underline"
+                  class="text-primary hover:underline"
                   @click="setMode('login')"
                 >
                   {{ t('auth.login.signIn') }}
@@ -452,8 +450,8 @@ const noSignInMethod = computed(
             </i18n-t>
           </template>
         </p>
-        <p v-if="mode === 'login'" class="text-center text-xs text-slate-400">
-          <button type="button" class="text-indigo-400 hover:underline" @click="setMode('forgot')">
+        <p v-if="mode === 'login'" class="text-center text-xs text-muted">
+          <button type="button" class="text-primary hover:underline" @click="setMode('forgot')">
             {{ t('auth.login.forgotPassword') }}
           </button>
         </p>
@@ -469,10 +467,10 @@ const noSignInMethod = computed(
             auth.providers.password ||
             hasConfiguredPat
           "
-          class="my-4 flex items-center gap-3 text-xs text-slate-500"
+          class="my-4 flex items-center gap-3 text-xs text-dimmed"
         >
-          <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.login.or') }}
-          <span class="h-px flex-1 bg-slate-800" />
+          <span class="h-px flex-1 bg-elevated" /> {{ t('auth.login.or') }}
+          <span class="h-px flex-1 bg-elevated" />
         </div>
         <form class="space-y-3" @submit.prevent="submitRemotePat">
           <div v-if="remotePatProviders.length > 1" class="flex gap-2">
@@ -502,7 +500,7 @@ const noSignInMethod = computed(
             size="lg"
             class="w-full"
           />
-          <p v-if="remotePatError" class="text-sm text-rose-400">{{ remotePatError }}</p>
+          <p v-if="remotePatError" class="text-sm text-app-error-400">{{ remotePatError }}</p>
           <UButton
             block
             size="lg"
@@ -515,7 +513,7 @@ const noSignInMethod = computed(
           </UButton>
           <!-- Local mode only: say what else the token is for BEFORE it is handed over, since it
                becomes the credential every agent step on this machine clones and pushes with. -->
-          <p v-if="isLocalMode" class="px-1 text-xs text-slate-400">
+          <p v-if="isLocalMode" class="px-1 text-xs text-muted">
             {{ t('auth.localMode.tokenBecomesCredential') }}
           </p>
           <p class="px-1 text-center">
@@ -523,7 +521,7 @@ const noSignInMethod = computed(
               :href="tokenCreateUrl(remotePatProvider)"
               target="_blank"
               rel="noopener noreferrer"
-              class="text-xs text-indigo-400 hover:underline"
+              class="text-xs text-primary hover:underline"
             >
               {{
                 t('auth.localMode.createToken', { provider: PROVIDER_LABELS[remotePatProvider] })
@@ -550,7 +548,7 @@ const noSignInMethod = computed(
         @submit.prevent="submitForgot"
       >
         <template v-if="forgotSent">
-          <p class="text-sm text-slate-300">
+          <p class="text-sm text-toned">
             {{ t('auth.login.forgotSent') }}
           </p>
         </template>
@@ -564,13 +562,13 @@ const noSignInMethod = computed(
             size="lg"
             class="w-full"
           />
-          <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
+          <p v-if="error" class="text-sm text-app-error-400">{{ error }}</p>
           <UButton block size="lg" color="primary" type="submit" :loading="busy">
             {{ t('auth.login.sendResetLink') }}
           </UButton>
         </template>
-        <p class="text-center text-xs text-slate-400">
-          <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
+        <p class="text-center text-xs text-muted">
+          <button type="button" class="text-primary hover:underline" @click="setMode('login')">
             {{ t('auth.login.backToSignIn') }}
           </button>
         </p>

package/app/components/auth/ResetPasswordScreen.vue

@@ -48,18 +48,18 @@ function goToLogin() {
 </script>
 
 <template>
-  <div class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100">
-    <div
-      class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
-    >
+  <div class="flex h-screen w-screen items-center justify-center bg-app-950 text-app-100">
+    <div class="w-full max-w-sm rounded-xl border border-default bg-default/80 p-8 backdrop-blur">
       <div class="mb-6 text-center">
-        <UIcon name="i-lucide-key-round" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
-        <h1 class="mb-1 text-lg font-semibold text-white">{{ t('auth.resetPassword.title') }}</h1>
-        <p class="text-sm text-slate-400">{{ t('auth.resetPassword.subtitle') }}</p>
+        <UIcon name="i-lucide-key-round" class="mx-auto mb-3 h-10 w-10 text-primary" />
+        <h1 class="mb-1 text-lg font-semibold text-highlighted">
+          {{ t('auth.resetPassword.title') }}
+        </h1>
+        <p class="text-sm text-muted">{{ t('auth.resetPassword.subtitle') }}</p>
       </div>
 
       <template v-if="done">
-        <p class="mb-4 text-sm text-slate-300">
+        <p class="mb-4 text-sm text-toned">
           {{ t('auth.resetPassword.doneBody') }}
         </p>
         <UButton block size="lg" color="primary" @click="goToLogin">{{
@@ -68,7 +68,7 @@ function goToLogin() {
       </template>
 
       <template v-else-if="!token">
-        <p class="mb-4 text-sm text-rose-400">
+        <p class="mb-4 text-sm text-app-error-400">
           {{ t('auth.resetPassword.missingToken') }}
         </p>
         <UButton block size="lg" color="neutral" variant="subtle" @click="goToLogin">
@@ -93,12 +93,12 @@ function goToLogin() {
           size="lg"
           class="w-full"
         />
-        <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
+        <p v-if="error" class="text-sm text-app-error-400">{{ error }}</p>
         <UButton block size="lg" color="primary" type="submit" :loading="busy">
           {{ t('auth.resetPassword.submit') }}
         </UButton>
-        <p class="text-center text-xs text-slate-400">
-          <button type="button" class="text-indigo-400 hover:underline" @click="goToLogin">
+        <p class="text-center text-xs text-muted">
+          <button type="button" class="text-primary hover:underline" @click="goToLogin">
             {{ t('auth.resetPassword.backToSignIn') }}
           </button>
         </p>

package/app/components/auth/UserMenu.vue

@@ -37,7 +37,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
       type="button"
       data-testid="user-menu"
       :title="collapsed ? auth.user.name || auth.user.login : undefined"
-      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-start transition hover:bg-slate-800/60"
+      class="flex w-full items-center gap-2 rounded-lg border border-default bg-default/60 p-2 text-start transition hover:bg-elevated/60"
       :class="collapsed ? 'justify-center' : ''"
     >
       <UAvatar
@@ -47,12 +47,12 @@ const items = computed<DropdownMenuItem[][]>(() => [
         icon="i-lucide-user"
       />
       <div v-if="!collapsed" class="min-w-0 flex-1">
-        <div class="truncate text-xs font-medium text-white">
+        <div class="truncate text-xs font-medium text-highlighted">
           {{ auth.user.name || auth.user.login }}
         </div>
-        <div class="truncate text-[10px] text-slate-500">@{{ auth.user.login }}</div>
+        <div class="truncate text-[10px] text-dimmed">@{{ auth.user.login }}</div>
       </div>
-      <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-slate-500" />
+      <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
     </button>
   </UDropdownMenu>
 </template>

package/app/components/binaryCandidates/BinaryCandidatesWindow.vue

@@ -190,7 +190,7 @@ const { requestClose } = useUnsavedGuard({
   <ResultWindowShell
     :open="open"
     icon="i-lucide-images"
-    icon-class="bg-sky-500/15 text-sky-300"
+    icon-class="bg-app-info-500/15 text-app-info-300"
     :title="headerTitle"
     :subtitle="t('binaryCandidates.subtitle')"
     width="5xl"
@@ -202,7 +202,7 @@ const { requestClose } = useUnsavedGuard({
            declared its candidates and one whose block was unreadable need different fixes. -->
       <p
         v-if="noChoiceKey"
-        class="mb-3 rounded border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-200"
+        class="mb-3 rounded border border-app-warning-500/30 bg-app-warning-500/5 px-3 py-2 text-xs text-app-warning-200"
         data-testid="binary-candidates-no-choice"
       >
         {{ t(noChoiceKey) }}
@@ -211,7 +211,7 @@ const { requestClose } = useUnsavedGuard({
       <!-- An automatic keep is NOT a review, and must never render as one. -->
       <p
         v-if="view.automatic"
-        class="mb-3 rounded border border-slate-600/40 bg-slate-800/40 px-3 py-2 text-xs text-slate-300"
+        class="mb-3 rounded border border-app-600/40 bg-elevated/40 px-3 py-2 text-xs text-toned"
         data-testid="binary-candidates-automatic"
       >
         {{ t('binaryCandidates.automatic') }}
@@ -221,7 +221,7 @@ const { requestClose } = useUnsavedGuard({
            over all five. -->
       <p
         v-if="warnings"
-        class="mb-3 text-xs text-amber-300"
+        class="mb-3 text-xs text-app-warning-300"
         data-testid="binary-candidates-warnings"
       >
         <span v-if="view.state.omitted">{{
@@ -236,7 +236,7 @@ const { requestClose } = useUnsavedGuard({
       </p>
 
       <div v-for="group in view.groups" :key="group.subject ?? '·'" class="mb-6">
-        <h3 class="mb-2 text-xs font-medium text-slate-400">
+        <h3 class="mb-2 text-xs font-medium text-muted">
           {{ group.subject ?? t('binaryCandidates.unlabelledSubject') }}
         </h3>
         <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
@@ -246,8 +246,8 @@ const { requestClose } = useUnsavedGuard({
             class="rounded border p-2 transition"
             :class="[
               selected.includes(row.id) || row.kept
-                ? 'border-sky-400/60 bg-sky-500/5'
-                : 'border-slate-700/60',
+                ? 'border-app-info-400/60 bg-app-info-500/5'
+                : 'border-muted/60',
               view.awaiting ? 'cursor-pointer' : '',
             ]"
             data-testid="binary-candidate-card"
@@ -268,13 +268,13 @@ const { requestClose } = useUnsavedGuard({
                  that is no longer selected. -->
             <label
               v-if="view.awaiting"
-              class="mb-1.5 flex cursor-pointer items-center gap-2 text-[11px] text-slate-400"
+              class="mb-1.5 flex cursor-pointer items-center gap-2 text-[11px] text-muted"
               @click.stop
             >
               <input
                 :type="view.multiSelect ? 'checkbox' : 'radio'"
                 name="binary-candidate"
-                class="accent-sky-500"
+                class="accent-app-info-500"
                 :checked="selected.includes(row.id)"
                 :aria-label="candidateLabel(row)"
                 data-testid="binary-candidate-select"
@@ -304,22 +304,22 @@ const { requestClose } = useUnsavedGuard({
                  rather than left as an empty frame the reader reads as a failed generation. -->
             <p
               v-else
-              class="mb-2 flex h-24 items-center justify-center rounded bg-slate-800/60 px-2 text-center text-[10px] text-slate-400"
+              class="mb-2 flex h-24 items-center justify-center rounded bg-elevated/60 px-2 text-center text-[10px] text-muted"
               data-testid="binary-candidate-no-preview"
             >
               {{ t('binaryCandidates.noPreview') }}
             </p>
-            <p class="text-xs text-slate-200">
+            <p class="text-xs text-default">
               {{
                 row.generator
                   ? t('binaryCandidates.fromGenerator', { generator: row.generator })
                   : t('binaryCandidates.unattributed')
               }}
             </p>
-            <p v-if="row.note" class="mt-1 text-[11px] text-slate-400">{{ row.note }}</p>
-            <p class="mt-1 break-all text-[10px] text-slate-500">{{ row.location }}</p>
-            <p v-if="row.contentType" class="text-[10px] text-slate-500">{{ row.contentType }}</p>
-            <p v-if="row.kept" class="mt-1 text-[11px] text-emerald-300">
+            <p v-if="row.note" class="mt-1 text-[11px] text-muted">{{ row.note }}</p>
+            <p class="mt-1 break-all text-[10px] text-dimmed">{{ row.location }}</p>
+            <p v-if="row.contentType" class="text-[10px] text-dimmed">{{ row.contentType }}</p>
+            <p v-if="row.kept" class="mt-1 text-[11px] text-app-success-300">
               {{
                 row.storeAs
                   ? t('binaryCandidates.keptAs', { id: row.storeAs })
@@ -352,19 +352,21 @@ const { requestClose } = useUnsavedGuard({
         />
         <p
           v-if="missingAliases.length"
-          class="mt-1 text-[11px] text-amber-300"
+          class="mt-1 text-[11px] text-app-warning-300"
           data-testid="binary-candidates-missing-alias"
         >
           {{ t('binaryCandidates.missingAlias') }}
         </p>
         <p
           v-else-if="duplicateAliases"
-          class="mt-1 text-[11px] text-amber-300"
+          class="mt-1 text-[11px] text-app-warning-300"
           data-testid="binary-candidates-duplicate-alias"
         >
           {{ t('binaryCandidates.duplicateAlias') }}
         </p>
-        <p v-if="candidates.error" class="mt-1 text-[11px] text-red-300">{{ candidates.error }}</p>
+        <p v-if="candidates.error" class="mt-1 text-[11px] text-app-error-300">
+          {{ candidates.error }}
+        </p>
         <div class="mt-2 flex justify-end">
           <UButton
             size="xs"
@@ -388,28 +390,28 @@ const { requestClose } = useUnsavedGuard({
          simply not fetched. -->
     <div
       v-else-if="absence === 'no_run'"
-      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-muted"
       data-testid="binary-candidates-no-run"
     >
       <UIcon name="i-lucide-unlink" class="h-8 w-8 opacity-40" />
       <p class="text-sm">{{ t('binaryCandidates.noRun.title') }}</p>
-      <p class="max-w-md text-[11px] text-slate-500">{{ t('binaryCandidates.noRun.hint') }}</p>
+      <p class="max-w-md text-[11px] text-dimmed">{{ t('binaryCandidates.noRun.hint') }}</p>
     </div>
     <div
       v-else-if="absence === 'loading'"
-      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-muted"
       data-testid="binary-candidates-loading"
     >
       <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
     </div>
     <div
       v-else-if="absence === 'load_failed'"
-      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-muted"
       data-testid="binary-candidates-load-error"
     >
-      <UIcon name="i-lucide-triangle-alert" class="h-8 w-8 text-amber-400/70" />
+      <UIcon name="i-lucide-triangle-alert" class="h-8 w-8 text-app-warning-400/70" />
       <p class="text-sm">{{ t('binaryCandidates.loadFailed') }}</p>
-      <p class="max-w-md break-words text-[11px] text-slate-500">{{ candidates.error }}</p>
+      <p class="max-w-md break-words text-[11px] text-dimmed">{{ candidates.error }}</p>
       <UButton
         size="xs"
         color="neutral"
@@ -423,7 +425,7 @@ const { requestClose } = useUnsavedGuard({
     </div>
     <div
       v-else
-      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-muted"
       data-testid="binary-candidates-empty"
     >
       <UIcon name="i-lucide-images" class="h-8 w-8 opacity-40" />

package/app/components/binaryOutput/BinaryOutputReport.vue

@@ -55,13 +55,13 @@ const state = computed(() => {
     v-if="view"
     class="space-y-3"
     :class="
-      variant === 'card' ? 'scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4' : ''
+      variant === 'card' ? 'scroll-mt-4 rounded-xl border border-default bg-default/50 p-4' : ''
     "
     data-testid="binary-output-report"
   >
     <div
       v-if="variant === 'card'"
-      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
     >
       <UIcon name="i-lucide-image" class="h-3.5 w-3.5" />
       <span>{{ t('binaryOutput.heading') }}</span>
@@ -72,7 +72,7 @@ const state = computed(() => {
          question the artifacts below cannot answer. An AUTOMATIC keep says so: nobody looked. -->
     <p
       v-if="candidates && candidates.state.candidates.length > 0"
-      class="text-[12px] leading-relaxed text-slate-300"
+      class="text-[12px] leading-relaxed text-toned"
       data-testid="binary-output-candidate-decision"
     >
       {{
@@ -107,28 +107,28 @@ const state = computed(() => {
          records a declaration against a step that never held one), and rendering a blank
          would read as a missing value rather than an absent comparison. -->
     <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[11px]">
-      <dt class="text-slate-500">{{ t('binaryOutput.target') }}</dt>
+      <dt class="text-dimmed">{{ t('binaryOutput.target') }}</dt>
       <dd
         v-if="view.target"
-        class="min-w-0 font-mono text-slate-300"
+        class="min-w-0 font-mono text-toned"
         data-testid="binary-output-target"
       >
         {{ view.target }}
       </dd>
-      <dd v-else class="min-w-0 text-slate-400" data-testid="binary-output-target">
+      <dd v-else class="min-w-0 text-muted" data-testid="binary-output-target">
         {{ t('binaryOutput.targetNone') }}
       </dd>
       <template v-if="view.contextServices.length">
-        <dt class="text-slate-500">{{ t('binaryOutput.contextServices') }}</dt>
-        <dd class="min-w-0 font-mono text-slate-400">{{ view.contextServices.join(', ') }}</dd>
+        <dt class="text-dimmed">{{ t('binaryOutput.contextServices') }}</dt>
+        <dd class="min-w-0 font-mono text-muted">{{ view.contextServices.join(', ') }}</dd>
       </template>
       <!-- The formats the step REQUIRED, beside where they were meant to go. Rendered whenever
            the step stated any, including on a run that delivered them: the requirement is what
            makes the content types below it readable, and a reader checking whether a mesh will
            load needs to see what was asked for even when nothing went wrong. -->
       <template v-if="view.mediaTypes.length">
-        <dt class="text-slate-500">{{ t('binaryOutput.mediaTypes') }}</dt>
-        <dd class="min-w-0 font-mono text-slate-400" data-testid="binary-output-media-types">
+        <dt class="text-dimmed">{{ t('binaryOutput.mediaTypes') }}</dt>
+        <dd class="min-w-0 font-mono text-muted" data-testid="binary-output-media-types">
           {{ view.mediaTypes.join(', ') }}
         </dd>
       </template>
@@ -147,7 +147,7 @@ const state = computed(() => {
       <li
         v-for="(row, i) in view.rows"
         :key="`${row.service}:${row.location}:${i}`"
-        class="relative rounded-md border border-slate-800 bg-slate-950/40 px-2.5 py-2"
+        class="relative rounded-md border border-default bg-app-950/40 px-2.5 py-2"
         data-testid="binary-output-artifact"
       >
         <CopyButton :text="row.location" class="absolute end-1 top-1" />
@@ -158,10 +158,10 @@ const state = computed(() => {
           :label="row.entity ?? row.description"
           class="mb-2 pe-8"
         />
-        <code class="block break-all pe-8 font-mono text-[11px] text-slate-200">{{
+        <code class="block break-all pe-8 font-mono text-[11px] text-default">{{
           row.location
         }}</code>
-        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-slate-500">
+        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-dimmed">
           <span class="font-mono">{{ row.service }}</span>
           <!-- The join the report cannot make on its own, and the question a human opens this
                for: did it go where the step pointed it? -->
@@ -225,7 +225,7 @@ const state = computed(() => {
             {{ t('binaryOutput.missizedBadge') }}
           </UBadge>
         </div>
-        <p v-if="row.description" class="mt-1 text-[11px] leading-relaxed text-slate-400">
+        <p v-if="row.description" class="mt-1 text-[11px] leading-relaxed text-muted">
           {{ row.description }}
         </p>
       </li>
@@ -234,7 +234,7 @@ const state = computed(() => {
     <!-- Every qualification the report counted, each naming its own number. Never folded into
          one "some entries were dropped": the fix for an unknown service id is not the fix for
          a malformed entry, and neither is the fix for a list that stops short of the tail. -->
-    <ul class="space-y-1 text-[11px] text-amber-400">
+    <ul class="space-y-1 text-[11px] text-app-warning-400">
       <!-- The step's OWN target went missing from the catalog, and an id the AGENT invented,
            are two different failures with two different fixes (re-register it, versus correct
            the declaration). `binaryOutputView` returns them as DISJOINT fields precisely so

package/app/components/binaryOutput/StoredAssetView.vue

@@ -89,7 +89,7 @@ const filename = computed(() => {
          frame. -->
     <p
       v-else-if="!isImage && url"
-      class="flex items-center gap-1.5 rounded bg-slate-800/60 px-2 py-1.5 text-[11px] text-slate-300"
+      class="flex items-center gap-1.5 rounded bg-elevated/60 px-2 py-1.5 text-[11px] text-toned"
       data-testid="stored-asset-file"
     >
       <UIcon name="i-lucide-file" class="h-3.5 w-3.5 shrink-0" />
@@ -97,7 +97,7 @@ const filename = computed(() => {
     </p>
     <p
       v-else-if="status === 'error'"
-      class="flex items-center gap-1.5 text-[11px] text-amber-300"
+      class="flex items-center gap-1.5 text-[11px] text-app-warning-300"
       data-testid="stored-asset-error"
     >
       <span>{{ t('binaryOutput.asset.loadFailed') }}</span>
@@ -105,7 +105,7 @@ const filename = computed(() => {
         {{ t('binaryOutput.asset.retry') }}
       </UButton>
     </p>
-    <p v-else class="text-[11px] text-slate-500" data-testid="stored-asset-loading">
+    <p v-else class="text-[11px] text-dimmed" data-testid="stored-asset-loading">
       {{ t('binaryOutput.asset.loading') }}
     </p>
 
@@ -116,7 +116,7 @@ const filename = computed(() => {
         :href="url"
         target="_blank"
         rel="noopener"
-        class="text-sky-300 hover:underline"
+        class="text-app-info-300 hover:underline"
         data-testid="stored-asset-open"
         @click.stop
         >{{ t('binaryOutput.asset.open') }}</a
@@ -124,7 +124,7 @@ const filename = computed(() => {
       <a
         :href="url"
         :download="filename"
-        class="text-sky-300 hover:underline"
+        class="text-app-info-300 hover:underline"
         data-testid="stored-asset-download"
         @click.stop
         >{{ t('binaryOutput.asset.download') }}</a