@cat-factory/app 0.302.2 → 0.303.1

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>

package/app/components/context/ContextAttachmentFields.vue

@@ -188,7 +188,7 @@ function removePending(item: PendingContext) {
     <!-- Context documents (ungated; Attach disabled until a source is connected). -->
     <div class="space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('contextAttachments.documents') }}
         </span>
         <UButton
@@ -246,11 +246,11 @@ function removePending(item: PendingContext) {
            that into an attachment would attach pages nobody meant to attach. -->
       <div
         v-if="offer && docsConnected"
-        class="flex items-center gap-2 rounded-md border border-indigo-900/60 bg-indigo-950/30 px-2 py-1.5"
+        class="flex items-center gap-2 rounded-md border border-primary/60 bg-primary/10 px-2 py-1.5"
         data-testid="pasted-link-offer"
       >
-        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
-        <span class="min-w-0 flex-1 truncate text-xs text-slate-300">
+        <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-primary" />
+        <span class="min-w-0 flex-1 truncate text-xs text-toned">
           {{
             t('contextAttachments.pastedLink.offer', {
               source: documents.descriptorFor(offer.source)?.label ?? offer.source,
@@ -271,12 +271,12 @@ function removePending(item: PendingContext) {
         <div
           v-for="item in pendingDocs"
           :key="contextKey(item)"
-          class="rounded-md border border-slate-800 bg-slate-900/60"
+          class="rounded-md border border-default bg-default/60"
         >
-          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-slate-300">
+          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-toned">
             <UIcon
               :name="item.icon ?? 'i-lucide-file-text'"
-              class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+              class="h-3.5 w-3.5 shrink-0 text-primary"
             />
             <span class="truncate">{{ item.title }}</span>
             <UBadge
@@ -290,7 +290,7 @@ function removePending(item: PendingContext) {
             </UBadge>
             <button
               type="button"
-              class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
+              class="ms-auto shrink-0 text-muted hover:text-default"
               @click="removePending(item)"
             >
               <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
@@ -298,14 +298,14 @@ function removePending(item: PendingContext) {
           </div>
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-amber-400"
+            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-slate-500">
+      <p v-else class="text-[11px] text-dimmed">
         {{ docsHint }}
       </p>
     </div>
@@ -313,7 +313,7 @@ function removePending(item: PendingContext) {
     <!-- Context issues (ungated; Attach disabled until a tracker is connected). -->
     <div class="space-y-2">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
           {{ t('contextAttachments.issues') }}
         </span>
         <UButton
@@ -379,12 +379,12 @@ function removePending(item: PendingContext) {
         <div
           v-for="item in pendingIssues"
           :key="contextKey(item)"
-          class="rounded-md border border-slate-800 bg-slate-900/60"
+          class="rounded-md border border-default bg-default/60"
         >
-          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-slate-300">
+          <div class="flex items-center gap-1.5 px-2 py-1.5 text-xs text-toned">
             <UIcon
               :name="item.icon ?? 'i-lucide-square-check'"
-              class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+              class="h-3.5 w-3.5 shrink-0 text-primary"
             />
             <span class="truncate">{{ item.title }}</span>
             <UBadge
@@ -398,7 +398,7 @@ function removePending(item: PendingContext) {
             </UBadge>
             <button
               type="button"
-              class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
+              class="ms-auto shrink-0 text-muted hover:text-default"
               @click="removePending(item)"
             >
               <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
@@ -409,14 +409,14 @@ function removePending(item: PendingContext) {
                again on submit, and a failure now blocks the create. -->
           <p
             v-if="item.unreadable"
-            class="px-2 pb-1.5 text-[11px] text-amber-400"
+            class="px-2 pb-1.5 text-[11px] text-app-warning-400"
             data-testid="context-item-unreadable"
           >
             {{ t('contextAttachments.unreadable', { error: item.unreadable }) }}
           </p>
         </div>
       </div>
-      <p v-else class="text-[11px] text-slate-500">
+      <p v-else class="text-[11px] text-dimmed">
         {{ issuesHint }}
       </p>
     </div>

package/app/components/docs/DocInterviewWindow.vue

@@ -107,7 +107,7 @@ const onProceed = () =>
   <ResultWindowShell
     :open="open"
     icon="i-lucide-messages-square"
-    icon-class="bg-indigo-500/15 text-indigo-300"
+    icon-class="bg-primary/15 text-primary"
     :title="block?.title ?? t('docInterview.title')"
     :subtitle="t('docInterview.subtitle')"
     width="3xl"
@@ -124,14 +124,14 @@ const onProceed = () =>
       <!-- No session yet -->
       <div
         v-if="!session"
-        class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+        class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted"
       >
         <UIcon name="i-lucide-messages-square" class="h-8 w-8 opacity-40" />
         <p class="text-sm">{{ t('docInterview.empty') }}</p>
       </div>
 
       <template v-else>
-        <p class="mb-4 text-[13px] leading-relaxed text-slate-300">
+        <p class="mb-4 text-[13px] leading-relaxed text-toned">
           {{ t('docInterview.intro') }}
         </p>
 
@@ -168,23 +168,23 @@ const onProceed = () =>
         <!-- Converged: show the synthesized authoring brief -->
         <div
           v-else-if="converged"
-          class="rounded-lg border border-slate-800 bg-slate-950/40 p-4"
+          class="rounded-lg border border-default bg-app-950/40 p-4"
           data-testid="doc-interview-converged"
         >
-          <p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-slate-500">
+          <p class="mb-2 text-[11px] font-medium uppercase tracking-wide text-dimmed">
             {{ t('docInterview.brief') }}
           </p>
           <pre
             v-if="session.brief"
-            class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-slate-300"
+            class="whitespace-pre-wrap break-words text-[13px] leading-relaxed text-toned"
             >{{ session.brief }}</pre>
-          <p v-else class="text-[13px] text-slate-400">{{ t('docInterview.converged') }}</p>
+          <p v-else class="text-[13px] text-muted">{{ t('docInterview.converged') }}</p>
         </div>
 
         <!-- No pending questions but not yet converged -->
         <div
           v-else-if="questions.length === 0"
-          class="rounded-lg border border-slate-800 bg-slate-950/40 p-4 text-center text-[13px] text-slate-400"
+          class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
         >
           {{ t('docInterview.converged') }}
         </div>
@@ -194,10 +194,10 @@ const onProceed = () =>
           <li
             v-for="q in questions"
             :key="q.key"
-            class="rounded-lg border border-slate-800 bg-slate-950/40 p-3"
+            class="rounded-lg border border-default bg-app-950/40 p-3"
             data-testid="doc-interview-question"
           >
-            <p class="mb-2 text-[13px] font-medium text-slate-200">{{ q.question }}</p>
+            <p class="mb-2 text-[13px] font-medium text-default">{{ q.question }}</p>
             <UTextarea
               v-model="drafts[q.key]"
               :rows="2"
@@ -212,7 +212,7 @@ const onProceed = () =>
                  for an answer to go. Saying so beats taking text the flush could only drop. -->
             <p
               v-if="!addressable(q)"
-              class="mt-1 text-[11px] text-amber-300"
+              class="mt-1 text-[11px] text-app-warning-300"
               data-testid="doc-interview-unanswerable"
             >
               {{ t('docInterview.unanswerable') }}
@@ -226,12 +226,12 @@ const onProceed = () =>
          re-submit a question set already in flight, and the resume is a no-op once it isn't. -->
     <footer
       v-if="session && phase === 'awaiting' && questions.length > 0"
-      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">
         <span
           v-if="unanswered > 0"
-          class="text-amber-400/90"
+          class="text-app-warning-400/90"
           data-testid="doc-interview-unanswered"
         >
           {{ t('docInterview.unanswered', { count: unanswered }) }}

package/app/components/documents/ContextDocumentPicker.vue

@@ -415,14 +415,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-2 rounded-lg border border-slate-800 bg-slate-900/40 p-2">
+  <div class="space-y-2 rounded-lg border border-default bg-default/40 p-2">
     <!-- Which source is being searched, always visible, plus the sources the user could add from
          here (each opens the connect modal over the caller's form). Rendered as plain text when
          there is nothing to decide, which for a member is the usual case. -->
     <div class="flex items-center gap-1.5">
       <span
         :id="sourceLabelId"
-        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
       >
         {{ t('documents.picker.sourceLabel') }}
       </span>
@@ -444,7 +444,7 @@ onMounted(() => {
           <span class="truncate">{{ descriptor?.label ?? t('documents.picker.noSource') }}</span>
         </UButton>
       </UDropdownMenu>
-      <span v-else class="flex min-w-0 items-center gap-1 text-xs text-slate-300">
+      <span v-else class="flex min-w-0 items-center gap-1 text-xs text-toned">
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0" />
         <span class="truncate">{{ descriptor?.label ?? t('documents.picker.noSource') }}</span>
       </span>
@@ -490,7 +490,7 @@ onMounted(() => {
         @keydown.enter="refRow && pickRef(refRow)"
       />
 
-      <p v-if="searchError" class="px-1 text-[11px] text-amber-400">
+      <p v-if="searchError" class="px-1 text-[11px] text-app-warning-400">
         {{ t('documents.picker.searchFailed', { error: searchError }) }}
       </p>
 
@@ -498,14 +498,14 @@ onMounted(() => {
            the user can still edit, rather than as a toast after the task is created. -->
       <p
         v-if="refState.status === 'checking'"
-        class="px-1 text-[11px] text-slate-500"
+        class="px-1 text-[11px] text-dimmed"
         data-testid="doc-ref-checking"
       >
         {{ t('documents.picker.refChecking') }}
       </p>
       <div
         v-else-if="refRejection"
-        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-amber-400"
+        class="flex flex-wrap items-center gap-x-2 gap-y-1 px-1 text-[11px] text-app-warning-400"
         data-testid="doc-ref-rejected"
       >
         <span>{{ refRejection }}</span>
@@ -523,7 +523,7 @@ onMounted(() => {
       </div>
       <p
         v-else-if="refState.status === 'unchecked'"
-        class="px-1 text-[11px] text-amber-400"
+        class="px-1 text-[11px] text-app-warning-400"
         data-testid="doc-ref-unchecked"
       >
         {{ t('documents.picker.refCheckFailed', { error: refState.message }) }}
@@ -532,7 +532,7 @@ onMounted(() => {
            at all reads as a picker that dropped it. -->
       <p
         v-else-if="refAlreadyAttached"
-        class="px-1 text-[11px] text-slate-500"
+        class="px-1 text-[11px] text-dimmed"
         data-testid="doc-ref-already-attached"
       >
         {{ t('documents.picker.refAlreadyAttached') }}
@@ -544,10 +544,10 @@ onMounted(() => {
           v-for="d in importedRows"
           :key="`imp:${d.externalId}`"
           type="button"
-          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickImported(d.externalId, d.title, d.excerpt)"
         >
-          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
+          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-primary" />
           <span class="truncate">{{ d.title }}</span>
           <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
             t('documents.picker.importedBadge')
@@ -559,10 +559,10 @@ onMounted(() => {
           v-for="r in searchRows"
           :key="`hit:${r.externalId}`"
           type="button"
-          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           @click="pickSearch(r)"
         >
-          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
+          <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-muted" />
           <span class="truncate">{{ r.title }}</span>
         </button>
 
@@ -572,20 +572,20 @@ onMounted(() => {
         <button
           v-if="refRow"
           type="button"
-          class="flex w-full items-start gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
+          class="flex w-full items-start gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
           data-testid="doc-ref-attach"
           @click="pickRef(refRow)"
         >
-          <UIcon name="i-lucide-link" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-400" />
+          <UIcon name="i-lucide-link" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
           <span class="min-w-0">
             <span class="block truncate">
               <i18n-t keypath="documents.picker.attachByReference" scope="global">
                 <template #ref>
-                  <span class="text-slate-200">{{ refRow.label }}</span>
+                  <span class="text-default">{{ refRow.label }}</span>
                 </template>
               </i18n-t>
             </span>
-            <span v-if="refRow.trimmed" class="block truncate text-[11px] text-slate-500">
+            <span v-if="refRow.trimmed" class="block truncate text-[11px] text-dimmed">
               {{ t('documents.picker.refTrimmed') }}
             </span>
             <!-- A WIDENED reference, which the trim note above must never be left to imply: the
@@ -593,7 +593,7 @@ onMounted(() => {
                  around it. Amber and separate, because it is a loss rather than tidying. -->
             <span
               v-if="refRow.droppedScope"
-              class="block text-[11px] text-amber-400"
+              class="block text-[11px] text-app-warning-400"
               data-testid="doc-ref-widened"
             >
               {{ t('documents.picker.refWidened', { scope: refRow.droppedScope }) }}