@burdenoff/microfe-movethewheels 2026.608.1 → 2026.624.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-movethewheels",
-  "version": "2026.608.1",
+  "version": "2026.624.1",
   "description": "Burdenoff MoveTheWheels Microfrontend - Logistics & Supply Chain Management Platform",
   "type": "module",
   "files": [
@@ -15,10 +15,10 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/movethewheels.js"
+      "import": "./dist/index.js"
     }
   },
-  "main": "./dist/movethewheels.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "vite --port 5191",

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" />;
@@ -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}
@@ -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

@@ -66,7 +66,7 @@ export function MetricCard({
   const changeColors = {
     positive: 'text-green-600 dark:text-green-400',
     negative: 'text-red-600 dark:text-red-400',
-    neutral: 'text-muted-foreground',
+    neutral: 'text-text-secondary',
   };
 
   const trendIcons = {
@@ -109,11 +109,11 @@ export function MetricCard({
       <CardContent 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', 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])}>
                 {trend && trendIcons[trend]}
@@ -123,7 +123,7 @@ 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-primary', styles.icon)}
             >
               {icon}
             </div>
@@ -145,11 +145,11 @@ export function MetricCardSkeleton({ size = 'md' }: { size?: 'sm' | 'md' | 'lg'
       <CardContent 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 animate-pulse rounded" />
+            <div className="h-8 w-32 bg-bg-sunken animate-pulse rounded" />
+            <div className="h-3 w-20 bg-bg-sunken animate-pulse rounded" />
           </div>
-          <div className={cn('bg-muted animate-pulse rounded-lg', styles.icon)} />
+          <div className={cn('bg-bg-sunken animate-pulse rounded-lg', styles.icon)} />
         </div>
       </CardContent>
     </Card>

package/src/movethewheels/components/PageLayout.tsx

@@ -79,19 +79,19 @@ export function PageLayout({
                 {(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-primary">
                         {icon}
                       </div>
                     )}
                     {title && (
-                      <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
+                      <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-text-primary">
                         {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 +136,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>
@@ -173,9 +173,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>}
+      {icon && <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 +189,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 +209,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 +219,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/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>

package/src/movethewheels/pages/AnalyticsPage.tsx

@@ -62,8 +62,8 @@ export default function AnalyticsPage() {
             <CardTitle>Order Trends</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-64 flex items-center justify-center bg-muted/50 rounded-lg">
-              <div className="text-center text-muted-foreground">
+            <div className="h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg">
+              <div className="text-center text-text-secondary">
                 <BarChart3 size={48} className="mx-auto mb-2 opacity-50" />
                 <p>Order trend chart</p>
                 <p className="text-xs">(Chart library integration needed)</p>
@@ -71,8 +71,8 @@ export default function AnalyticsPage() {
             </div>
             <div className="mt-4 grid grid-cols-4 gap-2">
               {orderData.trends.slice(-4).map((t) => (
-                <div key={t.date} className="text-center p-2 bg-muted/50 rounded">
-                  <p className="text-xs text-muted-foreground">
+                <div key={t.date} className="text-center p-2 bg-bg-sunken/50 rounded">
+                  <p className="text-xs text-text-secondary">
                     {t.date.split('-').slice(1).join('/')}
                   </p>
                   <p className="font-medium">{t.orders}</p>
@@ -87,16 +87,16 @@ export default function AnalyticsPage() {
             <CardTitle>Revenue Trends</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="h-64 flex items-center justify-center bg-muted/50 rounded-lg">
-              <div className="text-center text-muted-foreground">
+            <div className="h-64 flex items-center justify-center bg-bg-sunken/50 rounded-lg">
+              <div className="text-center text-text-secondary">
                 <TrendingUp size={48} className="mx-auto mb-2 opacity-50" />
                 <p>Revenue trend chart</p>
               </div>
             </div>
             <div className="mt-4 grid grid-cols-5 gap-2">
               {analytics.trends.revenue.map((r) => (
-                <div key={r.month} className="text-center p-2 bg-muted/50 rounded">
-                  <p className="text-xs text-muted-foreground">{r.month}</p>
+                <div key={r.month} className="text-center p-2 bg-bg-sunken/50 rounded">
+                  <p className="text-xs text-text-secondary">{r.month}</p>
                   <p className="font-medium text-sm">{formatCurrency(r.revenue / 1000)}k</p>
                 </div>
               ))}
@@ -148,7 +148,7 @@ export default function AnalyticsPage() {
               <Progress value={fleetData.avgFuelLevel} />
             </div>
             <div className="pt-2">
-              <p className="text-sm text-muted-foreground mb-2">Vehicles by Type</p>
+              <p className="text-sm text-text-secondary mb-2">Vehicles by Type</p>
               {fleetData.vehiclesByType.map(({ type, count }) => (
                 <div key={type} className="flex justify-between text-sm py-1">
                   <span className="capitalize">{type}</span>
@@ -165,21 +165,21 @@ export default function AnalyticsPage() {
           </CardHeader>
           <CardContent className="space-y-4">
             <div>
-              <p className="text-sm text-muted-foreground">On-Time Pickup</p>
+              <p className="text-sm text-text-secondary">On-Time Pickup</p>
               <p className="text-2xl font-bold">{analytics.performance.onTimePickup}%</p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">On-Time Delivery</p>
+              <p className="text-sm text-text-secondary">On-Time Delivery</p>
               <p className="text-2xl font-bold">{analytics.performance.onTimeDelivery}%</p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Damaged Items</p>
+              <p className="text-sm text-text-secondary">Damaged Items</p>
               <p className="text-2xl font-bold text-green-600">
                 {analytics.performance.damagedItems}%
               </p>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground">Driver Ratings</p>
+              <p className="text-sm text-text-secondary">Driver Ratings</p>
               <p className="text-2xl font-bold">{analytics.performance.driverRatings}/5</p>
             </div>
           </CardContent>

package/src/movethewheels/pages/CreateOrderPage.tsx

@@ -363,7 +363,7 @@ export default function CreateOrderPage() {
           </CardHeader>
           <CardContent>
             {formData.items.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground">
+              <div className="text-center py-8 text-text-secondary">
                 <Package size={48} className="mx-auto mb-4 opacity-50" />
                 <p>No items added yet</p>
                 <Button type="button" variant="link" onClick={addItem}>
@@ -420,7 +420,7 @@ export default function CreateOrderPage() {
                           type="button"
                           variant="ghost"
                           size="icon"
-                          className="text-destructive"
+                          className="text-status-error-text"
                           onClick={() => removeItem(index)}
                         >
                           <Trash2 size={16} />

package/src/movethewheels/pages/CustomerDetailsPage.tsx

@@ -44,7 +44,7 @@ export default function CustomerDetailsPage() {
       >
         <Card>
           <CardContent className="p-8 text-center">
-            <p className="text-muted-foreground">Customer creation form would go here</p>
+            <p className="text-text-secondary">Customer creation form would go here</p>
           </CardContent>
         </Card>
       </PageLayout>
@@ -92,16 +92,16 @@ export default function CustomerDetailsPage() {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div className="space-y-4">
                   <div className="flex items-center gap-3">
-                    <Mail size={18} className="text-muted-foreground" />
+                    <Mail size={18} className="text-text-secondary" />
                     <div>
-                      <p className="text-sm text-muted-foreground">Email</p>
+                      <p className="text-sm text-text-secondary">Email</p>
                       <p className="font-medium">{customer.email}</p>
                     </div>
                   </div>
                   <div className="flex items-center gap-3">
-                    <Phone size={18} className="text-muted-foreground" />
+                    <Phone size={18} className="text-text-secondary" />
                     <div>
-                      <p className="text-sm text-muted-foreground">Phone</p>
+                      <p className="text-sm text-text-secondary">Phone</p>
                       <p className="font-medium">{customer.phone}</p>
                     </div>
                   </div>
@@ -109,16 +109,16 @@ export default function CustomerDetailsPage() {
                 <div className="space-y-4">
                   {customer.company && (
                     <div className="flex items-center gap-3">
-                      <Building size={18} className="text-muted-foreground" />
+                      <Building size={18} className="text-text-secondary" />
                       <div>
-                        <p className="text-sm text-muted-foreground">Company</p>
+                        <p className="text-sm text-text-secondary">Company</p>
                         <p className="font-medium">{customer.company}</p>
                       </div>
                     </div>
                   )}
                   {customer.website && (
                     <div>
-                      <p className="text-sm text-muted-foreground">Website</p>
+                      <p className="text-sm text-text-secondary">Website</p>
                       <a href={customer.website} className="text-primary hover:underline">
                         {customer.website}
                       </a>
@@ -162,22 +162,22 @@ export default function CustomerDetailsPage() {
             <CardContent className="space-y-3">
               {customer.businessLicense && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Business License</p>
+                  <p className="text-sm text-text-secondary">Business License</p>
                   <p className="font-mono">{customer.businessLicense}</p>
                 </div>
               )}
               {customer.taxId && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Tax ID</p>
+                  <p className="text-sm text-text-secondary">Tax ID</p>
                   <p className="font-mono">{customer.taxId}</p>
                 </div>
               )}
               <div>
-                <p className="text-sm text-muted-foreground">Preferred Contact</p>
+                <p className="text-sm text-text-secondary">Preferred Contact</p>
                 <p className="capitalize">{customer.preferredContactMethod}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Marketing Opt-in</p>
+                <p className="text-sm text-text-secondary">Marketing Opt-in</p>
                 <Badge variant={customer.marketingOptIn ? 'default' : 'secondary'}>
                   {customer.marketingOptIn ? 'Yes' : 'No'}
                 </Badge>
@@ -191,11 +191,11 @@ export default function CustomerDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-3">
               <div>
-                <p className="text-sm text-muted-foreground">Created</p>
+                <p className="text-sm text-text-secondary">Created</p>
                 <p>{formatDate(customer.createdAt, 'full')}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Last Updated</p>
+                <p className="text-sm text-text-secondary">Last Updated</p>
                 <p>{formatDate(customer.updatedAt, 'relative')}</p>
               </div>
             </CardContent>

package/src/movethewheels/pages/CustomersPage.tsx

@@ -35,7 +35,7 @@ export default function CustomersPage() {
           </Avatar>
           <div>
             <p className="font-medium">{row.name}</p>
-            <p className="text-sm text-muted-foreground">{row.email}</p>
+            <p className="text-sm text-text-secondary">{row.email}</p>
           </div>
         </div>
       ),

package/src/movethewheels/pages/DashboardPage.tsx

@@ -151,17 +151,17 @@ export default function DashboardPage() {
                 {orders.slice(0, 5).map((order) => (
                   <div
                     key={order.id}
-                    className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
                     onClick={() => goTo(`orders/${order.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="font-medium">{order.orderNumber}</p>
-                        <p className="text-sm text-muted-foreground">{order.customerInfo.name}</p>
+                        <p className="text-sm text-text-secondary">{order.customerInfo.name}</p>
                       </div>
                       <div className="text-right">
                         <StatusBadge status={order.status} type="order" size="sm" />
-                        <p className="text-sm text-muted-foreground mt-1">
+                        <p className="text-sm text-text-secondary mt-1">
                           {formatCurrency(order.pricing.total)}
                         </p>
                       </div>
@@ -169,7 +169,7 @@ export default function DashboardPage() {
                   </div>
                 ))}
                 {orders.length === 0 && (
-                  <div className="p-8 text-center text-muted-foreground">
+                  <div className="p-8 text-center text-text-secondary">
                     {t('movethewheels.dashboard.recentOrders.empty', 'No recent orders')}
                   </div>
                 )}
@@ -195,13 +195,13 @@ export default function DashboardPage() {
                   delivery.order ? (
                     <div
                       key={delivery.order.id}
-                      className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+                      className="p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors"
                       onClick={() => goTo(`tracking?order=${delivery.order.id}`)}
                     >
                       <div className="flex items-center justify-between">
                         <div>
                           <p className="font-medium">{delivery.order.orderNumber}</p>
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-sm text-text-secondary">
                             {delivery.driver?.fullName ||
                               t(
                                 'movethewheels.dashboard.activeDeliveries.unassigned',
@@ -211,7 +211,7 @@ export default function DashboardPage() {
                         </div>
                         <div className="text-right">
                           <StatusBadge status={delivery.order.status} type="order" size="sm" />
-                          <p className="text-sm text-muted-foreground mt-1">
+                          <p className="text-sm text-text-secondary mt-1">
                             {t('movethewheels.dashboard.activeDeliveries.eta', 'ETA:')}{' '}
                             {delivery.estimatedArrival
                               ? formatDate(delivery.estimatedArrival, 'time')
@@ -223,7 +223,7 @@ export default function DashboardPage() {
                   ) : null
                 )}
                 {activeDeliveries.length === 0 && (
-                  <div className="p-8 text-center text-muted-foreground">
+                  <div className="p-8 text-center text-text-secondary">
                     {t('movethewheels.dashboard.activeDeliveries.empty', 'No active deliveries')}
                   </div>
                 )}
@@ -296,7 +296,7 @@ export default function DashboardPage() {
             </div>
             <div className="grid grid-cols-2 gap-4 text-sm">
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.available', 'Available')}
                 </p>
                 <p className="text-lg font-semibold text-green-600">
@@ -304,7 +304,7 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.inUse', 'In Use')}
                 </p>
                 <p className="text-lg font-semibold text-blue-600">
@@ -312,7 +312,7 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.maintenance', 'Maintenance')}
                 </p>
                 <p className="text-lg font-semibold text-yellow-600">
@@ -320,7 +320,7 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div>
-                <p className="text-muted-foreground">
+                <p className="text-text-secondary">
                   {t('movethewheels.dashboard.fleetStatus.avgFuel', 'Avg Fuel')}
                 </p>
                 <p className="text-lg font-semibold">{fleetStats.avgFuelLevel.toFixed(0)}%</p>
@@ -346,7 +346,7 @@ export default function DashboardPage() {
                     <p className="text-sm font-medium">
                       {t('movethewheels.dashboard.alerts.pendingOrders.title', 'Pending Orders')}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {orderStats.byStatus.pending}{' '}
                       {t(
                         'movethewheels.dashboard.alerts.pendingOrders.description',
@@ -366,7 +366,7 @@ export default function DashboardPage() {
                         'Vehicles in Maintenance'
                       )}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {fleetStats.vehiclesByStatus.maintenance}{' '}
                       {t(
                         'movethewheels.dashboard.alerts.maintenanceVehicles.description',
@@ -383,7 +383,7 @@ export default function DashboardPage() {
                     <p className="text-sm font-medium">
                       {t('movethewheels.dashboard.alerts.offlineDrivers.title', 'Offline Drivers')}
                     </p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {fleetStats.driversByStatus.offline}{' '}
                       {t(
                         'movethewheels.dashboard.alerts.offlineDrivers.description',
@@ -396,7 +396,7 @@ export default function DashboardPage() {
               {orderStats.byStatus.pending <= 5 &&
                 fleetStats.vehiclesByStatus.maintenance === 0 &&
                 fleetStats.driversByStatus.offline === 0 && (
-                  <div className="text-center py-4 text-muted-foreground">
+                  <div className="text-center py-4 text-text-secondary">
                     <p className="text-sm">
                       {t(
                         'movethewheels.dashboard.alerts.allOperational',