@cat-factory/app 0.302.1 → 0.303.0

package/app/components/assistant/AssistantModal.vue

@@ -154,16 +154,16 @@ function reveal(blockId: string): void {
   <UModal v-model:open="open" :title="t('assistant.title')" :ui="{ content: 'max-w-2xl' }">
     <template #body>
       <div class="space-y-4">
-        <p class="text-sm text-slate-400">{{ t('assistant.intro') }}</p>
+        <p class="text-sm text-muted">{{ t('assistant.intro') }}</p>
 
         <!-- The read FAILED: this deployment may well have a model, and nobody can tell from here.
              So it offers the read again instead of explaining a configuration that may be fine. -->
         <div
           v-if="surface === 'unreadable'"
-          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          class="flex items-start gap-2 rounded-md bg-elevated/60 p-3 text-sm text-toned"
           data-testid="assistant-unreadable"
         >
-          <UIcon name="i-lucide-unplug" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+          <UIcon name="i-lucide-unplug" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
           <div class="space-y-2">
             <p>{{ t('assistant.unreadable') }}</p>
             <UButton
@@ -181,10 +181,10 @@ function reveal(blockId: string): void {
         <!-- No model wired: say so, rather than offering a box whose every submit would 503. -->
         <div
           v-else-if="surface === 'unwired'"
-          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          class="flex items-start gap-2 rounded-md bg-elevated/60 p-3 text-sm text-toned"
           data-testid="assistant-unwired"
         >
-          <UIcon name="i-lucide-plug" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" />
+          <UIcon name="i-lucide-plug" class="mt-0.5 h-4 w-4 shrink-0 text-dimmed" />
           <span>{{ t('assistant.unavailable') }}</span>
         </div>
 
@@ -192,10 +192,10 @@ function reveal(blockId: string): void {
              and every submit against it would be refused with `assistant_no_actions`. -->
         <div
           v-else-if="surface === 'no_actions'"
-          class="flex items-start gap-2 rounded-md bg-slate-800/60 p-3 text-sm text-slate-300"
+          class="flex items-start gap-2 rounded-md bg-elevated/60 p-3 text-sm text-toned"
           data-testid="assistant-no-actions"
         >
-          <UIcon name="i-lucide-list-x" class="mt-0.5 h-4 w-4 shrink-0 text-slate-500" />
+          <UIcon name="i-lucide-list-x" class="mt-0.5 h-4 w-4 shrink-0 text-dimmed" />
           <span>{{ t('assistant.noActions') }}</span>
         </div>
 
@@ -240,7 +240,7 @@ function reveal(blockId: string): void {
               role="status"
               :aria-live="submitReason ? 'polite' : 'off'"
               class="flex items-center gap-1 text-xs"
-              :class="submitReason ? 'text-amber-400' : 'text-slate-500'"
+              :class="submitReason ? 'text-app-warning-400' : 'text-dimmed'"
               data-testid="assistant-submit-status"
             >
               <UIcon
@@ -254,7 +254,7 @@ function reveal(blockId: string): void {
 
           <!-- What it can do, always visible: the catalog is the affordance. -->
           <div v-if="examples.length" class="space-y-2">
-            <p class="text-xs font-medium uppercase tracking-wide text-slate-500">
+            <p class="text-xs font-medium uppercase tracking-wide text-dimmed">
               {{ t('assistant.examplesTitle') }}
             </p>
             <div class="flex flex-col gap-1">
@@ -262,11 +262,11 @@ function reveal(blockId: string): void {
                 v-for="entry in examples"
                 :key="entry.actionId"
                 type="button"
-                class="rounded-md px-2 py-1 text-left text-sm text-slate-300 hover:bg-slate-800"
+                class="rounded-md px-2 py-1 text-left text-sm text-toned hover:bg-elevated"
                 @click="useExample(entry.example)"
               >
-                <span class="text-slate-400">{{ entry.label }}</span>
-                <span class="block text-xs text-slate-500">“{{ entry.example }}”</span>
+                <span class="text-muted">{{ entry.label }}</span>
+                <span class="block text-xs text-dimmed">“{{ entry.example }}”</span>
               </button>
             </div>
           </div>
@@ -274,12 +274,12 @@ function reveal(blockId: string): void {
           <!-- The outcome. Rendered from the turn's data; no model prose reaches this. -->
           <div
             v-if="outcome"
-            class="rounded-md border border-slate-700 p-3 text-sm"
+            class="rounded-md border border-muted p-3 text-sm"
             data-testid="assistant-outcome"
           >
             <template v-if="outcome.status === 'performed'">
-              <div class="flex items-start gap-2 text-slate-200">
-                <UIcon name="i-lucide-check" class="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
+              <div class="flex items-start gap-2 text-default">
+                <UIcon name="i-lucide-check" class="mt-0.5 h-4 w-4 shrink-0 text-app-success-400" />
                 <div class="space-y-2">
                   <p v-if="outcome.result.actionId === 'declare-service-dependency'">
                     {{
@@ -329,8 +329,11 @@ function reveal(blockId: string): void {
             </template>
 
             <template v-else-if="outcome.status === 'needs_input'">
-              <div class="flex items-start gap-2 text-slate-200">
-                <UIcon name="i-lucide-help-circle" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
+              <div class="flex items-start gap-2 text-default">
+                <UIcon
+                  name="i-lucide-help-circle"
+                  class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400"
+                />
                 <div class="space-y-2">
                   <p>{{ t(`assistant.needsInput.${outcome.reason}`) }}</p>
                   <div v-if="outcome.candidates.length" class="flex flex-wrap gap-1">
@@ -351,11 +354,8 @@ function reveal(blockId: string): void {
             </template>
 
             <template v-else>
-              <div class="flex items-start gap-2 text-slate-200">
-                <UIcon
-                  name="i-lucide-circle-slash"
-                  class="mt-0.5 h-4 w-4 shrink-0 text-slate-500"
-                />
+              <div class="flex items-start gap-2 text-default">
+                <UIcon name="i-lucide-circle-slash" class="mt-0.5 h-4 w-4 shrink-0 text-dimmed" />
                 <p>{{ t('assistant.declined') }}</p>
               </div>
             </template>

package/app/components/auth/AuthGate.vue

@@ -22,7 +22,7 @@ onMounted(() => void auth.bootstrap().finally(() => markBoot('auth-ready')))
 <template>
   <div
     v-if="!auth.ready"
-    class="flex h-screen w-screen flex-col items-center justify-center gap-3 bg-slate-950 text-slate-400"
+    class="flex h-screen w-screen flex-col items-center justify-center gap-3 bg-app-950 text-muted"
   >
     <UIcon name="i-lucide-loader" class="h-8 w-8 animate-spin" />
     <span class="text-sm">{{ t('auth.gate.loading') }}</span>

package/app/components/auth/BackendMisconfiguredScreen.vue

@@ -18,13 +18,13 @@ function reload() {
 
 <template>
   <div
-    class="flex h-screen w-screen flex-col items-center justify-center bg-slate-950 p-6 text-slate-200"
+    class="flex h-screen w-screen flex-col items-center justify-center bg-app-950 p-6 text-default"
   >
     <div class="w-full max-w-2xl">
       <div class="mb-6 text-center">
-        <UIcon name="i-lucide-server-cog" class="mx-auto mb-3 h-10 w-10 text-amber-400" />
+        <UIcon name="i-lucide-server-cog" class="mx-auto mb-3 h-10 w-10 text-app-warning-400" />
         <h1 class="text-lg font-semibold">{{ t('app.misconfigured.title') }}</h1>
-        <p class="mx-auto mt-2 max-w-lg text-sm text-slate-400">
+        <p class="mx-auto mt-2 max-w-lg text-sm text-muted">
           {{ t('app.misconfigured.intro') }}
         </p>
       </div>
@@ -33,12 +33,12 @@ function reload() {
         <li
           v-for="problem in problems"
           :key="problem.key"
-          class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+          class="rounded-lg border border-default bg-default/60 p-4"
         >
-          <code class="text-sm font-semibold text-amber-300">{{ problem.key }}</code>
-          <p class="mt-1 text-sm text-slate-300">{{ problem.summary }}</p>
-          <p class="mt-2 text-sm text-slate-400">
-            <span class="font-medium text-slate-300">{{ t('app.misconfigured.howToFix') }}</span>
+          <code class="text-sm font-semibold text-app-warning-300">{{ problem.key }}</code>
+          <p class="mt-1 text-sm text-toned">{{ problem.summary }}</p>
+          <p class="mt-2 text-sm text-muted">
+            <span class="font-medium text-toned">{{ t('app.misconfigured.howToFix') }}</span>
             {{ problem.remedy }}
           </p>
           <a
@@ -46,7 +46,7 @@ function reload() {
             :href="problem.docsUrl"
             target="_blank"
             rel="noopener noreferrer"
-            class="mt-2 inline-flex items-center gap-1 text-sm text-amber-300 hover:text-amber-200"
+            class="mt-2 inline-flex items-center gap-1 text-sm text-app-warning-300 hover:text-app-warning-200"
           >
             <UIcon name="i-lucide-book-open" class="h-4 w-4" />
             {{ t('app.misconfigured.viewDocs') }}
@@ -59,7 +59,7 @@ function reload() {
           {{ t('app.misconfigured.reload') }}
         </UButton>
       </div>
-      <p class="mt-4 text-center text-xs text-slate-500">{{ t('app.misconfigured.hint') }}</p>
+      <p class="mt-4 text-center text-xs text-dimmed">{{ t('app.misconfigured.hint') }}</p>
     </div>
   </div>
 </template>

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" />