@cat-factory/app 0.302.2 → 0.303.1

package/app/components/bugFishing/BugFishingWindow.vue

@@ -229,10 +229,10 @@ function openSpawnedTask(taskId: string): void {
 }
 
 const SEVERITY_CLASS: Record<BugFishingSeverity, string> = {
-  critical: 'bg-red-500/15 text-red-300 border-red-500/30',
-  high: 'bg-orange-500/15 text-orange-300 border-orange-500/30',
-  medium: 'bg-amber-500/15 text-amber-200 border-amber-500/30',
-  low: 'bg-slate-500/15 text-slate-300 border-slate-600/40',
+  critical: 'bg-app-error-500/15 text-app-error-300 border-app-error-500/30',
+  high: 'bg-app-hue-orange/15 text-app-hue-orange border-app-hue-orange/30',
+  medium: 'bg-app-warning-500/15 text-app-warning-200 border-app-warning-500/30',
+  low: 'bg-app-500/15 text-toned border-app-600/40',
 }
 
 const PHASE_ICON: Record<string, string> = {
@@ -247,7 +247,7 @@ const PHASE_ICON: Record<string, string> = {
   <ResultWindowShell
     :open="open"
     icon="i-lucide-fish"
-    icon-class="bg-sky-500/15 text-sky-300"
+    icon-class="bg-app-info-500/15 text-app-info-300"
     :title="block ? t('bugFishing.titleWithBlock', { title: block.title }) : t('bugFishing.title')"
     :subtitle="t('bugFishing.subtitle')"
     width="full"
@@ -261,9 +261,9 @@ const PHASE_ICON: Record<string, string> = {
            phase that found nothing from one that has not run yet. -->
       <aside
         data-testid="bug-fishing-phases"
-        class="w-60 shrink-0 overflow-y-auto border-r border-slate-800 px-3 py-4"
+        class="w-60 shrink-0 overflow-y-auto border-r border-default px-3 py-4"
       >
-        <p class="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+        <p class="mb-2 px-1 text-[10px] font-semibold uppercase tracking-wide text-dimmed">
           {{ t('bugFishing.phases.heading') }}
         </p>
         <button
@@ -271,8 +271,8 @@ const PHASE_ICON: Record<string, string> = {
           class="mb-1 w-full rounded-md px-2 py-1.5 text-left text-[12px]"
           :class="
             selectedPassKey === null
-              ? 'bg-slate-800 text-slate-100'
-              : 'text-slate-400 hover:bg-slate-800/60'
+              ? 'bg-elevated text-app-100'
+              : 'text-muted hover:bg-elevated/60'
           "
           @click="selectedPassKey = null"
         >
@@ -283,7 +283,7 @@ const PHASE_ICON: Record<string, string> = {
         <div v-for="group in territoryGroups" :key="group.id ?? 'whole'" class="mb-2">
           <p
             v-if="group.label"
-            class="mb-1 mt-2 truncate px-1 text-[10px] font-semibold uppercase tracking-wide text-sky-400/80"
+            class="mb-1 mt-2 truncate px-1 text-[10px] font-semibold uppercase tracking-wide text-app-info-400/80"
             :title="group.label"
           >
             {{ group.label }}
@@ -295,8 +295,8 @@ const PHASE_ICON: Record<string, string> = {
                 class="flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left"
                 :class="
                   selectedPassKey === passKey(phase)
-                    ? 'bg-slate-800 text-slate-100'
-                    : 'text-slate-400 hover:bg-slate-800/60'
+                    ? 'bg-elevated text-app-100'
+                    : 'text-muted hover:bg-elevated/60'
                 "
                 :data-testid="`bug-fishing-phase-${phase.id}`"
                 @click="selectedPassKey = passKey(phase)"
@@ -305,15 +305,15 @@ const PHASE_ICON: Record<string, string> = {
                   :name="PHASE_ICON[phase.status] ?? 'i-lucide-circle-dashed'"
                   class="mt-0.5 h-3.5 w-3.5 shrink-0"
                   :class="{
-                    'animate-spin text-sky-300': phase.status === 'fishing',
-                    'text-emerald-400': phase.status === 'completed',
-                    'text-amber-400': phase.status === 'failed',
-                    'text-slate-600': phase.status === 'pending',
+                    'animate-spin text-app-info-300': phase.status === 'fishing',
+                    'text-app-success-400': phase.status === 'completed',
+                    'text-app-warning-400': phase.status === 'failed',
+                    'text-app-600': phase.status === 'pending',
                   }"
                 />
                 <span class="min-w-0 flex-1">
                   <span class="block truncate text-[12px]">{{ phase.title }}</span>
-                  <span class="block text-[10px] text-slate-500">
+                  <span class="block text-[10px] text-dimmed">
                     {{
                       phase.status === 'completed' || phase.status === 'failed'
                         ? t('bugFishing.phases.found', { count: phaseFindingCount(phase) })
@@ -329,13 +329,13 @@ const PHASE_ICON: Record<string, string> = {
                     :data-testid="`bug-fishing-coverage-${phase.id}`"
                     :title="t('bugFishing.coverage.tooltip', { percent: coverageShare(phase) })"
                   >
-                    <span class="block h-0.5 w-full rounded-full bg-slate-700">
+                    <span class="block h-0.5 w-full rounded-full bg-accented">
                       <span
-                        class="block h-0.5 rounded-full bg-sky-500/70"
+                        class="block h-0.5 rounded-full bg-app-info-500/70"
                         :style="{ width: `${coverageShare(phase)}%` }"
                       />
                     </span>
-                    <span class="mt-0.5 block text-[10px] text-slate-600">
+                    <span class="mt-0.5 block text-[10px] text-app-600">
                       {{ t('bugFishing.coverage.share', { percent: coverageShare(phase) }) }}
                     </span>
                   </span>
@@ -352,13 +352,13 @@ const PHASE_ICON: Record<string, string> = {
              that reported nothing because it found nothing are different facts. -->
         <div
           v-if="selectedPhase"
-          class="mb-4 rounded-lg border border-slate-800 bg-slate-900/40 px-3 py-2.5"
+          class="mb-4 rounded-lg border border-default bg-default/40 px-3 py-2.5"
         >
-          <p class="text-[11px] text-slate-400">{{ selectedPhase.goal }}</p>
+          <p class="text-[11px] text-muted">{{ selectedPhase.goal }}</p>
           <p
             v-if="selectedPhase.status === 'failed'"
             data-testid="bug-fishing-phase-failed"
-            class="mt-2 text-[12px] text-amber-300"
+            class="mt-2 text-[12px] text-app-warning-300"
           >
             {{ t('bugFishing.phases.failedNote', { reason: selectedPhase.failureReason ?? '' }) }}
           </p>
@@ -374,7 +374,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="fishing"
           data-testid="bug-fishing-in-progress"
-          class="mb-4 flex items-center gap-2 rounded-lg border border-sky-500/25 bg-sky-500/5 px-3 py-2 text-[12px] text-sky-200"
+          class="mb-4 flex items-center gap-2 rounded-lg border border-app-info-500/25 bg-app-info-500/5 px-3 py-2 text-[12px] text-app-info-200"
         >
           <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
           <span>
@@ -395,7 +395,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="plan && (unfished.length > 0 || plan.treeTruncated || plan.surveyUnavailableReason)"
           data-testid="bug-fishing-plan"
-          class="mb-4 rounded-lg border border-amber-500/25 bg-amber-500/5 px-3 py-2 text-[12px] text-amber-200"
+          class="mb-4 rounded-lg border border-app-warning-500/25 bg-app-warning-500/5 px-3 py-2 text-[12px] text-app-warning-200"
         >
           <p v-if="plan.surveyUnavailableReason" data-testid="bug-fishing-survey-unavailable">
             {{ t('bugFishing.plan.surveyUnavailable', { reason: plan.surveyUnavailableReason }) }}
@@ -412,7 +412,7 @@ const PHASE_ICON: Record<string, string> = {
                 })
               }}
             </p>
-            <ul class="mt-1 space-y-0.5 text-[11px] text-amber-200/80">
+            <ul class="mt-1 space-y-0.5 text-[11px] text-app-warning-200/80">
               <li v-for="cell in unfished" :key="`${cell.territoryId}::${cell.phaseId}`">
                 {{
                   t('bugFishing.plan.unfishedCell', {
@@ -430,9 +430,9 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="canAct"
           data-testid="bug-fishing-pipeline"
-          class="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/40 px-3 py-2"
+          class="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-default bg-default/40 px-3 py-2"
         >
-          <span class="text-[11px] text-slate-400">{{ t('bugFishing.fixPipeline.label') }}</span>
+          <span class="text-[11px] text-muted">{{ t('bugFishing.fixPipeline.label') }}</span>
           <USelectMenu
             v-model="pipelineOverride"
             :items="pipelineOptions"
@@ -440,22 +440,22 @@ const PHASE_ICON: Record<string, string> = {
             size="xs"
             class="min-w-52"
           />
-          <span class="text-[11px] text-slate-500">
+          <span class="text-[11px] text-dimmed">
             {{ t('bugFishing.fixPipeline.hint', { pipeline: effectivePipelineName ?? '—' }) }}
           </span>
         </div>
 
         <div class="mb-2 flex items-center justify-between">
-          <p class="text-[11px] text-slate-400">
+          <p class="text-[11px] text-muted">
             {{ t('bugFishing.counts', { untriaged: untriagedCount, spawned: spawnedCount }) }}
           </p>
-          <label class="flex items-center gap-1.5 text-[11px] text-slate-400">
-            <input v-model="showTriaged" type="checkbox" class="accent-sky-500" />
+          <label class="flex items-center gap-1.5 text-[11px] text-muted">
+            <input v-model="showTriaged" type="checkbox" class="accent-app-info-500" />
             {{ t('bugFishing.showTriaged') }}
           </label>
         </div>
 
-        <p v-if="bugFishing.error" class="mb-3 text-[12px] text-red-300">
+        <p v-if="bugFishing.error" class="mb-3 text-[12px] text-app-error-300">
           {{ bugFishing.error }}
         </p>
 
@@ -465,7 +465,7 @@ const PHASE_ICON: Record<string, string> = {
         <div
           v-if="visibleFindings.length === 0"
           data-testid="bug-fishing-empty"
-          class="rounded-lg border border-slate-800 bg-slate-900/40 px-4 py-8 text-center text-[12px] text-slate-400"
+          class="rounded-lg border border-default bg-default/40 px-4 py-8 text-center text-[12px] text-muted"
         >
           {{
             findings.length === 0
@@ -479,7 +479,7 @@ const PHASE_ICON: Record<string, string> = {
             v-for="finding in visibleFindings"
             :key="finding.id"
             :data-testid="`bug-fishing-finding-${finding.id}`"
-            class="rounded-lg border border-slate-800 bg-slate-900/40 px-3 py-2.5"
+            class="rounded-lg border border-default bg-default/40 px-3 py-2.5"
             :class="{ 'opacity-60': finding.dismissed }"
           >
             <div class="flex flex-wrap items-center gap-2">
@@ -489,28 +489,28 @@ const PHASE_ICON: Record<string, string> = {
               >
                 {{ t(`bugFishing.severity.${finding.severity}`) }}
               </span>
-              <span class="rounded bg-slate-800 px-1.5 py-0.5 text-[10px] text-slate-300">
+              <span class="rounded bg-elevated px-1.5 py-0.5 text-[10px] text-toned">
                 {{ t(`bugFishing.kind.${finding.kind}`) }}
               </span>
-              <span class="text-[10px] text-slate-500">
+              <span class="text-[10px] text-dimmed">
                 {{ t(`bugFishing.confidence.${finding.confidence}`) }}
               </span>
               <span
-                class="min-w-0 flex-1 text-[13px] text-slate-100"
+                class="min-w-0 flex-1 text-[13px] text-app-100"
                 :class="{ 'line-through': finding.dismissed }"
               >
                 {{ finding.title }}
               </span>
             </div>
 
-            <p v-if="finding.path" class="mt-1 font-mono text-[11px] text-slate-500">
+            <p v-if="finding.path" class="mt-1 font-mono text-[11px] text-dimmed">
               {{ finding.path }}<span v-if="finding.line">:{{ finding.line }}</span>
             </p>
 
             <MarkdownProse :text="finding.detail" class="mt-2 max-w-3xl text-[12px]" />
 
-            <div v-if="finding.failureScenario" class="mt-2 text-[12px] text-slate-300">
-              <span class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+            <div v-if="finding.failureScenario" class="mt-2 text-[12px] text-toned">
+              <span class="text-[10px] font-semibold uppercase tracking-wide text-dimmed">
                 {{ t('bugFishing.finding.failureScenario') }}
               </span>
               <MarkdownProse :text="finding.failureScenario" class="mt-0.5 max-w-3xl" />
@@ -520,14 +520,14 @@ const PHASE_ICON: Record<string, string> = {
                  apart: a finding that cannot point at the code it describes is speculating, and
                  that should be visible without reading the prose for it. -->
             <details v-if="finding.evidence" class="mt-2">
-              <summary class="cursor-pointer text-[11px] text-slate-400 hover:text-slate-200">
+              <summary class="cursor-pointer text-[11px] text-muted hover:text-default">
                 {{ t('bugFishing.finding.evidence') }}
               </summary>
               <MarkdownProse :text="finding.evidence" class="mt-1 max-w-3xl text-[12px]" />
             </details>
 
             <details v-if="finding.suggestedFix" class="mt-1">
-              <summary class="cursor-pointer text-[11px] text-slate-400 hover:text-slate-200">
+              <summary class="cursor-pointer text-[11px] text-muted hover:text-default">
                 {{ t('bugFishing.finding.suggestedFix') }}
               </summary>
               <MarkdownProse :text="finding.suggestedFix" class="mt-1 max-w-3xl text-[12px]" />
@@ -540,7 +540,7 @@ const PHASE_ICON: Record<string, string> = {
             <div
               v-if="finding.spawn?.status === 'spawned'"
               data-testid="bug-fishing-finding-spawned"
-              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-emerald-300"
+              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-app-success-300"
             >
               <UIcon name="i-lucide-check-circle-2" class="h-3.5 w-3.5" />
               <span>
@@ -554,7 +554,7 @@ const PHASE_ICON: Record<string, string> = {
               </span>
               <button
                 type="button"
-                class="underline hover:text-emerald-200"
+                class="underline hover:text-app-success-200"
                 @click="openSpawnedTask(finding.spawn.taskId)"
               >
                 {{ t('bugFishing.finding.openTask') }}
@@ -566,7 +566,7 @@ const PHASE_ICON: Record<string, string> = {
             <div
               v-else-if="finding.spawn?.status === 'pending'"
               data-testid="bug-fishing-finding-spawning"
-              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-slate-400"
+              class="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-muted"
             >
               <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
               <span>{{ t('bugFishing.finding.spawning') }}</span>
@@ -577,7 +577,7 @@ const PHASE_ICON: Record<string, string> = {
             <p
               v-else-if="finding.spawn?.status === 'failed'"
               data-testid="bug-fishing-finding-spawn-failed"
-              class="mt-2 max-w-3xl text-[11px] text-amber-300"
+              class="mt-2 max-w-3xl text-[11px] text-app-warning-300"
             >
               {{
                 t('bugFishing.finding.spawnFailed', {
@@ -621,9 +621,9 @@ const PHASE_ICON: Record<string, string> = {
          (it is not — the run advances past the step and the remaining angles never run). -->
     <footer
       v-if="awaiting"
-      class="flex items-center justify-between gap-3 border-t border-slate-800 px-5 py-3"
+      class="flex items-center justify-between gap-3 border-t border-default px-5 py-3"
     >
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         {{
           untriagedCount > 0
             ? t('bugFishing.footer.parkedWithUntriaged', { count: untriagedCount })

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