@cat-factory/app 0.302.1 → 0.303.0

package/app/components/clarity/ClarityReviewWindow.vue

@@ -298,7 +298,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
   <ResultWindowShell
     :open="open"
     icon="i-lucide-bug"
-    icon-class="bg-indigo-500/15 text-indigo-300"
+    icon-class="bg-primary/15 text-primary"
     :title="t('clarity.title')"
     :subtitle="block?.title"
     variant="centered"
@@ -314,14 +314,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     <div class="flex min-h-0 flex-1 flex-col lg:flex-row">
       <!-- main column -->
       <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
-        <p class="mb-4 text-sm text-slate-400">
+        <p class="mb-4 text-sm text-muted">
           <i18n-t keypath="clarity.intro" tag="span" scope="global">
             <template #level>{{ block?.level ?? t('clarity.itemFallback') }}</template>
             <template #answer
-              ><span class="text-slate-300">{{ t('clarity.introAnswer') }}</span></template
+              ><span class="text-toned">{{ t('clarity.introAnswer') }}</span></template
             >
             <template #dismiss
-              ><span class="text-slate-300">{{ t('clarity.introDismiss') }}</span></template
+              ><span class="text-toned">{{ t('clarity.introDismiss') }}</span></template
             >
           </i18n-t>
         </p>
@@ -330,7 +330,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                  gate step, so there's nothing to do here until then -->
         <div
           v-if="!review && !busy && !loading"
-          class="rounded-lg border border-dashed border-slate-700 p-8 text-center text-sm text-slate-500"
+          class="rounded-lg border border-dashed border-muted p-8 text-center text-sm text-dimmed"
         >
           {{ t('clarity.empty') }}
         </div>
@@ -338,7 +338,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
         <!-- working state (initial fetch on open, or a reviewer pass running) -->
         <div
           v-else-if="(busy || loading) && !review"
-          class="flex items-center justify-center gap-2 p-8 text-sm text-slate-400"
+          class="flex items-center justify-center gap-2 p-8 text-sm text-muted"
         >
           <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
           {{ loading && !busy ? t('clarity.loadingReview') : t('clarity.triaging') }}
@@ -348,7 +348,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           <!-- converged: reviewer satisfied -->
           <div
             v-if="incorporated"
-            class="mb-4 flex items-center gap-2 rounded-lg border border-emerald-900/60 bg-emerald-950/30 p-4 text-sm text-emerald-300"
+            class="mb-4 flex items-center gap-2 rounded-lg border border-app-success-900/60 bg-app-success-950/30 p-4 text-sm text-app-success-300"
           >
             <UIcon name="i-lucide-circle-check" class="h-5 w-5 shrink-0" />
             {{ t('clarity.converged') }}
@@ -368,7 +368,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                    the human can see which of the two LLM calls is currently in progress. -->
           <div
             v-else-if="working"
-            class="mb-4 flex items-center gap-2 rounded-lg border border-indigo-900/60 bg-indigo-950/30 p-4 text-sm text-indigo-200"
+            class="mb-4 flex items-center gap-2 rounded-lg border border-primary/60 bg-primary/10 p-4 text-sm text-primary"
           >
             <UIcon name="i-lucide-loader-circle" class="h-5 w-5 shrink-0 animate-spin" />
             <span v-if="incorporating">
@@ -384,17 +384,17 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             <div
               v-for="item in sortedItems"
               :key="item.id"
-              class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+              class="rounded-lg border border-default bg-default/60 p-3"
               :class="{ 'opacity-60': item.status === 'dismissed' }"
             >
               <div class="flex items-start gap-2">
                 <UIcon
                   :name="CATEGORY_ICON[item.category]"
-                  class="mt-0.5 h-4 w-4 shrink-0 text-slate-400"
+                  class="mt-0.5 h-4 w-4 shrink-0 text-muted"
                 />
                 <div class="min-w-0 flex-1">
                   <div class="flex flex-wrap items-center gap-1.5">
-                    <span class="text-sm font-medium text-white">{{ item.title }}</span>
+                    <span class="text-sm font-medium text-highlighted">{{ item.title }}</span>
                     <UBadge size="xs" variant="subtle" :color="SEVERITY_COLOR[item.severity]">
                       {{ t(SEVERITY_LABELS[item.severity]) }}
                     </UBadge>
@@ -414,7 +414,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                        card around it takes the span (see the shell's `width` prop: the unit is the
                        paragraph, not the section). The badge row above and the answer control
                        below are what the full width is actually for. -->
-                  <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-slate-400">
+                  <p class="mt-1 max-w-3xl whitespace-pre-line text-sm text-muted">
                     {{ item.detail }}
                   </p>
 
@@ -422,9 +422,9 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                            the answer lives in the textarea below, seeded from the reply) -->
                   <div
                     v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
-                    class="mt-2 max-w-3xl rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                    class="mt-2 max-w-3xl rounded-md border-s-2 border-muted bg-app-950/40 px-3 py-1.5 text-sm text-toned"
                   >
-                    <span class="text-[10px] uppercase tracking-wide text-slate-500">
+                    <span class="text-[10px] uppercase tracking-wide text-dimmed">
                       {{ t('clarity.answerLabel') }}
                     </span>
                     <p class="whitespace-pre-line">{{ item.reply }}</p>
@@ -479,8 +479,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
 
           <!-- clarified document: the standard-format bug report -->
-          <section v-if="outline" class="mt-6 border-t border-slate-800 pt-5">
-            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-emerald-400">
+          <section v-if="outline" class="mt-6 border-t border-default pt-5">
+            <div class="mb-3 flex items-center gap-1.5 text-[11px] text-app-success-400">
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">
                 {{ incorporated ? t('clarity.docHeading') : t('clarity.docHeadingDraft') }}
@@ -497,18 +497,18 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
               >
                 <UIcon
                   name="i-lucide-chevron-right"
-                  class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform"
+                  class="h-3.5 w-3.5 shrink-0 text-dimmed transition-transform"
                   :class="collapsed[s.id] ? '' : 'rotate-90'"
                 />
                 <span
-                  class="font-semibold text-white"
+                  class="font-semibold text-highlighted"
                   :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
                   v-html="s.titleHtml"
                 />
               </button>
               <div
                 v-show="!s.title || !collapsed[s.id]"
-                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
+                class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-toned"
                 v-html="s.bodyHtml"
               />
             </div>
@@ -521,32 +521,32 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                tablet, UX-32). The informational stats collapse away below `lg` to keep the
                bottom bar compact; the actions themselves always show. -->
       <aside
-        class="flex w-full shrink-0 flex-col border-t border-slate-800 lg:w-72 lg:border-s lg:border-t-0"
+        class="flex w-full shrink-0 flex-col border-t border-default lg:w-72 lg:border-s lg:border-t-0"
       >
         <div class="flex flex-col gap-4 px-4 py-5">
-          <div v-if="review" class="hidden space-y-2 text-xs text-slate-400 lg:block">
+          <div v-if="review" class="hidden space-y-2 text-xs text-muted lg:block">
             <div class="flex items-center justify-between">
               <span>{{ t('clarity.rail.findings') }}</span>
-              <span class="text-slate-300">{{ review.items.length }}</span>
+              <span class="text-toned">{{ review.items.length }}</span>
             </div>
             <div class="flex items-center justify-between">
               <span>{{ t('clarity.rail.open') }}</span>
-              <span class="text-slate-300">{{ openCount }}</span>
+              <span class="text-toned">{{ openCount }}</span>
             </div>
             <div class="flex items-center justify-between">
               <span>{{ t('clarity.rail.answered') }}</span>
-              <span class="text-slate-300">{{ answeredCount }}</span>
+              <span class="text-toned">{{ answeredCount }}</span>
             </div>
             <div v-if="review.model" class="flex items-center justify-between">
               <span>{{ t('clarity.rail.model') }}</span>
-              <span class="truncate ps-2 text-slate-500">{{
+              <span class="truncate ps-2 text-dimmed">{{
                 models.labelForRef(review.model) ?? review.model
               }}</span>
             </div>
           </div>
 
           <!-- action: ready (answer → incorporate / proceed) -->
-          <div v-if="review && status === 'ready'" class="space-y-2 border-t border-slate-800 pt-4">
+          <div v-if="review && status === 'ready'" class="space-y-2 border-t border-default pt-4">
             <UButton
               v-if="canProceed"
               color="primary"
@@ -574,7 +574,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('clarity.incorporateAnswers') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-slate-500">
+            <p class="text-[11px] leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('clarity.hint.proceed') }}
               </template>
@@ -586,7 +586,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
 
           <!-- action: merged (inspect → re-review / redo) -->
-          <div v-if="review && merged" class="space-y-2 border-t border-slate-800 pt-4">
+          <div v-if="review && merged" class="space-y-2 border-t border-default pt-4">
             <UButton
               color="primary"
               size="sm"
@@ -636,14 +636,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('clarity.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-slate-500">
+            <p class="text-[11px] leading-relaxed text-dimmed">
               {{ t('clarity.redoHint') }}
             </p>
           </div>
 
           <div
             v-if="review && incorporated"
-            class="border-t border-slate-800 pt-4 text-[11px] leading-relaxed text-slate-500"
+            class="border-t border-default pt-4 text-[11px] leading-relaxed text-dimmed"
           >
             {{ t('clarity.incorporatedFooter') }}
           </div>

package/app/components/common/AsyncViewError.vue

@@ -11,15 +11,15 @@ function reload() {
 <template>
   <div
     data-testid="async-view-error"
-    class="fixed inset-0 z-50 grid place-items-center bg-slate-950/80 p-6 backdrop-blur-sm"
+    class="fixed inset-0 z-50 grid place-items-center bg-app-950/80 p-6 backdrop-blur-sm"
     role="alert"
   >
-    <div class="max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl">
-      <div class="flex items-center gap-2 text-sm font-semibold text-slate-100">
-        <UIcon name="i-lucide-unplug" class="h-4 w-4 shrink-0 text-amber-400" />
+    <div class="max-w-sm rounded-2xl border border-muted bg-default p-5 shadow-2xl">
+      <div class="flex items-center gap-2 text-sm font-semibold text-app-100">
+        <UIcon name="i-lucide-unplug" class="h-4 w-4 shrink-0 text-app-warning-400" />
         {{ t('errors.asyncView.title') }}
       </div>
-      <p class="mt-2 text-[12px] leading-relaxed text-slate-400">
+      <p class="mt-2 text-[12px] leading-relaxed text-muted">
         {{ t('errors.asyncView.body') }}
       </p>
       <UButton class="mt-4" color="primary" variant="soft" size="xs" @click="reload">

package/app/components/common/ClarificationItem.vue

@@ -49,21 +49,18 @@ const draft = computed({
 </script>
 
 <template>
-  <div
-    class="rounded-lg border border-slate-800 bg-slate-950/40 p-3"
-    data-testid="clarification-item"
-  >
+  <div class="rounded-lg border border-default bg-app-950/40 p-3" data-testid="clarification-item">
     <div class="flex items-start justify-between gap-2">
-      <p class="text-[13px] font-medium text-slate-200">{{ prompt }}</p>
+      <p class="text-[13px] font-medium text-default">{{ prompt }}</p>
       <slot name="badges" />
     </div>
-    <p v-if="detail" class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400">
+    <p v-if="detail" class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted">
       {{ detail }}
     </p>
 
     <!-- dismissed: a "not relevant" chip + reopen -->
     <div v-if="dismissed" class="mt-2 flex items-center justify-between gap-2">
-      <span class="inline-flex items-center gap-1 text-[11px] text-slate-500">
+      <span class="inline-flex items-center gap-1 text-[11px] text-dimmed">
         <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />{{ t('clarification.dismissed') }}
       </span>
       <UButton
@@ -82,7 +79,7 @@ const draft = computed({
     <!-- a recommendation is being requested/generated: a working chip, no answer box -->
     <div
       v-else-if="requested"
-      class="mt-2 inline-flex items-center gap-1 text-[11px] text-indigo-300"
+      class="mt-2 inline-flex items-center gap-1 text-[11px] text-primary"
       data-testid="clarification-requested"
     >
       <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
@@ -131,15 +128,13 @@ const draft = computed({
       <!-- inline AI suggestion + "use this answer" -->
       <div
         v-if="recommendation"
-        class="mt-2 rounded-md border border-indigo-800/50 bg-indigo-950/30 p-2"
+        class="mt-2 rounded-md border border-primary/50 bg-primary/10 p-2"
         data-testid="clarification-recommendation"
       >
-        <div
-          class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-indigo-300"
-        >
+        <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-primary">
           <UIcon name="i-lucide-wand-2" class="h-3 w-3" />{{ t('clarification.suggestion') }}
         </div>
-        <p class="whitespace-pre-wrap text-[12px] text-slate-200">{{ recommendation }}</p>
+        <p class="whitespace-pre-wrap text-[12px] text-default">{{ recommendation }}</p>
         <UButton
           class="mt-1.5"
           size="xs"

package/app/components/common/ConfirmDialog.vue

@@ -60,11 +60,13 @@ const isDestructive = computed(() => current.value?.variant === 'destructive')
         <div
           v-if="current?.icon"
           class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
-          :class="isDestructive ? 'bg-red-500/10 text-red-400' : 'bg-slate-700/40 text-slate-300'"
+          :class="
+            isDestructive ? 'bg-app-error-500/10 text-app-error-400' : 'bg-accented/40 text-toned'
+          "
         >
           <UIcon :name="current.icon" class="h-5 w-5" />
         </div>
-        <p v-if="current?.description" class="text-sm text-slate-300">
+        <p v-if="current?.description" class="text-sm text-toned">
           {{ current.description }}
         </p>
       </div>

package/app/components/common/DescriptorFields.vue

@@ -112,7 +112,7 @@ function selectItems(field: DescriptorField) {
            testid that would have to be slugified to be selectable. -->
       <p
         v-if="caption"
-        class="-mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+        class="-mb-1 text-[11px] font-semibold uppercase tracking-wide text-muted"
         :class="{ 'pt-2': startsGroup }"
         :data-testid="`${testidPrefix}-section`"
       >

package/app/components/common/EmptyState.vue

@@ -17,12 +17,12 @@ withDefaults(
 
 <template>
   <div
-    class="flex flex-col items-center justify-center text-center text-slate-500"
+    class="flex flex-col items-center justify-center text-center text-dimmed"
     :class="compact ? 'gap-1 py-4' : 'gap-2 py-10'"
     data-testid="empty-state"
   >
-    <UIcon :name="icon" :class="compact ? 'h-5 w-5' : 'h-8 w-8'" class="text-slate-600" />
-    <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-slate-400">
+    <UIcon :name="icon" :class="compact ? 'h-5 w-5' : 'h-8 w-8'" class="text-app-600" />
+    <p :class="compact ? 'text-xs' : 'text-sm'" class="font-medium text-muted">
       {{ title }}
     </p>
     <p v-if="description" :class="compact ? 'text-[11px]' : 'text-xs'" class="max-w-xs">

package/app/components/common/InterviewGateNotice.vue

@@ -21,19 +21,19 @@ defineProps<{
 <template>
   <div
     v-if="variant === 'working'"
-    class="flex flex-col items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 p-6 text-center"
+    class="flex flex-col items-center gap-2 rounded-lg border border-default bg-app-950/40 p-6 text-center"
     :data-testid="testid"
   >
-    <UIcon name="i-lucide-loader-circle" class="h-5 w-5 animate-spin text-indigo-300" />
-    <p class="text-[13px] text-slate-200">{{ title }}</p>
-    <p class="text-[12px] text-slate-400">{{ hint }}</p>
+    <UIcon name="i-lucide-loader-circle" class="h-5 w-5 animate-spin text-primary" />
+    <p class="text-[13px] text-default">{{ title }}</p>
+    <p class="text-[12px] text-muted">{{ hint }}</p>
   </div>
   <div
     v-else
-    class="rounded-lg border border-red-900/60 bg-red-950/20 p-4 text-center"
+    class="rounded-lg border border-app-error-900/60 bg-app-error-950/20 p-4 text-center"
     :data-testid="testid"
   >
-    <p class="text-[13px] text-red-200">{{ title }}</p>
-    <p class="mt-1 text-[12px] text-slate-400">{{ hint }}</p>
+    <p class="text-[13px] text-app-error-200">{{ title }}</p>
+    <p class="mt-1 text-[12px] text-muted">{{ hint }}</p>
   </div>
 </template>

package/app/components/common/KeyboardShortcutsHelp.vue

@@ -37,7 +37,7 @@ const shortcuts = computed(() => [
           :key="i"
           class="flex items-center justify-between gap-4 rounded-md px-1 py-1.5"
         >
-          <dt class="text-sm text-slate-300">{{ s.label }}</dt>
+          <dt class="text-sm text-toned">{{ s.label }}</dt>
           <dd class="flex shrink-0 items-center gap-1">
             <UKbd v-for="k in s.keys" :key="k" :value="k" />
           </dd>

package/app/components/common/MarkdownProse.vue

@@ -22,7 +22,8 @@ const html = computed(() => renderMarkdown(props.text))
 
 <style scoped>
 /* Prose styling for the sanitized markdown injected via v-html (out of scoped reach
-   without :deep), mirroring the inspector reader's prose styling. */
+   without :deep), mirroring the reader's `prose.css` token for token so both flip with the
+   theme and the mode. */
 .cf-prose :deep(p) {
   margin: 0.5rem 0;
 }
@@ -48,36 +49,36 @@ const html = computed(() => renderMarkdown(props.text))
 }
 .cf-prose :deep(strong) {
   font-weight: 600;
-  color: rgb(226 232 240);
+  color: var(--ui-text-highlighted);
 }
 .cf-prose :deep(em) {
   font-style: italic;
 }
 .cf-prose :deep(code) {
   border-radius: 0.25rem;
-  background: rgb(30 41 59 / 0.8);
+  background: var(--ui-bg-elevated);
   padding: 0.1rem 0.3rem;
-  font-family: ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 0.85em;
-  color: rgb(199 210 254);
+  color: var(--ui-primary);
 }
 .cf-prose :deep(pre) {
   margin: 0.6rem 0;
   overflow: auto;
   border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
+  background: var(--app-bg-canvas);
   padding: 0.75rem 0.9rem;
 }
 .cf-prose :deep(pre code) {
   background: transparent;
   padding: 0;
-  color: rgb(203 213 225);
+  color: var(--ui-text-toned);
 }
 .cf-prose :deep(blockquote) {
   margin: 0.6rem 0;
-  border-left: 3px solid rgb(99 102 241 / 0.5);
+  border-left: 3px solid color-mix(in srgb, var(--ui-primary) 50%, transparent);
   padding-left: 0.75rem;
-  color: rgb(148 163 184);
+  color: var(--ui-text-muted);
 }
 .cf-prose :deep(h1),
 .cf-prose :deep(h2),
@@ -85,7 +86,7 @@ const html = computed(() => renderMarkdown(props.text))
 .cf-prose :deep(h4) {
   margin: 0.7rem 0 0.4rem;
   font-weight: 600;
-  color: rgb(226 232 240);
+  color: var(--ui-text-highlighted);
 }
 .cf-prose :deep(table) {
   margin: 0.6rem 0;
@@ -94,16 +95,16 @@ const html = computed(() => renderMarkdown(props.text))
 }
 .cf-prose :deep(th),
 .cf-prose :deep(td) {
-  border: 1px solid rgb(51 65 85);
+  border: 1px solid var(--ui-border-muted);
   padding: 0.3rem 0.6rem;
 }
 .cf-prose :deep(th) {
-  background: rgb(30 41 59 / 0.6);
+  background: var(--ui-bg-elevated);
   font-weight: 600;
 }
 .cf-prose :deep(hr) {
   margin: 1rem 0;
   border: none;
-  border-top: 1px solid rgb(51 65 85);
+  border-top: 1px solid var(--ui-border-muted);
 }
 </style>

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -68,10 +68,10 @@ const STATUS_LABEL_KEYS: Record<string, string> = {
   failed: 'consensus.status.failed',
 }
 const STATUS_CLASS: Record<string, string> = {
-  running: 'bg-sky-500/15 text-sky-300',
-  synthesizing: 'bg-indigo-500/15 text-indigo-300',
-  done: 'bg-emerald-500/15 text-emerald-300',
-  failed: 'bg-rose-500/15 text-rose-300',
+  running: 'bg-app-info-500/15 text-app-info-300',
+  synthesizing: 'bg-primary/15 text-primary',
+  done: 'bg-app-success-500/15 text-app-success-300',
+  failed: 'bg-app-error-500/15 text-app-error-300',
 }
 
 function strategyLabel(strategy: string): string {
@@ -116,7 +116,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
   <ResultWindowShell
     :open="open"
     icon="i-lucide-users-round"
-    icon-class="bg-amber-500/15 text-amber-300"
+    icon-class="bg-app-warning-500/15 text-app-warning-300"
     :title="headerTitle"
     :subtitle="headerSubtitle"
     variant="centered"
@@ -130,31 +130,31 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
            this task" has the transcript but not the reason. -->
       <span
         v-if="session.groupName"
-        class="rounded-full bg-emerald-900/50 px-2.5 py-1 text-xs font-medium text-emerald-200"
+        class="rounded-full bg-app-success-900/50 px-2.5 py-1 text-xs font-medium text-app-success-200"
         :title="t('consensus.groupTitle')"
       >
         {{ session.groupName }}
       </span>
       <span
         class="rounded-full px-2.5 py-1 text-xs font-medium"
-        :class="STATUS_CLASS[session.status] ?? 'bg-slate-700 text-slate-300'"
+        :class="STATUS_CLASS[session.status] ?? 'bg-accented text-toned'"
       >
         {{ statusLabel(session.status) }}
       </span>
     </template>
 
     <div class="flex-1 overflow-y-auto px-6 py-5">
-      <div v-if="loading && !session" class="py-16 text-center text-sm text-slate-500">
+      <div v-if="loading && !session" class="py-16 text-center text-sm text-dimmed">
         {{ t('consensus.loading') }}
       </div>
-      <div v-else-if="!session" class="py-16 text-center text-sm text-slate-500">
+      <div v-else-if="!session" class="py-16 text-center text-sm text-dimmed">
         {{ t('consensus.empty') }}
       </div>
       <template v-else>
         <!-- failure -->
         <div
           v-if="session.status === 'failed'"
-          class="mb-5 flex items-start gap-2 rounded-lg border border-rose-800/60 bg-rose-950/40 px-4 py-3 text-sm text-rose-200"
+          class="mb-5 flex items-start gap-2 rounded-lg border border-app-error-800/60 bg-app-error-950/40 px-4 py-3 text-sm text-app-error-200"
         >
           <span class="min-w-0 flex-1">{{
             t('consensus.failed', { error: session.error ?? t('consensus.unknownError') })
@@ -165,25 +165,25 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
         <!-- synthesized result -->
         <section v-if="session.synthesis" class="mb-6">
           <div class="mb-2 flex items-center gap-2">
-            <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
+            <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
               {{ t('consensus.synthesizedResult') }}
             </h3>
             <span
               v-if="session.confidence != null"
-              class="rounded bg-emerald-500/15 px-1.5 py-0.5 text-xs text-emerald-300"
+              class="rounded bg-app-success-500/15 px-1.5 py-0.5 text-xs text-app-success-300"
               >{{ t('consensus.confidence', { pct: pct(session.confidence) }) }}</span
             >
             <CopyButton :text="session.synthesis" class="ms-auto -my-1" />
           </div>
           <MarkdownProse
             :text="session.synthesis"
-            class="rounded-lg border border-slate-800 bg-slate-950/60 px-4 py-3 text-sm text-slate-200"
+            class="rounded-lg border border-default bg-app-950/60 px-4 py-3 text-sm text-default"
           />
           <ul v-if="session.dissent?.length" class="mt-2 space-y-1">
             <li
               v-for="(d, i) in session.dissent"
               :key="i"
-              class="flex items-start gap-2 text-xs text-amber-300/90"
+              class="flex items-start gap-2 text-xs text-app-warning-300/90"
             >
               <UIcon name="i-lucide-triangle-alert" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>{{ d }}</span>
@@ -193,20 +193,20 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
 
         <!-- participants -->
         <section class="mb-6">
-          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
             {{ t('consensus.panel') }}
           </h3>
           <div class="flex flex-wrap gap-2">
             <div
               v-for="(p, i) in session.participants"
               :key="p.id"
-              class="rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-1.5 text-xs"
+              class="rounded-lg border border-default bg-app-950/40 px-3 py-1.5 text-xs"
             >
-              <span class="font-medium text-slate-200">{{
+              <span class="font-medium text-default">{{
                 t('consensus.expert', { letter: String.fromCharCode(65 + i) })
               }}</span>
-              <span class="text-slate-400"> · {{ p.role }}</span>
-              <span v-if="p.modelId" class="ms-1 text-slate-500"
+              <span class="text-muted"> · {{ p.role }}</span>
+              <span v-if="p.modelId" class="ms-1 text-dimmed"
                 >({{ models.labelForRef(p.modelId) ?? p.modelId }})</span
               >
             </div>
@@ -215,7 +215,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
 
         <!-- rounds -->
         <section v-for="round in session.rounds" :key="round.index" class="mb-5">
-          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted">
             {{ t('consensus.round.heading', { n: round.index + 1 }) }} ·
             {{ roundLabel(round.kind) }}
           </h3>
@@ -223,16 +223,16 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
             <div
               v-for="c in round.contributions"
               :key="c.participantId"
-              class="rounded-lg border border-slate-800 bg-slate-950/40 px-4 py-3"
+              class="rounded-lg border border-default bg-app-950/40 px-4 py-3"
             >
               <div class="mb-1 flex items-center gap-2">
-                <span class="text-xs font-semibold text-slate-200">{{
+                <span class="text-xs font-semibold text-default">{{
                   anonLabel(c.participantId)
                 }}</span>
-                <span class="text-xs text-slate-500">{{ roleFor(c.participantId) }}</span>
+                <span class="text-xs text-dimmed">{{ roleFor(c.participantId) }}</span>
                 <span
                   v-if="topScore(c)"
-                  class="ms-auto rounded bg-slate-800 px-1.5 py-0.5 text-xs text-slate-300"
+                  class="ms-auto rounded bg-elevated px-1.5 py-0.5 text-xs text-toned"
                   >{{
                     t('consensus.topScore', {
                       label: topScore(c)!.label,
@@ -242,12 +242,12 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                 >
                 <CopyButton :text="c.text" :class="topScore(c) ? '-my-1' : 'ms-auto -my-1'" />
               </div>
-              <MarkdownProse :text="c.text" class="text-sm text-slate-300" />
+              <MarkdownProse :text="c.text" class="text-sm text-toned" />
               <div v-if="c.scores?.length" class="mt-2 flex flex-wrap gap-1.5">
                 <span
                   v-for="s in c.scores"
                   :key="s.dimension"
-                  class="rounded bg-slate-800/80 px-1.5 py-0.5 text-xs text-slate-400"
+                  class="rounded bg-elevated/80 px-1.5 py-0.5 text-xs text-muted"
                   >{{ s.dimension }}: {{ pct(s.value) }}</span
                 >
               </div>