@cat-factory/app 0.302.2 → 0.303.1

package/app/components/kaizen/KaizenPanel.vue

@@ -35,12 +35,12 @@ function when(ms: number): string {
   return d(new Date(ms), 'long')
 }
 function gradeTone(g: KaizenGrading): string {
-  if (g.status === 'failed') return 'text-slate-500'
-  if (g.grade == null) return 'text-slate-400'
-  if (g.grade >= 5) return 'text-emerald-400'
-  if (g.grade >= 4) return 'text-lime-400'
-  if (g.grade === 3) return 'text-amber-400'
-  return 'text-rose-400'
+  if (g.status === 'failed') return 'text-dimmed'
+  if (g.grade == null) return 'text-muted'
+  if (g.grade >= 5) return 'text-app-success-400'
+  if (g.grade >= 4) return 'text-app-hue-lime'
+  if (g.grade === 3) return 'text-app-warning-400'
+  return 'text-app-error-400'
 }
 function statusLabel(g: KaizenGrading): string {
   if (g.status === 'scheduled') return t('kaizen.status.scheduled')
@@ -55,17 +55,21 @@ function statusLabel(g: KaizenGrading): string {
     <Transition name="kz-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-[60] flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        class="fixed inset-0 z-[60] flex flex-col bg-app-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
       >
-        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
-          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-teal-500/15">
-            <UIcon name="i-lucide-sparkles" class="h-5 w-5 text-teal-400" />
+        <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 bg-app-hue-teal/15"
+          >
+            <UIcon name="i-lucide-sparkles" class="h-5 w-5 text-app-hue-teal" />
           </div>
           <div class="min-w-0">
-            <h1 class="truncate text-base font-semibold text-white">{{ t('kaizen.title') }}</h1>
-            <p class="truncate text-xs text-slate-500">
+            <h1 class="truncate text-base font-semibold text-highlighted">
+              {{ t('kaizen.title') }}
+            </h1>
+            <p class="truncate text-xs text-dimmed">
               {{ t('kaizen.subtitle') }}
             </p>
           </div>
@@ -88,7 +92,7 @@ function statusLabel(g: KaizenGrading): string {
 
         <div
           v-if="kaizen.available === false"
-          class="flex flex-1 items-center justify-center text-sm text-slate-500"
+          class="flex flex-1 items-center justify-center text-sm text-dimmed"
         >
           {{ t('kaizen.notConfigured') }}
         </div>
@@ -96,21 +100,21 @@ function statusLabel(g: KaizenGrading): string {
         <div v-else class="grid flex-1 grid-cols-1 gap-6 overflow-auto p-6 lg:grid-cols-3">
           <!-- Verified combos -->
           <section class="lg:col-span-1">
-            <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200">
-              <UIcon name="i-lucide-badge-check" class="h-4 w-4 text-emerald-400" />
+            <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-default">
+              <UIcon name="i-lucide-badge-check" class="h-4 w-4 text-app-success-400" />
               {{ t('kaizen.verifiedCombos.title') }}
-              <span class="text-xs font-normal text-slate-500">{{
+              <span class="text-xs font-normal text-dimmed">{{
                 t('kaizen.verifiedCombos.count', { count: kaizen.verifiedCount })
               }}</span>
             </h2>
-            <p class="mb-3 text-[11px] text-slate-500">
+            <p class="mb-3 text-[11px] text-dimmed">
               {{ t('kaizen.verifiedCombos.hint') }}
             </p>
             <ul class="space-y-2">
               <li
                 v-for="c in kaizen.verified"
                 :key="c.comboKey"
-                class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5"
+                class="rounded-lg border border-default bg-default/40 p-2.5"
               >
                 <div class="flex items-center gap-2">
                   <UIcon
@@ -118,19 +122,19 @@ function statusLabel(g: KaizenGrading): string {
                     class="h-3.5 w-3.5 shrink-0"
                     :style="{ color: meta(c.agentKind).color }"
                   />
-                  <span class="text-xs font-medium text-slate-200">{{
+                  <span class="text-xs font-medium text-default">{{
                     meta(c.agentKind).label
                   }}</span>
                   <UIcon
                     v-if="c.verified"
                     name="i-lucide-badge-check"
-                    class="ms-auto h-3.5 w-3.5 text-emerald-400"
+                    class="ms-auto h-3.5 w-3.5 text-app-success-400"
                   />
-                  <span v-else class="ms-auto text-[11px] text-slate-500">
+                  <span v-else class="ms-auto text-[11px] text-dimmed">
                     {{ t('kaizen.verifiedCombos.progress', { count: c.consecutiveHighGrades }) }}
                   </span>
                 </div>
-                <div class="mt-1 truncate text-[11px] text-slate-500" :title="c.model">
+                <div class="mt-1 truncate text-[11px] text-dimmed" :title="c.model">
                   {{
                     t('kaizen.verifiedCombos.modelPrompt', {
                       model: c.model,
@@ -139,7 +143,7 @@ function statusLabel(g: KaizenGrading): string {
                   }}
                 </div>
               </li>
-              <li v-if="kaizen.verified.length === 0" class="text-xs text-slate-600">
+              <li v-if="kaizen.verified.length === 0" class="text-xs text-app-600">
                 {{ t('kaizen.verifiedCombos.empty') }}
               </li>
             </ul>
@@ -147,13 +151,13 @@ function statusLabel(g: KaizenGrading): string {
 
           <!-- Grading history -->
           <section class="lg:col-span-2">
-            <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200">
-              <UIcon name="i-lucide-history" class="h-4 w-4 text-teal-400" />
+            <h2 class="mb-2 flex items-center gap-2 text-sm font-semibold text-default">
+              <UIcon name="i-lucide-history" class="h-4 w-4 text-app-hue-teal" />
               {{ t('kaizen.history.title') }}
             </h2>
-            <div class="overflow-hidden rounded-lg border border-slate-800">
+            <div class="overflow-hidden rounded-lg border border-default">
               <table class="w-full text-start text-xs">
-                <thead class="bg-slate-900/60 text-[11px] uppercase tracking-wide text-slate-500">
+                <thead class="bg-default/60 text-[11px] uppercase tracking-wide text-dimmed">
                   <tr>
                     <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.when') }}</th>
                     <th class="px-3 py-2 font-medium">{{ t('kaizen.history.col.agent') }}</th>
@@ -164,9 +168,9 @@ function statusLabel(g: KaizenGrading): string {
                     </th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-slate-800/70">
+                <tbody class="divide-y divide-default/70">
                   <tr v-for="g in kaizen.history" :key="g.id" class="align-top">
-                    <td class="whitespace-nowrap px-3 py-2 text-slate-500">
+                    <td class="whitespace-nowrap px-3 py-2 text-dimmed">
                       {{ when(g.createdAt) }}
                     </td>
                     <td class="px-3 py-2">
@@ -176,28 +180,28 @@ function statusLabel(g: KaizenGrading): string {
                           class="h-3.5 w-3.5"
                           :style="{ color: meta(g.agentKind).color }"
                         />
-                        <span class="text-slate-200">{{ meta(g.agentKind).label }}</span>
-                        <span class="text-slate-600">{{
+                        <span class="text-default">{{ meta(g.agentKind).label }}</span>
+                        <span class="text-app-600">{{
                           t('kaizen.promptVersion', { version: g.promptVersion })
                         }}</span>
                       </span>
                     </td>
-                    <td class="max-w-[12rem] truncate px-3 py-2 text-slate-400" :title="g.model">
+                    <td class="max-w-[12rem] truncate px-3 py-2 text-muted" :title="g.model">
                       {{ g.model }}
                     </td>
                     <td class="whitespace-nowrap px-3 py-2 font-semibold" :class="gradeTone(g)">
                       {{ statusLabel(g) }}
                     </td>
-                    <td class="px-3 py-2 text-slate-400">
+                    <td class="px-3 py-2 text-muted">
                       <ul v-if="g.recommendations.length" class="list-disc space-y-0.5 ps-4">
                         <li v-for="(r, i) in g.recommendations" :key="i">{{ r }}</li>
                       </ul>
-                      <span v-else-if="g.status === 'complete'" class="text-slate-600">—</span>
-                      <span v-else-if="g.error" class="text-rose-400/80">{{ g.error }}</span>
+                      <span v-else-if="g.status === 'complete'" class="text-app-600">—</span>
+                      <span v-else-if="g.error" class="text-app-error-400/80">{{ g.error }}</span>
                     </td>
                   </tr>
                   <tr v-if="kaizen.history.length === 0">
-                    <td colspan="5" class="px-3 py-6 text-center text-slate-600">
+                    <td colspan="5" class="px-3 py-6 text-center text-app-600">
                       {{ t('kaizen.history.empty') }}
                     </td>
                   </tr>

package/app/components/kaizen/KaizenStepStatus.vue

@@ -34,31 +34,31 @@ watch(
 
 const tone = computed(() => {
   const g = grading.value
-  if (!g || g.grade == null) return 'text-slate-400'
-  if (g.grade >= 5) return 'text-emerald-400'
-  if (g.grade >= 4) return 'text-lime-400'
-  if (g.grade === 3) return 'text-amber-400'
-  return 'text-rose-400'
+  if (!g || g.grade == null) return 'text-muted'
+  if (g.grade >= 5) return 'text-app-success-400'
+  if (g.grade >= 4) return 'text-app-hue-lime'
+  if (g.grade === 3) return 'text-app-warning-400'
+  return 'text-app-error-400'
 })
 </script>
 
 <template>
-  <section v-if="grading" class="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
+  <section v-if="grading" class="rounded-xl border border-default bg-default/50 p-4">
     <div class="flex items-center gap-2">
-      <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-teal-400" />
-      <h3 class="text-sm font-semibold text-slate-200">{{ t('kaizen.grading.title') }}</h3>
+      <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-app-hue-teal" />
+      <h3 class="text-sm font-semibold text-default">{{ t('kaizen.grading.title') }}</h3>
       <span class="ms-auto flex items-center gap-1.5 text-xs">
         <template v-if="grading.status === 'scheduled'">
-          <UIcon name="i-lucide-clock" class="h-3.5 w-3.5 text-slate-500" />
-          <span class="text-slate-400">{{ t('kaizen.status.scheduled') }}</span>
+          <UIcon name="i-lucide-clock" class="h-3.5 w-3.5 text-dimmed" />
+          <span class="text-muted">{{ t('kaizen.status.scheduled') }}</span>
         </template>
         <template v-else-if="grading.status === 'running'">
-          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin text-teal-400" />
-          <span class="text-teal-300">{{ t('kaizen.status.grading') }}</span>
+          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin text-app-hue-teal" />
+          <span class="text-app-hue-teal">{{ t('kaizen.status.grading') }}</span>
         </template>
         <template v-else-if="grading.status === 'failed'">
-          <UIcon name="i-lucide-circle-alert" class="h-3.5 w-3.5 text-rose-400" />
-          <span class="text-rose-400">{{ t('kaizen.status.failed') }}</span>
+          <UIcon name="i-lucide-circle-alert" class="h-3.5 w-3.5 text-app-error-400" />
+          <span class="text-app-error-400">{{ t('kaizen.status.failed') }}</span>
         </template>
         <template v-else>
           <span class="font-semibold" :class="tone">{{
@@ -68,29 +68,29 @@ const tone = computed(() => {
       </span>
     </div>
 
-    <p v-if="grading.status === 'scheduled'" class="mt-2 text-[11px] text-slate-500">
+    <p v-if="grading.status === 'scheduled'" class="mt-2 text-[11px] text-dimmed">
       {{ t('kaizen.scheduledHint') }}
     </p>
 
     <template v-else-if="grading.status === 'complete'">
-      <p v-if="grading.summary" class="mt-2 text-xs text-slate-300">{{ grading.summary }}</p>
+      <p v-if="grading.summary" class="mt-2 text-xs text-toned">{{ grading.summary }}</p>
       <div v-if="grading.recommendations.length" class="mt-2">
-        <p class="text-[11px] font-medium uppercase tracking-wide text-slate-500">
+        <p class="text-[11px] font-medium uppercase tracking-wide text-dimmed">
           {{ t('kaizen.recommendations') }}
         </p>
-        <ul class="mt-1 list-disc space-y-0.5 ps-4 text-xs text-slate-300">
+        <ul class="mt-1 list-disc space-y-0.5 ps-4 text-xs text-toned">
           <li v-for="(r, i) in grading.recommendations" :key="i">{{ r }}</li>
         </ul>
       </div>
-      <p v-else class="mt-2 text-[11px] text-emerald-400/80">
+      <p v-else class="mt-2 text-[11px] text-app-success-400/80">
         {{ t('kaizen.noImprovements') }}
       </p>
-      <p v-if="grading.graderModel" class="mt-2 text-[10px] text-slate-600">
+      <p v-if="grading.graderModel" class="mt-2 text-[10px] text-app-600">
         {{ t('kaizen.gradedBy', { model: grading.graderModel }) }}
       </p>
     </template>
 
-    <p v-else-if="grading.status === 'failed'" class="mt-2 text-[11px] text-rose-400/80">
+    <p v-else-if="grading.status === 'failed'" class="mt-2 text-[11px] text-app-error-400/80">
       {{ grading.error ?? t('kaizen.failedFallback') }}
     </p>
   </section>

package/app/components/layout/AccountAuditLog.vue

@@ -85,11 +85,11 @@ function timestamp(at: number): string {
 </script>
 
 <template>
-  <section class="rounded-md border border-slate-800 bg-slate-800/40 p-4">
+  <section class="rounded-md border border-default bg-elevated/40 p-4">
     <div class="mb-3 flex items-start justify-between gap-3">
       <div>
-        <h3 class="font-semibold text-white">{{ t('layout.auditLog.title') }}</h3>
-        <p class="mt-1 text-slate-400">{{ t('layout.auditLog.description') }}</p>
+        <h3 class="font-semibold text-highlighted">{{ t('layout.auditLog.title') }}</h3>
+        <p class="mt-1 text-muted">{{ t('layout.auditLog.description') }}</p>
       </div>
       <UButton
         size="xs"
@@ -104,12 +104,12 @@ function timestamp(at: number): string {
     </div>
 
     <!-- A failed load is NOT an empty log; it says so and offers the retry. -->
-    <p v-if="loadError" class="text-red-400" data-testid="audit-log-error">
+    <p v-if="loadError" class="text-app-error-400" data-testid="audit-log-error">
       {{ t('layout.auditLog.errors.load') }}
-      <span class="text-slate-400">{{ loadError }}</span>
+      <span class="text-muted">{{ loadError }}</span>
     </p>
 
-    <p v-else-if="events.length === 0 && !loading" class="text-slate-400">
+    <p v-else-if="events.length === 0 && !loading" class="text-muted">
       {{ t('layout.auditLog.empty') }}
     </p>
 
@@ -117,13 +117,13 @@ function timestamp(at: number): string {
       <li
         v-for="event in events"
         :key="event.id"
-        class="rounded border border-slate-800 bg-slate-900/40 px-3 py-2"
+        class="rounded border border-default bg-default/40 px-3 py-2"
       >
         <div class="flex flex-wrap items-baseline gap-x-2">
-          <span class="font-medium text-white">{{ actor(event) }}</span>
-          <span class="text-slate-300">{{ describe(event) }}</span>
+          <span class="font-medium text-highlighted">{{ actor(event) }}</span>
+          <span class="text-toned">{{ describe(event) }}</span>
         </div>
-        <div class="mt-1 text-xs text-slate-500">{{ timestamp(event.at) }}</div>
+        <div class="mt-1 text-xs text-dimmed">{{ timestamp(event.at) }}</div>
       </li>
     </ol>
 

package/app/components/layout/AccountDeploymentSettings.vue

@@ -434,8 +434,8 @@ async function clearWeb() {
 <template>
   <div v-if="store.available !== false" class="space-y-6">
     <div>
-      <h3 class="mb-1 font-semibold text-white">{{ t('layout.accountDeployment.title') }}</h3>
-      <p class="text-[11px] text-slate-400">
+      <h3 class="mb-1 font-semibold text-highlighted">{{ t('layout.accountDeployment.title') }}</h3>
+      <p class="text-[11px] text-muted">
         {{ t('layout.accountDeployment.intro') }}
       </p>
     </div>
@@ -443,7 +443,7 @@ async function clearWeb() {
     <!-- Slack app OAuth -->
     <section class="space-y-2">
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">
+        <h4 class="text-sm font-semibold text-default">
           {{ t('layout.accountDeployment.slack.title') }}
         </h4>
         <UBadge
@@ -458,7 +458,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('layout.accountDeployment.slack.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -502,9 +502,9 @@ async function clearWeb() {
     </section>
 
     <!-- Linear app OAuth -->
-    <section class="space-y-2 border-t border-slate-800 pt-6">
+    <section class="space-y-2 border-t border-default pt-6">
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">
+        <h4 class="text-sm font-semibold text-default">
           {{ t('layout.accountDeployment.linear.title') }}
         </h4>
         <UBadge
@@ -519,7 +519,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('layout.accountDeployment.linear.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -563,9 +563,9 @@ async function clearWeb() {
     </section>
 
     <!-- Figma app OAuth (the document source's designer-doable connect) -->
-    <section class="space-y-2 border-t border-slate-800 pt-6">
+    <section class="space-y-2 border-t border-default pt-6">
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">
+        <h4 class="text-sm font-semibold text-default">
           {{ t('layout.accountDeployment.figma.title') }}
         </h4>
         <UBadge
@@ -580,7 +580,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('layout.accountDeployment.figma.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -624,9 +624,9 @@ async function clearWeb() {
     </section>
 
     <!-- Web search keys -->
-    <section class="space-y-2 border-t border-slate-800 pt-6">
+    <section class="space-y-2 border-t border-default pt-6">
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">
+        <h4 class="text-sm font-semibold text-default">
           {{ t('layout.accountDeployment.web.title') }}
         </h4>
         <UBadge :color="summary?.webSearch ? 'success' : 'neutral'" variant="subtle" size="xs">
@@ -637,7 +637,7 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('layout.accountDeployment.web.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
@@ -685,10 +685,10 @@ async function clearWeb() {
       v-if="storageCapability"
       id="content-storage"
       ref="storageSection"
-      class="space-y-2 border-t border-slate-800 pt-6"
+      class="space-y-2 border-t border-default pt-6"
     >
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">
+        <h4 class="text-sm font-semibold text-default">
           {{ t('layout.accountDeployment.contentStorage.title') }}
         </h4>
         <UBadge
@@ -706,16 +706,16 @@ async function clearWeb() {
           }}
         </UBadge>
       </div>
-      <p class="text-[11px] text-slate-400">
+      <p class="text-[11px] text-muted">
         {{ t('layout.accountDeployment.contentStorage.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
         <USelect v-model="csBackend" :items="backendItems" value-key="value" size="sm" />
       </div>
-      <p v-if="selectedCustomStore?.summary" class="text-[11px] text-slate-400">
+      <p v-if="selectedCustomStore?.summary" class="text-[11px] text-muted">
         {{ selectedCustomStore.summary }}
       </p>
-      <p v-if="unregisteredStoreId" class="text-[11px] text-amber-400">
+      <p v-if="unregisteredStoreId" class="text-[11px] text-app-warning-400">
         {{
           t('layout.accountDeployment.contentStorage.unregisteredStoreWarning', {
             store: unregisteredStoreId,
@@ -762,7 +762,7 @@ async function clearWeb() {
           size="sm"
         />
         <div class="flex items-center gap-2">
-          <span class="text-[11px] text-slate-400">
+          <span class="text-[11px] text-muted">
             {{ t('layout.accountDeployment.contentStorage.accessKeys') }}
           </span>
           <UBadge
@@ -789,7 +789,7 @@ async function clearWeb() {
             size="sm"
           />
         </div>
-        <p class="text-[11px] text-slate-400">
+        <p class="text-[11px] text-muted">
           {{ t('layout.accountDeployment.contentStorage.keysHint') }}
         </p>
       </template>

package/app/components/layout/AccountFailureKindRules.vue

@@ -144,10 +144,10 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
 
 <template>
   <div class="space-y-2" data-testid="platform-alert-failure-kinds">
-    <label class="text-[11px] font-medium text-slate-300">
+    <label class="text-[11px] font-medium text-toned">
       {{ t('settings.platformAlerts.failureKinds.label') }}
     </label>
-    <p class="text-[11px] text-slate-400">
+    <p class="text-[11px] text-muted">
       {{ t('settings.platformAlerts.failureKinds.description') }}
     </p>
 
@@ -159,7 +159,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
         data-testid="platform-alert-failure-kinds-override"
         @update:model-value="setOverriding(!!$event)"
       />
-      <p class="ps-6 text-[11px] text-slate-400">
+      <p class="ps-6 text-[11px] text-muted">
         {{ t('settings.platformAlerts.failureKinds.overrideHint') }}
       </p>
     </div>
@@ -167,7 +167,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
     <template v-if="overriding">
       <p
         v-if="rules.length === 0"
-        class="text-[11px] text-slate-500"
+        class="text-[11px] text-dimmed"
         data-testid="platform-alert-failure-kinds-empty"
       >
         {{ t('settings.platformAlerts.failureKinds.empty') }}
@@ -180,7 +180,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
         :data-testid="`platform-alert-failure-kind-row-${index}`"
       >
         <div class="space-y-1">
-          <label class="block text-[11px] text-slate-300">
+          <label class="block text-[11px] text-toned">
             {{ t('settings.platformAlerts.failureKinds.kindLabel') }}
           </label>
           <USelect
@@ -193,7 +193,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
           />
         </div>
         <div class="space-y-1">
-          <label class="block text-[11px] text-slate-300">
+          <label class="block text-[11px] text-toned">
             {{ t('settings.platformAlerts.failureKinds.shareLabel') }}
           </label>
           <UInput
@@ -204,12 +204,12 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
             :data-testid="`platform-alert-failure-share-${index}`"
             @update:model-value="setShare(index, String($event))"
           />
-          <p v-if="index === 0" class="text-[11px] text-slate-500">
+          <p v-if="index === 0" class="text-[11px] text-dimmed">
             {{ t('settings.platformAlerts.failureKinds.shareHint') }}
           </p>
         </div>
         <div class="space-y-1">
-          <label class="block text-[11px] text-slate-300">
+          <label class="block text-[11px] text-toned">
             {{ t('settings.platformAlerts.failureKinds.minCountLabel') }}
           </label>
           <UInput
@@ -235,7 +235,7 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
 
       <p
         v-if="faults.tooMany"
-        class="text-[11px] text-amber-300"
+        class="text-[11px] text-app-warning-300"
         data-testid="platform-alert-failure-kinds-too-many"
       >
         {{
@@ -244,14 +244,14 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
       </p>
       <p
         v-else-if="duplicateKinds.size > 0"
-        class="text-[11px] text-amber-300"
+        class="text-[11px] text-app-warning-300"
         data-testid="platform-alert-failure-kinds-duplicate"
       >
         {{ t('settings.platformAlerts.failureKinds.duplicateKind') }}
       </p>
       <p
         v-else-if="faults.rows.length > 0"
-        class="text-[11px] text-amber-300"
+        class="text-[11px] text-app-warning-300"
         data-testid="platform-alert-failure-kinds-invalid"
       >
         {{
@@ -272,12 +272,12 @@ const faults = computed(() => failureKindRuleFaults(rules.value))
       </UButton>
       <p
         v-if="nextFreeKind === undefined"
-        class="text-[11px] text-slate-500"
+        class="text-[11px] text-dimmed"
         data-testid="platform-alert-failure-kinds-all-covered"
       >
         {{ t('settings.platformAlerts.failureKinds.allKindsCovered') }}
       </p>
-      <p class="text-[11px] text-slate-500">
+      <p class="text-[11px] text-dimmed">
         {{ t('settings.platformAlerts.failureKinds.minCountHint') }}
       </p>
     </template>

package/app/components/layout/AccountFoundationalSettings.vue

@@ -12,7 +12,7 @@ const { t } = useI18n()
 <template>
   <div class="space-y-6 text-sm">
     <section>
-      <p class="mb-3 text-[11px] text-slate-400">
+      <p class="mb-3 text-[11px] text-muted">
         {{ t('layout.accountFoundational.intro') }}
       </p>
       <FoundationalServiceManager

package/app/components/layout/AccountFragmentSettings.vue

@@ -22,7 +22,7 @@ const viaWorkspaceId = computed(() => {
 <template>
   <div class="space-y-6 text-sm">
     <section>
-      <p class="mb-3 text-[11px] text-slate-400">
+      <p class="mb-3 text-[11px] text-muted">
         {{ t('layout.accountFragments.intro') }}
       </p>
       <FragmentLibraryManager

package/app/components/layout/AccountModelPolicySettings.vue

@@ -149,23 +149,23 @@ async function save() {
   <section
     v-if="store.available !== false"
     data-testid="account-model-policy"
-    class="space-y-3 border-t border-slate-800 pt-6"
+    class="space-y-3 border-t border-default pt-6"
   >
     <div>
-      <h4 class="text-sm font-semibold text-slate-200">{{ t('settings.modelPolicy.title') }}</h4>
-      <p class="text-[11px] text-slate-400">{{ t('settings.modelPolicy.description') }}</p>
+      <h4 class="text-sm font-semibold text-default">{{ t('settings.modelPolicy.title') }}</h4>
+      <p class="text-[11px] text-muted">{{ t('settings.modelPolicy.description') }}</p>
     </div>
 
     <!-- Region + apply-preset templates -->
     <div class="space-y-2">
-      <label class="text-[11px] font-medium text-slate-300">
+      <label class="text-[11px] font-medium text-toned">
         {{ t('settings.modelPolicy.regionLabel') }}
       </label>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
         <USelect v-model="region" :items="regionItems" value-key="value" size="sm" />
       </div>
       <div v-if="regionPresets.length" class="flex flex-wrap items-center gap-2">
-        <span class="text-[11px] text-slate-400">{{ t('settings.modelPolicy.applyPreset') }}</span>
+        <span class="text-[11px] text-muted">{{ t('settings.modelPolicy.applyPreset') }}</span>
         <UButton
           v-for="preset in regionPresets"
           :key="preset.id"
@@ -183,7 +183,7 @@ async function save() {
 
     <!-- Mode -->
     <div class="space-y-2">
-      <label class="text-[11px] font-medium text-slate-300">
+      <label class="text-[11px] font-medium text-toned">
         {{ t('settings.modelPolicy.modeLabel') }}
       </label>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -193,7 +193,7 @@ async function save() {
 
     <!-- Families -->
     <div v-if="mode !== 'off'" class="space-y-2">
-      <label class="text-[11px] font-medium text-slate-300">
+      <label class="text-[11px] font-medium text-toned">
         {{
           mode === 'blocklist'
             ? t('settings.modelPolicy.familiesBlockLabel')
@@ -214,10 +214,10 @@ async function save() {
 
     <!-- Trusted (residency-guaranteed) routes -->
     <div v-if="mode !== 'off'" class="space-y-2">
-      <label class="text-[11px] font-medium text-slate-300">
+      <label class="text-[11px] font-medium text-toned">
         {{ t('settings.modelPolicy.trustedLabel') }}
       </label>
-      <p class="text-[11px] text-slate-400">{{ t('settings.modelPolicy.trustedHint') }}</p>
+      <p class="text-[11px] text-muted">{{ t('settings.modelPolicy.trustedHint') }}</p>
       <div class="grid grid-cols-2 gap-1 sm:grid-cols-4">
         <UCheckbox
           v-for="provider in TRUSTED_PROVIDERS"