@cat-factory/app 0.302.2 → 0.303.0

package/app/components/panels/AgentStepDetail.vue

@@ -391,7 +391,7 @@ async function copyOutput() {
     v-if="open && step && agent"
     data-testid="step-detail"
     :data-agent-kind="step?.agentKind"
-    class="fixed inset-0 z-50 flex max-h-[100dvh] bg-slate-950/96 backdrop-blur-sm"
+    class="fixed inset-0 z-50 flex max-h-[100dvh] bg-app-950/96 backdrop-blur-sm"
     role="dialog"
     aria-modal="true"
   >
@@ -399,10 +399,10 @@ async function copyOutput() {
     <aside
       v-if="outline.hasToc"
       data-testid="step-detail-toc"
-      class="hidden w-72 shrink-0 flex-col border-e border-slate-800 bg-slate-900/60 md:flex"
+      class="hidden w-72 shrink-0 flex-col border-e border-default bg-default/60 md:flex"
     >
-      <div class="border-b border-slate-800 px-4 py-3">
-        <div class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+      <div class="border-b border-default px-4 py-3">
+        <div class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
           {{ t('panels.stepDetail.contents') }}
         </div>
       </div>
@@ -411,8 +411,8 @@ async function copyOutput() {
           class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
           :class="
             activeId === 'step-details'
-              ? 'bg-indigo-500/15 font-medium text-indigo-200'
-              : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200'
+              ? 'bg-primary/15 font-medium text-primary'
+              : 'text-muted hover:bg-elevated/60 hover:text-default'
           "
           @click="goTo('step-details')"
         >
@@ -424,8 +424,8 @@ async function copyOutput() {
           class="block w-full truncate rounded-md px-2 py-1 text-start text-[13px] transition"
           :class="
             activeId === s.id
-              ? 'bg-indigo-500/15 font-medium text-indigo-200'
-              : 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200'
+              ? 'bg-primary/15 font-medium text-primary'
+              : 'text-muted hover:bg-elevated/60 hover:text-default'
           "
           :style="{ paddingLeft: `${(s.depth - outline.minDepth) * 0.85 + 0.5}rem` }"
           :title="s.title"
@@ -438,16 +438,16 @@ async function copyOutput() {
 
     <!-- main column -->
     <div class="flex min-w-0 flex-1 flex-col">
-      <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+      <header class="flex items-center gap-3 border-b border-default px-6 py-4">
         <div
           class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
-          :style="{ backgroundColor: agent.color + '22' }"
+          :style="{ backgroundColor: tint(agent.color) }"
         >
           <UIcon :name="agent.icon" class="h-5 w-5" :style="{ color: agent.color }" />
         </div>
         <div class="min-w-0">
-          <h1 class="truncate text-base font-semibold text-white">{{ agent.label }}</h1>
-          <p v-if="block" class="truncate text-xs text-slate-500">{{ block.title }}</p>
+          <h1 class="truncate text-base font-semibold text-highlighted">{{ agent.label }}</h1>
+          <p v-if="block" class="truncate text-xs text-dimmed">{{ block.title }}</p>
         </div>
         <div class="ms-auto flex items-center gap-1.5">
           <UBadge
@@ -519,7 +519,7 @@ async function copyOutput() {
           <section
             id="step-details"
             :ref="(el) => (sectionEls['step-details'] = el as HTMLElement | null)"
-            class="scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+            class="scroll-mt-4 rounded-xl border border-default bg-default/50 p-4"
           >
             <StepMetadataCard
               :step="step"
@@ -599,11 +599,11 @@ async function copyOutput() {
 
           <div
             v-if="parkPresentation"
-            class="rounded-xl border border-amber-500/30 bg-amber-500/5 p-4"
+            class="rounded-xl border border-app-warning-500/30 bg-app-warning-500/5 p-4"
             data-testid="dedicated-park-redirect"
             :data-park="dedicatedPark"
           >
-            <p class="text-[13px] leading-relaxed text-amber-200/90">
+            <p class="text-[13px] leading-relaxed text-app-warning-200/90">
               {{ t(parkPresentation.noticeKey) }}
             </p>
             <UButton
@@ -640,7 +640,7 @@ async function copyOutput() {
             <li
               v-for="(note, i) in runNotes"
               :key="i"
-              class="flex items-start gap-1.5 text-[11px] leading-snug text-amber-300/80"
+              class="flex items-start gap-1.5 text-[11px] leading-snug text-app-warning-300/80"
             >
               <UIcon name="i-lucide-info" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>{{ note }}</span>
@@ -755,7 +755,7 @@ async function copyOutput() {
           <!-- edit-then-approve: a direct editor over the raw conclusions; the
                edits become the approved proposal that flows to the next step -->
           <section v-if="editing" class="scroll-mt-4">
-            <div class="mb-2 flex items-center gap-1.5 text-[11px] text-amber-400">
+            <div class="mb-2 flex items-center gap-1.5 text-[11px] text-app-warning-400">
               <UIcon name="i-lucide-pencil" class="h-3.5 w-3.5" />
               <span class="font-semibold uppercase tracking-wide">{{
                 t('panels.stepDetail.editingConclusions')
@@ -783,16 +783,16 @@ async function copyOutput() {
             >
               <button
                 v-if="s.depth > 0"
-                class="group flex w-full items-center gap-2 rounded-md py-1 text-start transition hover:text-white"
+                class="group flex w-full items-center gap-2 rounded-md py-1 text-start transition hover:text-highlighted"
                 @click="toggle(s.id)"
               >
                 <UIcon
                   name="i-lucide-chevron-right"
-                  class="h-4 w-4 shrink-0 text-slate-500 transition-transform group-hover:text-slate-300"
+                  class="h-4 w-4 shrink-0 text-dimmed transition-transform group-hover:text-toned"
                   :class="collapsed[s.id] ? '' : 'rotate-90'"
                 />
                 <span
-                  class="font-semibold text-slate-100"
+                  class="font-semibold text-app-100"
                   :class="s.depth <= 1 ? 'text-lg' : s.depth === 2 ? 'text-base' : 'text-sm'"
                   v-html="s.titleHtml"
                 />
@@ -800,7 +800,7 @@ async function copyOutput() {
               <!-- eslint-disable-next-line vue/no-v-html -->
               <div
                 v-show="!collapsed[s.id]"
-                class="reader-prose mt-1 text-[13px] leading-relaxed text-slate-300"
+                class="reader-prose mt-1 text-[13px] leading-relaxed text-toned"
                 :class="[
                   s.depth > 0 ? 'ps-6' : '',
                   genericApprovalPending && !editing ? 'review-mode' : '',
@@ -813,7 +813,7 @@ async function copyOutput() {
 
           <p
             v-else
-            class="rounded-lg border border-dashed border-slate-800 py-6 text-center text-sm text-slate-500"
+            class="rounded-lg border border-dashed border-default py-6 text-center text-sm text-dimmed"
           >
             {{ t('panels.stepDetail.noProseOutput') }}
           </p>
@@ -826,24 +826,28 @@ async function copyOutput() {
          bottom sheet (still reachable) below lg, so the gate is always actionable. -->
     <aside
       v-if="genericApprovalPending"
-      class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-s lg:border-t-0 lg:border-slate-800 lg:bg-slate-900/60 lg:shadow-none lg:backdrop-blur-none"
+      class="absolute inset-x-0 bottom-0 z-10 flex max-h-[70dvh] flex-col rounded-t-2xl border-t border-muted bg-default/95 shadow-2xl backdrop-blur lg:static lg:inset-auto lg:z-auto lg:max-h-none lg:w-96 lg:shrink-0 lg:rounded-none lg:border-s lg:border-t-0 lg:border-default lg:bg-default/60 lg:shadow-none lg:backdrop-blur-none"
     >
-      <div class="border-b border-slate-800 px-4 py-3">
-        <div class="text-[11px] font-semibold uppercase tracking-wide text-amber-400">
+      <div class="border-b border-default px-4 py-3">
+        <div class="text-[11px] font-semibold uppercase tracking-wide text-app-warning-400">
           {{
             editing
               ? t('panels.stepDetail.approveWithCorrections')
               : t('panels.stepDetail.reviewAndApprove')
           }}
         </div>
-        <p class="mt-1 text-[12px] text-slate-400">
+        <p class="mt-1 text-[12px] text-muted">
           {{ editing ? t('panels.stepDetail.editHint') : t('panels.stepDetail.reviewHint') }}
         </p>
         <!-- The gate's configured POLICY, when it has one. Both lines exist because an
            approve on such a gate legitimately may not advance the run: without the tally, a
            correctly-recorded approval is indistinguishable from a call that failed, and
            without the refusal a person would press a button the server answers 403. -->
-        <p v-if="gateQuorum" class="mt-1 text-[12px] text-amber-300/90" data-testid="gate-quorum">
+        <p
+          v-if="gateQuorum"
+          class="mt-1 text-[12px] text-app-warning-300/90"
+          data-testid="gate-quorum"
+        >
           {{
             t('panels.stepDetail.quorumProgress', {
               recorded: gateQuorum.recorded,
@@ -852,11 +856,7 @@ async function copyOutput() {
           }}
           <span v-if="viewerHasApproved">{{ t('panels.stepDetail.quorumYours') }}</span>
         </p>
-        <p
-          v-if="gateRefusal"
-          class="mt-1 text-[12px] text-slate-400"
-          data-testid="gate-not-approver"
-        >
+        <p v-if="gateRefusal" class="mt-1 text-[12px] text-muted" data-testid="gate-not-approver">
           {{ t(GATE_REFUSAL_KEYS[gateRefusal]) }}
         </p>
       </div>
@@ -864,7 +864,7 @@ async function copyOutput() {
       <div class="flex-1 space-y-3 overflow-auto overscroll-contain px-4 py-3">
         <p
           v-if="editing"
-          class="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-[12px] leading-relaxed text-amber-200/90"
+          class="rounded-lg border border-app-warning-500/30 bg-app-warning-500/5 p-3 text-[12px] leading-relaxed text-app-warning-200/90"
         >
           {{ t('panels.stepDetail.editingNotice') }}
         </p>
@@ -873,13 +873,13 @@ async function copyOutput() {
           <div
             v-if="draftTarget"
             data-testid="step-review-composer"
-            class="rounded-lg border border-indigo-500/40 bg-indigo-500/5 p-3"
+            class="rounded-lg border border-primary/40 bg-primary/5 p-3"
           >
-            <div class="mb-1 text-[10px] uppercase tracking-wide text-indigo-300">
+            <div class="mb-1 text-[10px] uppercase tracking-wide text-primary">
               {{ t('panels.stepDetail.commentingOn') }}
             </div>
             <pre
-              class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded bg-slate-950/60 p-2 text-[11px] text-slate-300"
+              class="mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-2 text-[11px] text-toned"
               >{{ draftTarget.quotedSource }}</pre>
             <UTextarea
               v-model="draftBody"
@@ -911,14 +911,14 @@ async function copyOutput() {
             v-for="(c, idx) in reviewComments"
             :key="idx"
             data-testid="step-review-comment"
-            class="rounded-lg border border-slate-800 bg-slate-900/50 p-3"
+            class="rounded-lg border border-default bg-default/50 p-3"
           >
             <div class="mb-1 flex items-start justify-between gap-2">
-              <div class="text-[10px] uppercase tracking-wide text-slate-500">
+              <div class="text-[10px] uppercase tracking-wide text-dimmed">
                 {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
               </div>
               <button
-                class="text-slate-500 transition hover:text-rose-400"
+                class="text-dimmed transition hover:text-app-error-400"
                 :title="t('panels.stepDetail.removeComment')"
                 @click="removeComment(idx)"
               >
@@ -926,15 +926,13 @@ async function copyOutput() {
               </button>
             </div>
             <pre
-              class="mb-1 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-slate-950/50 p-1.5 text-[10px] text-slate-400"
+              class="mb-1 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-app-950/50 p-1.5 text-[10px] text-muted"
               >{{ c.quotedSource }}</pre>
-            <p class="text-[12px] text-slate-200">{{ c.body }}</p>
+            <p class="text-[12px] text-default">{{ c.body }}</p>
           </div>
 
           <div>
-            <label
-              class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
-            >
+            <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
               {{ t('panels.stepDetail.overallFeedback') }}
             </label>
             <UTextarea
@@ -953,7 +951,7 @@ async function copyOutput() {
       <!-- edit-then-approve actions -->
       <div
         v-if="editing"
-        class="space-y-2 border-t border-slate-800 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+        class="space-y-2 border-t border-default px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
       >
         <UButton
           color="primary"
@@ -979,7 +977,7 @@ async function copyOutput() {
 
       <div
         v-else
-        class="space-y-2 border-t border-slate-800 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+        class="space-y-2 border-t border-default px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
       >
         <UButton
           color="primary"
@@ -1007,20 +1005,23 @@ async function copyOutput() {
         </UButton>
         <p
           v-else-if="!proposalEditable"
-          class="text-[10px] text-slate-500"
+          class="text-[10px] text-dimmed"
           data-testid="step-rendered-output-note"
         >
           {{ t('panels.stepDetail.renderedOutputNote') }}
         </p>
         <!-- Withheld only until the quorum is one approval away, so it says so rather than
            leaving a reviewer to wonder where the affordance went. -->
-        <p v-else class="text-[10px] text-slate-500" data-testid="step-quorum-edit-locked">
+        <p v-else class="text-[10px] text-dimmed" data-testid="step-quorum-edit-locked">
           {{ t('panels.stepDetail.quorumEditLocked') }}
         </p>
 
         <!-- destructive: a two-step inline confirm instead of a native dialog -->
-        <div v-if="rejectArmed" class="rounded-lg border border-rose-500/40 bg-rose-500/5 p-2.5">
-          <p class="mb-2 text-[11px] text-rose-200">
+        <div
+          v-if="rejectArmed"
+          class="rounded-lg border border-app-error-500/40 bg-app-error-500/5 p-2.5"
+        >
+          <p class="mb-2 text-[11px] text-app-error-200">
             {{ t('panels.stepDetail.rejectConfirmPrompt') }}
           </p>
           <div class="flex gap-2">
@@ -1072,7 +1073,7 @@ async function copyOutput() {
             {{ t('panels.stepDetail.reject') }}
           </UButton>
         </div>
-        <p class="text-[10px] text-slate-500">
+        <p class="text-[10px] text-dimmed">
           {{ t('panels.stepDetail.requestChangesHint') }}
         </p>
       </div>

package/app/components/panels/AttemptEntryHeader.vue

@@ -23,14 +23,12 @@ function formatClock(ms: number | null | undefined, fmt: 'short' | 'long'): stri
 <template>
   <div class="flex items-center gap-2">
     <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" :class="iconClass" />
-    <span class="text-[13px] font-medium text-slate-200">{{ label }}</span>
+    <span class="text-[13px] font-medium text-default">{{ label }}</span>
     <UBadge :color="outcome === 'failed' ? 'error' : 'neutral'" variant="subtle" size="sm">{{
       outcomeLabel
     }}</UBadge>
-    <span
-      v-if="formatClock(at, dateFormat ?? 'short')"
-      class="ms-auto text-[11px] text-slate-500"
-      >{{ formatClock(at, dateFormat ?? 'short') }}</span
-    >
+    <span v-if="formatClock(at, dateFormat ?? 'short')" class="ms-auto text-[11px] text-dimmed">{{
+      formatClock(at, dateFormat ?? 'short')
+    }}</span>
   </div>
 </template>

package/app/components/panels/DecisionModal.vue

@@ -55,27 +55,27 @@ async function choose(option: string) {
   <UModal v-model:open="open" :title="t('panels.decision.title')">
     <template #body>
       <div v-if="decision && agent" class="space-y-4" data-testid="decision-modal">
-        <div class="flex items-center gap-2 text-sm text-slate-400">
+        <div class="flex items-center gap-2 text-sm text-muted">
           <div
             class="flex h-8 w-8 items-center justify-center rounded-lg"
-            :style="{ backgroundColor: agent.color + '22' }"
+            :style="{ backgroundColor: tint(agent.color) }"
           >
             <UIcon :name="agent.icon" class="h-4 w-4" :style="{ color: agent.color }" />
           </div>
           <div>
             <i18n-t v-if="block" keypath="panels.decision.agentOnBlock" tag="span" scope="global">
               <template #agent>
-                <span class="font-medium text-slate-200">{{ agent.label }}</span>
+                <span class="font-medium text-default">{{ agent.label }}</span>
               </template>
               <template #block>
-                <span class="font-medium text-slate-200">{{ block.title }}</span>
+                <span class="font-medium text-default">{{ block.title }}</span>
               </template>
             </i18n-t>
-            <span v-else class="font-medium text-slate-200">{{ agent.label }}</span>
+            <span v-else class="font-medium text-default">{{ agent.label }}</span>
           </div>
         </div>
 
-        <p class="text-base font-medium text-white">{{ decision.question }}</p>
+        <p class="text-base font-medium text-highlighted">{{ decision.question }}</p>
 
         <div class="grid gap-2">
           <UButton
@@ -93,7 +93,7 @@ async function choose(option: string) {
             {{ opt }}
           </UButton>
         </div>
-        <p class="text-[11px] text-slate-500">
+        <p class="text-[11px] text-dimmed">
           {{ t('panels.decision.visualizationHint') }}
         </p>
       </div>

package/app/components/panels/GenericStructuredResultView.vue

@@ -58,7 +58,7 @@ const customJson = computed<string | null>(() => {
   <ResultWindowShell
     :open="open"
     :icon="meta?.icon ?? 'i-lucide-braces'"
-    icon-class="bg-cyan-500/15 text-cyan-300"
+    icon-class="bg-app-hue-cyan/15 text-app-hue-cyan"
     :title="headerTitle"
     :subtitle="meta?.description ?? t('panels.structuredResult.fallbackDescription')"
     :step-ref="{ instanceId, stepIndex }"
@@ -71,28 +71,28 @@ const customJson = computed<string | null>(() => {
         <MarkdownProse
           v-if="step?.output"
           :text="step.output"
-          class="mb-4 text-[13px] leading-relaxed text-slate-300"
+          class="mb-4 text-[13px] leading-relaxed text-toned"
         />
 
         <template v-if="customJson">
           <div class="mb-2 flex items-center gap-2">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
               {{ t('panels.structuredResult.structuredOutput') }}
             </h3>
             <CopyButton :text="customJson" class="-my-1" />
           </div>
           <pre
-            class="overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-[12px] leading-relaxed text-slate-200"
+            class="overflow-x-auto rounded-lg border border-default bg-app-950/60 p-3 text-[12px] leading-relaxed text-default"
           ><code>{{ customJson }}</code></pre>
         </template>
 
         <div
           v-else-if="!step?.output"
-          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-braces" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('panels.structuredResult.noResult') }}</p>
-          <p class="max-w-sm text-[11px] text-slate-500">
+          <p class="max-w-sm text-[11px] text-dimmed">
             {{ t('panels.structuredResult.noResultHint') }}
           </p>
         </div>
@@ -100,7 +100,7 @@ const customJson = computed<string | null>(() => {
 
       <!-- Sidebar: shared run metadata + observability rollup -->
       <aside
-        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+        class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <StepRunMeta
           v-if="step"

package/app/components/panels/InspectorPanel.vue

@@ -342,7 +342,7 @@ const showOriginalDescription = ref(false)
     v-if="block && statusMeta && typeMeta"
     data-testid="inspector-panel"
     :data-inspector-block="block.id"
-    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-16 lg:w-80 lg:rounded-2xl"
+    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-muted bg-default/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-16 lg:w-80 lg:rounded-2xl"
   >
     <div class="h-1.5 w-full" :style="{ backgroundColor: statusMeta.color }" />
     <!-- A tall task (execution steps + scenarios + docs) can overflow the
@@ -358,17 +358,17 @@ const showOriginalDescription = ref(false)
         <div class="flex items-center gap-2">
           <div
             class="flex h-9 w-9 items-center justify-center rounded-lg"
-            :style="{ backgroundColor: typeMeta.accent + '22' }"
+            :style="{ backgroundColor: tint(typeMeta.accent) }"
           >
             <UIcon :name="typeMeta.icon" class="h-5 w-5" :style="{ color: typeMeta.accent }" />
           </div>
           <div>
-            <div class="text-sm font-semibold text-white">{{ block.title }}</div>
+            <div class="text-sm font-semibold text-highlighted">{{ block.title }}</div>
             <div class="mt-0.5 flex items-center gap-1.5">
               <UBadge :color="statusMeta.chip" variant="subtle" size="sm">
                 {{ statusLabel }}
               </UBadge>
-              <span class="text-[10px] uppercase tracking-wide text-slate-500">{{ level }}</span>
+              <span class="text-[10px] uppercase tracking-wide text-dimmed">{{ level }}</span>
             </div>
           </div>
         </div>
@@ -401,18 +401,18 @@ const showOriginalDescription = ref(false)
         <!-- reworked: the standardized requirements document takes focus; the raw
              description is frozen and tucked behind an expander. -->
         <template v-if="frozenByRework">
-          <div class="rounded-lg border border-emerald-900/60 bg-emerald-950/20 p-3">
+          <div class="rounded-lg border border-app-success-900/60 bg-app-success-950/20 p-3">
             <div
-              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-emerald-400"
+              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-app-success-400"
             >
               <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
               {{ t('panels.inspector.reworkedRequirements') }}
             </div>
-            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300">
+            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
               {{ reqReworkedText }}
             </p>
             <div class="mt-2 flex items-center justify-between gap-2">
-              <p class="text-[11px] text-slate-500">
+              <p class="text-[11px] text-dimmed">
                 {{ t('panels.inspector.agentStepsUseDocument') }}
               </p>
               <UButton
@@ -464,23 +464,23 @@ const showOriginalDescription = ref(false)
             @change="saveDescription"
             @blur="saveDescription"
           />
-          <p v-if="isTask && !editable" class="flex items-center gap-1 text-[11px] text-slate-500">
+          <p v-if="isTask && !editable" class="flex items-center gap-1 text-[11px] text-dimmed">
             <UIcon name="i-lucide-lock" class="h-3 w-3" />
             {{ t('panels.inspector.taskStartedLocked') }}
           </p>
 
           <!-- prior incorporated requirements kept as a base after a review-driven reset -->
-          <div v-if="reqHasPriorDoc" class="rounded-lg border border-slate-700 bg-slate-800/40 p-3">
+          <div v-if="reqHasPriorDoc" class="rounded-lg border border-muted bg-elevated/40 p-3">
             <div
-              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+              class="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
             >
               <UIcon name="i-lucide-history" class="h-3.5 w-3.5" />
               {{ t('panels.inspector.lastIncorporatedRequirements') }}
             </div>
-            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300">
+            <p class="line-clamp-5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
               {{ reqReworkedText }}
             </p>
-            <p class="mt-2 text-[11px] text-slate-500">
+            <p class="mt-2 text-[11px] text-dimmed">
               {{ t('panels.inspector.priorDocHint') }}
             </p>
           </div>
@@ -493,10 +493,10 @@ const showOriginalDescription = ref(false)
       <!-- running bootstrap: show the steps, let the user inspect it, let them stop it -->
       <div
         v-else-if="runningRun"
-        class="space-y-2 rounded-lg border border-amber-900/60 bg-amber-950/30 px-3 py-2"
+        class="space-y-2 rounded-lg border border-app-warning-900/60 bg-app-warning-950/30 px-3 py-2"
       >
         <div class="flex items-center justify-between gap-2">
-          <span class="flex items-center gap-1.5 text-xs text-amber-300">
+          <span class="flex items-center gap-1.5 text-xs text-app-warning-300">
             <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
             {{ t('panels.inspector.bootstrapping') }}
           </span>
@@ -586,7 +586,7 @@ const showOriginalDescription = ref(false)
       >
         {{ t('panels.inspector.mapService') }}
       </UButton>
-      <p v-if="isFrame && !serviceRepo" class="text-[11px] text-slate-500">
+      <p v-if="isFrame && !serviceRepo" class="text-[11px] text-dimmed">
         {{ t('panels.inspector.mapServiceNoRepo') }}
       </p>
 
@@ -613,7 +613,7 @@ const showOriginalDescription = ref(false)
            on a disabled button doesn't fire hover events. -->
       <p
         v-if="isTask && runBlockedReason"
-        class="flex items-start gap-1.5 text-[11px] text-amber-300/90"
+        class="flex items-start gap-1.5 text-[11px] text-app-warning-300/90"
         data-testid="run-blocked-reason"
       >
         <UIcon name="i-lucide-lock" class="mt-px h-3 w-3 shrink-0" />