@burdenoff/microfe-movethewheels 2026.614.1 → 2026.625.1

package/dist/{star-BW23nRLp.js → star-YsVV3MNQ.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/star.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/star.js
 var t = e("Star", [["path", {
 	d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z",
 	key: "r04s7s"

package/dist/{store-Cdk0UEPT.js → store-RCBl7HB-.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/store.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/store.js
 var t = e("Store", [
 	["path", {
 		d: "m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7",

package/dist/{trending-up-DYQ3Xns5.js → trending-up-C-85AwGT.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/trending-up.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/trending-up.js
 var t = e("TrendingUp", [["polyline", {
 	points: "22 7 13.5 15.5 8.5 10.5 2 17",
 	key: "126l90"

package/dist/{triangle-alert-Ck_oBZ7n.js → triangle-alert-BOhfGgmh.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/triangle-alert.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/triangle-alert.js
 var t = e("TriangleAlert", [
 	["path", {
 		d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",

package/dist/{truck-Cd54agV-.js → truck-CtDjNFbi.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/truck.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/truck.js
 var t = e("Truck", [
 	["path", {
 		d: "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2",

package/dist/{user-CUEmQUkJ.js → user-Dz5TJZFs.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/user.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/user.js
 var t = e("User", [["path", {
 	d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",
 	key: "975kel"

package/dist/{users-e-wRlQnX.js → users-g2N0eL-Z.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/users.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/users.js
 var t = e("Users", [
 	["path", {
 		d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",

package/dist/{warehouse-DXnNb4kf.js → warehouse-D3WWDeTX.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/warehouse.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/warehouse.js
 var t = e("Warehouse", [
 	["path", {
 		d: "M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z",

package/dist/{wrench-DYJo0U8_.js → wrench-CmxY1n4I.js}

@@ -1,5 +1,5 @@
-import { it as e } from "./PageLayout-3DR4pMQ9.js";
-//#region ../../node_modules/.bun/lucide-react@0.468.0+3f10a4be4e334a9b/node_modules/lucide-react/dist/esm/icons/fuel.js
+import { it as e } from "./PageLayout-D3N8MCTm.js";
+//#region node_modules/lucide-react/dist/esm/icons/fuel.js
 var t = e("Fuel", [
 	["line", {
 		x1: "3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.614.1",
+  "version": "2026.625.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.11",
-    "@burdenoff/fe-libs": "workspace:*",
+    "@burdenoff/fe-libs": "2026.625.3",
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
     "graphql": "^16.12.0",

package/src/dev/main.tsx

@@ -65,13 +65,13 @@ function MoveTheWheelsApp() {
 function Dashboard() {
   const navigate = useNavigate();
   return (
-    <div className="min-h-screen flex items-center justify-center bg-muted/50">
-      <div className="bg-background p-8 rounded-xl shadow-lg text-center border">
+    <div className="min-h-screen flex items-center justify-center bg-bg-sunken/50">
+      <div className="bg-bg-surface p-8 rounded-xl shadow-lg text-center border">
         <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
-        <p className="text-muted-foreground mb-6">Welcome to MoveTheWheels!</p>
+        <p className="text-text-secondary mb-6">Welcome to MoveTheWheels!</p>
         <button
           onClick={() => navigate('/movethewheels')}
-          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+          className="px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-lg hover:bg-action-primary-bg/90 transition-colors"
         >
           Go to MoveTheWheels
         </button>

package/src/movethewheels/MoveTheWheelsRoutes.tsx

@@ -14,7 +14,7 @@ function PageLoader() {
     <div className="flex items-center justify-center min-h-[400px]">
       <div className="flex flex-col items-center gap-3">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-        <p className="text-sm text-muted-foreground">Loading...</p>
+        <p className="text-sm text-text-secondary">Loading...</p>
       </div>
     </div>
   );

package/src/movethewheels/components/DataTable.tsx

@@ -157,7 +157,7 @@ export function DataTable<T extends object>({
   // Get sort icon
   const getSortIcon = (columnId: string) => {
     if (sortColumn !== columnId) {
-      return <ArrowUpDown className="w-4 h-4 text-muted-foreground/50" />;
+      return <ArrowUpDown className="w-4 h-4 text-text-secondary/50" />;
     }
     if (sortDirection === 'asc') {
       return <ArrowUp className="w-4 h-4 text-primary" />;
@@ -188,13 +188,13 @@ export function DataTable<T extends object>({
             <Skeleton className="h-10 w-64" />
           </div>
         )}
-        <div className="rounded-md border">
+        <div className="rounded-card border border-border-seam bg-bg-surface shadow-elevation-1">
           <Table>
             <TableHeader>
               <TableRow>
                 {columns.map((column) => (
                   <TableHead key={column.id}>
-                    <Skeleton className="h-4 w-20" />
+                    <Skeleton className="h-4 w-20 motion-safe:animate-vc-shimmer" />
                   </TableHead>
                 ))}
               </TableRow>
@@ -204,7 +204,7 @@ export function DataTable<T extends object>({
                 <TableRow key={i}>
                   {columns.map((column) => (
                     <TableCell key={column.id}>
-                      <Skeleton className="h-4 w-full max-w-[100px]" />
+                      <Skeleton className="h-4 w-full max-w-[100px] motion-safe:animate-vc-shimmer" />
                     </TableCell>
                   ))}
                 </TableRow>
@@ -222,7 +222,7 @@ export function DataTable<T extends object>({
       {searchable && (
         <div className="flex items-center gap-4">
           <div className="relative flex-1 max-w-sm">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-secondary" />
             <Input
               placeholder={searchPlaceholder}
               value={searchQuery}
@@ -237,7 +237,7 @@ export function DataTable<T extends object>({
       )}
 
       {/* Table */}
-      <div className="rounded-md border">
+      <div className="overflow-x-auto rounded-card border border-border-seam bg-bg-surface shadow-elevation-1">
         <Table>
           <TableHeader>
             <TableRow>
@@ -245,7 +245,7 @@ export function DataTable<T extends object>({
                 <TableHead
                   key={column.id}
                   className={cn(
-                    column.sortable && 'cursor-pointer select-none hover:bg-muted/50',
+                    column.sortable && 'cursor-pointer select-none hover:bg-bg-sunken/50',
                     column.headerClassName
                   )}
                   onClick={() => column.sortable && handleSort(column.id)}
@@ -262,7 +262,7 @@ export function DataTable<T extends object>({
             {paginatedData.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={columns.length} className="h-24 text-center">
-                  <p className="text-muted-foreground">{emptyMessage}</p>
+                  <p className="text-text-secondary">{emptyMessage}</p>
                 </TableCell>
               </TableRow>
             ) : (
@@ -274,7 +274,7 @@ export function DataTable<T extends object>({
                 return (
                   <TableRow
                     key={rowId}
-                    className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50', rowClasses)}
+                    className={cn(onRowClick && 'cursor-pointer hover:bg-bg-sunken/50', rowClasses)}
                     onClick={() => onRowClick?.(row)}
                   >
                     {columns.map((column) => (
@@ -293,7 +293,7 @@ export function DataTable<T extends object>({
       {/* Pagination */}
       {pagination && sortedData.length > 0 && (
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2 text-sm text-text-secondary">
             <span>
               Showing {(currentPage - 1) * pageSize + 1} to{' '}
               {Math.min(currentPage * pageSize, sortedData.length)} of {sortedData.length}

package/src/movethewheels/components/MetricCard.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
+import { GlassCard } from '@burdenoff/fe-libs/ui';
 import { cn } from '../utils/cn';
-import { Card, CardContent } from './ui';
 
 interface MetricCardProps {
   /** Main value to display */
@@ -23,6 +23,10 @@ interface MetricCardProps {
   onClick?: () => void;
   /** Additional CSS classes */
   className?: string;
+  /** Boff UI 2.0 surface treatment. Defaults to the soft accent-wash metric surface. */
+  treatment?: 'metric' | 'glass';
+  /** Featured/active accent glow (used for the single hero metric per page). */
+  glow?: boolean;
 }
 
 const sizeClasses = {
@@ -60,13 +64,15 @@ export function MetricCard({
   size = 'md',
   onClick,
   className,
+  treatment = 'metric',
+  glow = false,
 }: MetricCardProps) {
   const styles = sizeClasses[size];
 
   const changeColors = {
-    positive: 'text-green-600 dark:text-green-400',
-    negative: 'text-red-600 dark:text-red-400',
-    neutral: 'text-muted-foreground',
+    positive: 'text-status-success-text',
+    negative: 'text-status-error-text',
+    neutral: 'text-text-secondary',
   };
 
   const trendIcons = {
@@ -98,24 +104,44 @@ export function MetricCard({
   };
 
   return (
-    <Card
+    <GlassCard
+      treatment={treatment}
+      glow={glow}
       className={cn(
-        'overflow-hidden transition-all duration-200',
-        onClick && 'cursor-pointer hover:shadow-md hover:border-primary/30',
+        'overflow-hidden border-border-seam',
+        onClick &&
+          'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
         className
       )}
       onClick={onClick}
+      {...(onClick
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+              }
+            },
+          }
+        : {})}
     >
-      <CardContent className={styles.card}>
+      <div className={styles.card}>
         <div className="flex items-start justify-between">
           <div className="space-y-1">
-            <p className={cn('text-muted-foreground', styles.label)}>{label}</p>
-            <p className={cn('text-foreground tracking-tight', styles.value)}>
+            <p className={cn('text-text-secondary', styles.label)}>{label}</p>
+            <p className={cn('text-text-primary tracking-tight tabular-nums', styles.value)}>
               {typeof value === 'number' ? value.toLocaleString() : value}
             </p>
-            {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
+            {subtitle && <p className="text-xs text-text-secondary">{subtitle}</p>}
             {change && (
-              <div className={cn('flex items-center gap-1 text-sm', changeColors[changeType])}>
+              <div
+                className={cn(
+                  'flex items-center gap-1 text-sm tabular-nums',
+                  changeColors[changeType]
+                )}
+              >
                 {trend && trendIcons[trend]}
                 <span>{change}</span>
               </div>
@@ -123,14 +149,17 @@ export function MetricCard({
           </div>
           {icon && (
             <div
-              className={cn('flex-shrink-0 p-2 rounded-lg bg-primary/10 text-primary', styles.icon)}
+              className={cn(
+                'flex-shrink-0 p-2 rounded-lg bg-action-primary-bg/10 text-action-primary-bg',
+                styles.icon
+              )}
             >
               {icon}
             </div>
           )}
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </GlassCard>
   );
 }
 
@@ -141,18 +170,18 @@ export function MetricCardSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg'
   const styles = sizeClasses[size];
 
   return (
-    <Card className="overflow-hidden">
-      <CardContent className={styles.card}>
+    <GlassCard treatment="metric" className="overflow-hidden border-border-seam">
+      <div className={styles.card}>
         <div className="flex items-start justify-between">
           <div className="space-y-2 flex-1">
-            <div className="h-4 w-24 bg-muted animate-pulse rounded" />
-            <div className="h-8 w-32 bg-muted animate-pulse rounded" />
-            <div className="h-3 w-20 bg-muted animate-pulse rounded" />
+            <div className="h-4 w-24 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
+            <div className="h-8 w-32 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
+            <div className="h-3 w-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded" />
           </div>
-          <div className={cn('bg-muted animate-pulse rounded-lg', styles.icon)} />
+          <div className={cn('bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg', styles.icon)} />
         </div>
-      </CardContent>
-    </Card>
+      </div>
+    </GlassCard>
   );
 }
 

package/src/movethewheels/components/PageLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { AuroraBackground, GradientText, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';
 import { cn } from '../utils/cn';
 
 interface PageLayoutProps {
@@ -21,6 +22,16 @@ interface PageLayoutProps {
   className?: string;
   /** Additional CSS classes for the content area */
   contentClassName?: string;
+  /**
+   * Boff UI 2.0 — render a subtle living aurora backdrop behind the page header.
+   * Reserved for the MFE's single primary page (the Dashboard). One per MFE.
+   */
+  hero?: boolean;
+  /**
+   * Boff UI 2.0 — the slice of the title to emphasise with a brand gradient.
+   * When provided, the title renders as `…<GradientText>{titleAccent}</GradientText>`.
+   */
+  titleAccent?: string;
 }
 
 const maxWidthClasses = {
@@ -53,7 +64,24 @@ export function PageLayout({
   showHeader = true,
   className,
   contentClassName,
+  hero = false,
+  titleAccent,
 }: PageLayoutProps) {
+  // Render the title, optionally clipping a gradient into the accent slice.
+  const renderTitle = (value: string) => {
+    if (!titleAccent || !value.includes(titleAccent)) {
+      return value;
+    }
+    const [before, after] = value.split(titleAccent);
+    return (
+      <>
+        {before}
+        <GradientText>{titleAccent}</GradientText>
+        {after}
+      </>
+    );
+  };
+
   return (
     <div
       className={cn(
@@ -72,26 +100,33 @@ export function PageLayout({
       <div className={cn('mx-auto w-full', maxWidthClasses[maxWidth], contentClassName)}>
         {/* Page Header */}
         {showHeader && (title || headerActions) && (
-          <header className="mb-6 sm:mb-8">
+          <header
+            className={cn(
+              'mb-6 sm:mb-8',
+              hero &&
+                'relative overflow-hidden rounded-card border border-border-seam bg-hero-mesh px-5 py-6 sm:px-7 sm:py-8'
+            )}
+          >
+            {hero && <AuroraBackground intensity="subtle" />}
             <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
               {/* Title Section */}
               <div className="space-y-1">
                 {(title || icon) && (
                   <div className="flex items-center gap-3">
                     {icon && (
-                      <div className="flex-shrink-0 p-2.5 rounded-xl bg-primary/10 text-primary">
+                      <div className="flex-shrink-0 p-2.5 rounded-xl bg-action-primary-bg/10 text-action-primary-bg">
                         {icon}
                       </div>
                     )}
                     {title && (
-                      <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
-                        {title}
+                      <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-text-primary">
+                        {renderTitle(title)}
                       </h1>
                     )}
                   </div>
                 )}
                 {subtitle && (
-                  <p className="text-sm sm:text-base text-muted-foreground max-w-2xl">{subtitle}</p>
+                  <p className="text-sm sm:text-base text-text-secondary max-w-2xl">{subtitle}</p>
                 )}
               </div>
 
@@ -136,8 +171,8 @@ export function PageSection({
       {(title || actions) && (
         <div className="flex items-center justify-between">
           <div>
-            {title && <h2 className="text-lg font-semibold text-foreground">{title}</h2>}
-            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+            {title && <h2 className="text-lg font-semibold text-text-primary">{title}</h2>}
+            {description && <p className="text-sm text-text-secondary">{description}</p>}
           </div>
           {actions && <div className="flex items-center gap-2">{actions}</div>}
         </div>
@@ -148,7 +183,13 @@ export function PageSection({
 }
 
 /**
- * EmptyState - A consistent empty state component
+ * EmptyState - A consistent empty/zero state component.
+ *
+ * Boff UI 2.0: when an `illustration` name is provided (one of the standard
+ * host-served names — empty-data, empty-search, empty-files, empty-people,
+ * empty-notifications, onboarding, empty-generic), it renders the on-brand
+ * IllustratedEmptyState. Otherwise it falls back to the legacy icon layout so
+ * existing callers keep working unchanged.
  */
 export function EmptyState({
   icon,
@@ -156,13 +197,27 @@ export function EmptyState({
   description,
   action,
   className,
+  illustration = 'empty-data',
 }: {
   icon?: ReactNode;
   title: string;
   description?: string;
   action?: ReactNode;
   className?: string;
+  /** Standard illustration name served by the host at /illustrations/<name>.webp. */
+  illustration?: string;
 }) {
+  if (!icon) {
+    return (
+      <IllustratedEmptyState
+        illustration={illustration}
+        title={title}
+        description={description}
+        action={action}
+        className={cn('animate-in fade-in-0 zoom-in-95 duration-300', className)}
+      />
+    );
+  }
   return (
     <div
       className={cn(
@@ -173,9 +228,9 @@ export function EmptyState({
         className
       )}
     >
-      {icon && <div className="mb-4 p-4 rounded-2xl bg-muted/50 text-muted-foreground">{icon}</div>}
-      <h3 className="text-lg font-semibold text-foreground mb-1">{title}</h3>
-      {description && <p className="text-sm text-muted-foreground max-w-sm mb-4">{description}</p>}
+      <div className="mb-4 p-4 rounded-2xl bg-bg-sunken/50 text-text-secondary">{icon}</div>
+      <h3 className="text-lg font-semibold text-text-primary mb-1">{title}</h3>
+      {description && <p className="text-sm text-text-secondary max-w-sm mb-4">{description}</p>}
       {action}
     </div>
   );
@@ -189,7 +244,7 @@ export function LoadingState({ message = 'Loading...' }: { message?: string }) {
     <div className="flex items-center justify-center min-h-[400px]">
       <div className="flex flex-col items-center gap-3">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-        <p className="text-sm text-muted-foreground">{message}</p>
+        <p className="text-sm text-text-secondary">{message}</p>
       </div>
     </div>
   );
@@ -209,7 +264,7 @@ export function ErrorState({
 }) {
   return (
     <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
-      <div className="mb-4 p-4 rounded-2xl bg-destructive/10 text-destructive">
+      <div className="mb-4 p-4 rounded-2xl bg-status-error-bg/10 text-status-error-text">
         <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path
             strokeLinecap="round"
@@ -219,8 +274,8 @@ export function ErrorState({
           />
         </svg>
       </div>
-      <h3 className="text-lg font-semibold text-foreground mb-1">{title}</h3>
-      {message && <p className="text-sm text-muted-foreground max-w-sm mb-4">{message}</p>}
+      <h3 className="text-lg font-semibold text-text-primary mb-1">{title}</h3>
+      {message && <p className="text-sm text-text-secondary max-w-sm mb-4">{message}</p>}
       {onRetry && (
         <button
           onClick={onRetry}

package/src/movethewheels/components/StatusBadge.tsx

@@ -78,8 +78,9 @@ export function StatusBadge({
     >
       {showDot && (
         <span
+          aria-hidden="true"
           className={cn(
-            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0',
+            'w-1.5 h-1.5 rounded-full mr-1.5 flex-shrink-0 motion-safe:animate-vc-glow-pulse',
             colors.text.replace('text-', 'bg-')
           )}
         />

package/src/movethewheels/components/ui.tsx

@@ -69,11 +69,11 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
     return (
       <div
         ref={ref}
-        className={cn('relative h-2 w-full overflow-hidden rounded-full bg-muted', className)}
+        className={cn('relative h-2 w-full overflow-hidden rounded-full bg-bg-sunken', className)}
         {...props}
       >
         <div
-          className="h-full bg-primary transition-all duration-300 ease-in-out"
+          className="h-full bg-action-primary-bg transition-all duration-300 ease-in-out"
           style={{ width: `${percentage}%` }}
         />
       </div>
@@ -112,7 +112,7 @@ const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
     <div
       ref={ref}
       className={cn(
-        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        'flex h-full w-full items-center justify-center rounded-full bg-bg-sunken',
         className
       )}
       {...props}

package/src/movethewheels/pages/AIAssistantPage.tsx

@@ -76,7 +76,7 @@ export default function AIAssistantPage() {
                     className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
                   >
                     <div
-                      className={`max-w-[80%] p-3 rounded-lg ${msg.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
+                      className={`max-w-[80%] p-3 rounded-lg ${msg.role === 'user' ? 'bg-action-primary-bg text-action-primary-text' : 'bg-bg-sunken'}`}
                     >
                       <p className="whitespace-pre-line text-sm">{msg.content}</p>
                     </div>
@@ -139,13 +139,13 @@ export default function AIAssistantPage() {
             </CardContent>
           </Card>
 
-          <Card className="bg-primary/5 border-primary/20">
+          <Card className="bg-action-primary-bg/5 border-primary/20">
             <CardContent className="p-4">
               <div className="flex items-start gap-3">
                 <Lightbulb size={20} className="text-primary flex-shrink-0" />
                 <div>
                   <p className="font-medium text-sm">Pro Tip</p>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-xs text-text-secondary">
                     You can ask complex questions like "What would happen if I added 2 more vehicles
                     to my fleet?" for scenario analysis.
                   </p>