@burdenoff/microfe-movethewheels 2026.614.1 → 2026.624.1

package/src/movethewheels/pages/FinancePage.tsx

@@ -71,7 +71,7 @@ export default function FinancePage() {
               {analytics.trends.revenue.map((r) => (
                 <div
                   key={r.month}
-                  className="flex items-center justify-between p-3 bg-muted/50 rounded-lg"
+                  className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg"
                 >
                   <span className="font-medium">{r.month} 2024</span>
                   <span className="text-lg font-bold">{formatCurrency(r.revenue)}</span>
@@ -94,7 +94,7 @@ export default function FinancePage() {
                   </div>
                   <div>
                     <p className="font-medium">Paid</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {stats.byStatus.delivered} orders
                     </p>
                   </div>
@@ -110,7 +110,7 @@ export default function FinancePage() {
                   </div>
                   <div>
                     <p className="font-medium">Pending</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {stats.byStatus.pending + stats.byStatus.in_transit} orders
                     </p>
                   </div>
@@ -129,7 +129,7 @@ export default function FinancePage() {
           <CardTitle>Recent Transactions</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="text-center py-8 text-muted-foreground">
+          <div className="text-center py-8 text-text-secondary">
             <FileText size={48} className="mx-auto mb-4 opacity-50" />
             <p>Transaction history would be displayed here</p>
             <p className="text-sm">Integration with payment gateway required</p>

package/src/movethewheels/pages/FleetPage.tsx

@@ -105,12 +105,12 @@ export default function FleetPage() {
                 {vehicles.slice(0, 5).map((vehicle) => (
                   <div
                     key={vehicle.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(`fleet/vehicles/${vehicle.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-3">
-                        <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                        <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
                           <Truck size={20} className="text-primary" />
                         </div>
                         <div>
@@ -118,7 +118,7 @@ export default function FleetPage() {
                             <span className="font-medium">{vehicle.vehicleNumber}</span>
                             <VehicleTypeBadge type={vehicle.type} size="sm" />
                           </div>
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-sm text-text-secondary">
                             {vehicle.make} {vehicle.model} ({vehicle.year})
                           </p>
                         </div>
@@ -127,9 +127,9 @@ export default function FleetPage() {
                         <StatusBadge status={vehicle.status} type="vehicle" size="sm" />
                         {vehicle.fuelLevel !== undefined && (
                           <div className="mt-2 flex items-center gap-2">
-                            <Fuel size={12} className="text-muted-foreground" />
+                            <Fuel size={12} className="text-text-secondary" />
                             <Progress value={vehicle.fuelLevel} className="w-16 h-2" />
-                            <span className="text-xs text-muted-foreground">
+                            <span className="text-xs text-text-secondary">
                               {vehicle.fuelLevel}%
                             </span>
                           </div>
@@ -158,7 +158,7 @@ export default function FleetPage() {
                 {drivers.slice(0, 5).map((driver) => (
                   <div
                     key={driver.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(`fleet/drivers/${driver.id}`)}
                   >
                     <div className="flex items-center justify-between">
@@ -173,7 +173,7 @@ export default function FleetPage() {
                         </Avatar>
                         <div>
                           <p className="font-medium">{driver.fullName}</p>
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-sm text-text-secondary">
                             {driver.employeeId} - {driver.completedOrders}{' '}
                             {t('movethewheels.fleet.drivers.deliveries', 'deliveries')}
                           </p>
@@ -266,7 +266,7 @@ export default function FleetPage() {
                       <Truck size={20} className="text-yellow-600" />
                       <div>
                         <p className="font-medium">{vehicle.vehicleNumber}</p>
-                        <p className="text-sm text-muted-foreground">
+                        <p className="text-sm text-text-secondary">
                           {vehicle.make} {vehicle.model}
                         </p>
                       </div>

package/src/movethewheels/pages/ImportExportPage.tsx

@@ -83,12 +83,12 @@ export default function ImportExportPage() {
                 className="flex items-center justify-between p-4 border rounded-lg hover:border-primary/50 transition-colors"
               >
                 <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <div className="w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center">
                     <opt.icon size={20} className="text-primary" />
                   </div>
                   <div>
                     <p className="font-medium">{opt.name}</p>
-                    <p className="text-sm text-muted-foreground">{opt.description}</p>
+                    <p className="text-sm text-text-secondary">{opt.description}</p>
                   </div>
                 </div>
                 <div className="text-right">
@@ -116,7 +116,7 @@ export default function ImportExportPage() {
               >
                 <div>
                   <p className="font-medium">{opt.name}</p>
-                  <p className="text-sm text-muted-foreground">{opt.description}</p>
+                  <p className="text-sm text-text-secondary">{opt.description}</p>
                 </div>
                 <div className="flex gap-1">
                   {opt.formats.map((f) => (
@@ -138,7 +138,7 @@ export default function ImportExportPage() {
         <CardContent>
           <div className="space-y-3">
             {recentActivity.map((activity, i) => (
-              <div key={i} className="flex items-center justify-between p-3 bg-muted/50 rounded-lg">
+              <div key={i} className="flex items-center justify-between p-3 bg-bg-sunken/50 rounded-lg">
                 <div className="flex items-center gap-3">
                   {activity.type === 'import' ? (
                     <Upload size={16} className="text-primary" />
@@ -147,7 +147,7 @@ export default function ImportExportPage() {
                   )}
                   <div>
                     <p className="font-medium">{activity.name}</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {activity.type === 'import' ? 'Imported' : 'Exported'} on {activity.date}
                     </p>
                   </div>

package/src/movethewheels/pages/InventoryPage.tsx

@@ -100,7 +100,7 @@ export default function InventoryPage() {
                         {product?.name ||
                           t('movethewheels.inventory.lowStock.unknownProduct', 'Unknown Product')}
                       </p>
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-sm text-text-secondary">
                         {t('movethewheels.inventory.lowStock.sku', 'SKU:')} {product?.sku}
                       </p>
                     </div>
@@ -109,7 +109,7 @@ export default function InventoryPage() {
                         {item.availableQuantity}{' '}
                         {t('movethewheels.inventory.lowStock.left', 'left')}
                       </p>
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-sm text-text-secondary">
                         {t('movethewheels.inventory.lowStock.reorderAt', 'Reorder at:')}{' '}
                         {item.reorderLevel}
                       </p>
@@ -137,13 +137,13 @@ export default function InventoryPage() {
                 {warehouses.map((warehouse) => (
                   <div
                     key={warehouse.id}
-                    className="p-4 hover:bg-muted/50 cursor-pointer"
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer"
                     onClick={() => goTo(`inventory/warehouses/${warehouse.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="font-medium">{warehouse.name}</p>
-                        <p className="text-sm text-muted-foreground">
+                        <p className="text-sm text-text-secondary">
                           {warehouse.address.city}, {warehouse.address.state}
                         </p>
                       </div>
@@ -154,7 +154,7 @@ export default function InventoryPage() {
                             : t('movethewheels.inventory.warehouses.inactive', 'Inactive')}
                         </Badge>
                         <div className="mt-2">
-                          <p className="text-xs text-muted-foreground">
+                          <p className="text-xs text-text-secondary">
                             {t('movethewheels.inventory.warehouses.utilization', 'Utilization')}
                           </p>
                           <Progress
@@ -187,13 +187,13 @@ export default function InventoryPage() {
                 {products.slice(0, 5).map((product) => (
                   <div
                     key={product.id}
-                    className="p-4 hover:bg-muted/50 cursor-pointer"
+                    className="p-4 hover:bg-bg-sunken/50 cursor-pointer"
                     onClick={() => goTo(`inventory/products/${product.id}`)}
                   >
                     <div className="flex items-center justify-between">
                       <div>
                         <p className="font-medium">{product.name}</p>
-                        <p className="text-sm text-muted-foreground">{product.sku}</p>
+                        <p className="text-sm text-text-secondary">{product.sku}</p>
                       </div>
                       <div className="text-right">
                         <p className="font-medium">{formatCurrency(product.value)}</p>

package/src/movethewheels/pages/LiveTrackingPage.tsx

@@ -101,8 +101,8 @@ export default function LiveTrackingPage() {
           {viewMode === 'map' ? (
             <Card className="h-[600px]">
               <CardContent className="p-0 h-full">
-                <div className="w-full h-full bg-muted rounded-lg flex items-center justify-center">
-                  <div className="text-center text-muted-foreground">
+                <div className="w-full h-full bg-bg-sunken rounded-lg flex items-center justify-center">
+                  <div className="text-center text-text-secondary">
                     <MapPin size={64} className="mx-auto mb-4 opacity-50" />
                     <p className="text-lg font-medium">Map View</p>
                     <p className="text-sm">
@@ -131,8 +131,8 @@ export default function LiveTrackingPage() {
                       return (
                         <div
                           key={delivery.order.id}
-                          className={`p-4 hover:bg-muted/50 cursor-pointer transition-colors ${
-                            selectedDelivery === delivery.order.id ? 'bg-muted/50' : ''
+                          className={`p-4 hover:bg-bg-sunken/50 cursor-pointer transition-colors ${
+                            selectedDelivery === delivery.order.id ? 'bg-bg-sunken/50' : ''
                           }`}
                           onClick={() => setSelectedDelivery(delivery.order.id)}
                         >
@@ -146,10 +146,10 @@ export default function LiveTrackingPage() {
                                   size="sm"
                                 />
                               </div>
-                              <p className="text-sm text-muted-foreground">
+                              <p className="text-sm text-text-secondary">
                                 {delivery.order.customerInfo.name}
                               </p>
-                              <p className="text-sm text-muted-foreground">
+                              <p className="text-sm text-text-secondary">
                                 {delivery.driver?.fullName || 'Unassigned'}
                                 {delivery.vehicle && ` - ${delivery.vehicle.vehicleNumber}`}
                               </p>
@@ -161,7 +161,7 @@ export default function LiveTrackingPage() {
                                   ? formatDate(delivery.estimatedArrival, 'time')
                                   : 'N/A'}
                               </p>
-                              <p className="text-xs text-muted-foreground">
+                              <p className="text-xs text-text-secondary">
                                 {delivery.tracking?.currentLocation.address ||
                                   'Location updating...'}
                               </p>
@@ -171,7 +171,7 @@ export default function LiveTrackingPage() {
                       );
                     })}
                     {activeDeliveries.length === 0 && (
-                      <div className="p-8 text-center text-muted-foreground">
+                      <div className="p-8 text-center text-text-secondary">
                         No active deliveries
                       </div>
                     )}
@@ -197,22 +197,22 @@ export default function LiveTrackingPage() {
               </CardHeader>
               <CardContent className="space-y-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Order</p>
+                  <p className="text-sm text-text-secondary">Order</p>
                   <p className="font-medium">{selected.order?.orderNumber ?? '-'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Customer</p>
+                  <p className="text-sm text-text-secondary">Customer</p>
                   <p className="font-medium">{selected.order?.customerInfo.name ?? '-'}</p>
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-sm text-text-secondary">
                     {selected.order?.customerInfo.phone ?? '-'}
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Driver</p>
+                  <p className="text-sm text-text-secondary">Driver</p>
                   <p className="font-medium">{selected.driver?.fullName || 'Unassigned'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Vehicle</p>
+                  <p className="text-sm text-text-secondary">Vehicle</p>
                   <p className="font-medium">
                     {selected.vehicle
                       ? `${selected.vehicle.vehicleNumber} - ${selected.vehicle.make} ${selected.vehicle.model}`
@@ -220,13 +220,13 @@ export default function LiveTrackingPage() {
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Current Location</p>
+                  <p className="text-sm text-text-secondary">Current Location</p>
                   <p className="text-sm">
                     {selected.tracking?.currentLocation.address || 'Updating...'}
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Estimated Arrival</p>
+                  <p className="text-sm text-text-secondary">Estimated Arrival</p>
                   <p className="font-medium">
                     {selected.estimatedArrival
                       ? formatDate(selected.estimatedArrival, 'full')
@@ -254,7 +254,7 @@ export default function LiveTrackingPage() {
             </Card>
           ) : (
             <Card>
-              <CardContent className="p-8 text-center text-muted-foreground">
+              <CardContent className="p-8 text-center text-text-secondary">
                 <MapPin size={32} className="mx-auto mb-2 opacity-50" />
                 <p>Select a delivery to see details</p>
               </CardContent>
@@ -284,14 +284,14 @@ export default function LiveTrackingPage() {
                       }`}
                     >
                       <p className="font-medium">{alert.message}</p>
-                      <p className="text-xs text-muted-foreground mt-1">
+                      <p className="text-xs text-text-secondary mt-1">
                         {formatDate(alert.timestamp, 'relative')}
                       </p>
                     </div>
                   ))}
                 </div>
               ) : (
-                <div className="text-center text-muted-foreground py-4">
+                <div className="text-center text-text-secondary py-4">
                   <p className="text-sm">No active alerts</p>
                 </div>
               )}

package/src/movethewheels/pages/MarketplacePage.tsx

@@ -150,7 +150,7 @@ export default function MarketplacePage() {
         <CardContent className="p-4">
           <div className="relative">
             <Search
-              className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
               size={20}
             />
             <Input
@@ -178,8 +178,8 @@ export default function MarketplacePage() {
                         {provider.isActive ? 'active' : 'inactive'}
                       </Badge>
                     </div>
-                    <p className="text-muted-foreground mt-1">{provider.description}</p>
-                    <div className="flex items-center gap-4 mt-3 text-sm text-muted-foreground">
+                    <p className="text-text-secondary mt-1">{provider.description}</p>
+                    <div className="flex items-center gap-4 mt-3 text-sm text-text-secondary">
                       <span className="flex items-center gap-1">
                         <Star size={14} className="text-yellow-500 fill-yellow-500" />{' '}
                         {provider.rating ?? 0}
@@ -193,7 +193,7 @@ export default function MarketplacePage() {
                     </div>
                   </div>
                   <div className="text-right">
-                    <p className="text-sm text-muted-foreground">Services</p>
+                    <p className="text-sm text-text-secondary">Services</p>
                     <p className="text-lg font-bold">
                       {Array.isArray(provider.services) ? provider.services.length : 0}
                     </p>
@@ -212,7 +212,7 @@ export default function MarketplacePage() {
                 <CardTitle className="text-base">{service.name}</CardTitle>
               </CardHeader>
               <CardContent>
-                <p className="text-sm text-muted-foreground mb-3">{service.description}</p>
+                <p className="text-sm text-text-secondary mb-3">{service.description}</p>
                 <div className="flex flex-wrap gap-1 mb-3">
                   <Badge variant="outline" className="text-xs">
                     {service.category ?? 'general'}
@@ -223,7 +223,7 @@ export default function MarketplacePage() {
                 </div>
                 <div className="flex items-center justify-between">
                   <span className="font-bold">{formatCurrency(service.price)}</span>
-                  <span className="text-sm text-muted-foreground">{service.currency}</span>
+                  <span className="text-sm text-text-secondary">{service.currency}</span>
                 </div>
               </CardContent>
             </Card>

package/src/movethewheels/pages/OrderDetailsPage.tsx

@@ -124,17 +124,17 @@ export default function OrderDetailsPage() {
                 <div>
                   <h4 className="font-medium mb-2">{order.customerInfo.name}</h4>
                   {order.customerInfo.company && (
-                    <p className="text-sm text-muted-foreground mb-2">
+                    <p className="text-sm text-text-secondary mb-2">
                       {order.customerInfo.company}
                     </p>
                   )}
                   <div className="space-y-1 text-sm">
                     <p className="flex items-center gap-2">
-                      <Mail size={14} className="text-muted-foreground" />
+                      <Mail size={14} className="text-text-secondary" />
                       {order.customerInfo.email}
                     </p>
                     <p className="flex items-center gap-2">
-                      <Phone size={14} className="text-muted-foreground" />
+                      <Phone size={14} className="text-text-secondary" />
                       {order.customerInfo.phone}
                     </p>
                   </div>
@@ -142,13 +142,13 @@ export default function OrderDetailsPage() {
                 <div>
                   {order.customerInfo.preferredDeliveryTime && (
                     <div className="mb-2">
-                      <p className="text-sm text-muted-foreground">Preferred Delivery Time</p>
+                      <p className="text-sm text-text-secondary">Preferred Delivery Time</p>
                       <p className="text-sm">{order.customerInfo.preferredDeliveryTime}</p>
                     </div>
                   )}
                   {order.customerInfo.deliveryInstructions && (
                     <div>
-                      <p className="text-sm text-muted-foreground">Delivery Instructions</p>
+                      <p className="text-sm text-text-secondary">Delivery Instructions</p>
                       <p className="text-sm">{order.customerInfo.deliveryInstructions}</p>
                     </div>
                   )}
@@ -173,7 +173,7 @@ export default function OrderDetailsPage() {
                   </h4>
                   <p className="text-sm">{formatAddress(order.pickupAddress)}</p>
                   {order.scheduledPickup && (
-                    <p className="text-sm text-muted-foreground mt-2">
+                    <p className="text-sm text-text-secondary mt-2">
                       Scheduled: {formatDate(order.scheduledPickup, 'full')}
                     </p>
                   )}
@@ -190,7 +190,7 @@ export default function OrderDetailsPage() {
                   </h4>
                   <p className="text-sm">{formatAddress(order.deliveryAddress)}</p>
                   {order.scheduledDelivery && (
-                    <p className="text-sm text-muted-foreground mt-2">
+                    <p className="text-sm text-text-secondary mt-2">
                       Scheduled: {formatDate(order.scheduledDelivery, 'full')}
                     </p>
                   )}
@@ -231,7 +231,7 @@ export default function OrderDetailsPage() {
                         <div>
                           <p className="font-medium">{item.name}</p>
                           {item.description && (
-                            <p className="text-sm text-muted-foreground">{item.description}</p>
+                            <p className="text-sm text-text-secondary">{item.description}</p>
                           )}
                         </div>
                       </TableCell>
@@ -261,7 +261,7 @@ export default function OrderDetailsPage() {
                 {order.timeline.map((event, index) => (
                   <div key={index} className="flex gap-4 pb-6 last:pb-0">
                     <div className="relative">
-                      <div className="w-3 h-3 rounded-full bg-primary mt-1.5" />
+                      <div className="w-3 h-3 rounded-full bg-action-primary-bg mt-1.5" />
                       {index < order.timeline.length - 1 && (
                         <div className="absolute top-4 left-1.5 w-px h-full -ml-px bg-border" />
                       )}
@@ -269,12 +269,12 @@ export default function OrderDetailsPage() {
                     <div className="flex-1">
                       <div className="flex items-center gap-2 mb-1">
                         <StatusBadge status={event.status} type="order" size="sm" />
-                        <span className="text-sm text-muted-foreground">
+                        <span className="text-sm text-text-secondary">
                           {formatDate(event.timestamp, 'full')}
                         </span>
                       </div>
                       {event.notes && <p className="text-sm">{event.notes}</p>}
-                      <p className="text-xs text-muted-foreground">by {event.performedBy}</p>
+                      <p className="text-xs text-text-secondary">by {event.performedBy}</p>
                     </div>
                   </div>
                 ))}
@@ -296,25 +296,25 @@ export default function OrderDetailsPage() {
             <CardContent>
               <div className="space-y-3">
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Subtotal</span>
+                  <span className="text-text-secondary">Subtotal</span>
                   <span>{formatCurrency(order.pricing.subtotal)}</span>
                 </div>
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Delivery</span>
+                  <span className="text-text-secondary">Delivery</span>
                   <span>{formatCurrency(order.pricing.fees.delivery)}</span>
                 </div>
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Handling</span>
+                  <span className="text-text-secondary">Handling</span>
                   <span>{formatCurrency(order.pricing.fees.handling)}</span>
                 </div>
                 {order.pricing.fees.insurance && (
                   <div className="flex justify-between text-sm">
-                    <span className="text-muted-foreground">Insurance</span>
+                    <span className="text-text-secondary">Insurance</span>
                     <span>{formatCurrency(order.pricing.fees.insurance)}</span>
                   </div>
                 )}
                 <div className="flex justify-between text-sm">
-                  <span className="text-muted-foreground">Taxes</span>
+                  <span className="text-text-secondary">Taxes</span>
                   <span>{formatCurrency(order.pricing.taxes)}</span>
                 </div>
                 <Separator />
@@ -323,7 +323,7 @@ export default function OrderDetailsPage() {
                   <span className="text-lg">{formatCurrency(order.pricing.total)}</span>
                 </div>
                 <div className="pt-2">
-                  <p className="text-sm text-muted-foreground">Payment Method</p>
+                  <p className="text-sm text-text-secondary">Payment Method</p>
                   <p className="text-sm capitalize">
                     {order.pricing.paymentMethod.replace('_', ' ')}
                   </p>
@@ -343,15 +343,15 @@ export default function OrderDetailsPage() {
             <CardContent>
               <div className="space-y-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Driver</p>
+                  <p className="text-sm text-text-secondary">Driver</p>
                   <p className="text-sm">{order.driverId || 'Not assigned'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Vehicle</p>
+                  <p className="text-sm text-text-secondary">Vehicle</p>
                   <p className="text-sm">{order.vehicleId || 'Not assigned'}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Tracking Number</p>
+                  <p className="text-sm text-text-secondary">Tracking Number</p>
                   <p className="text-sm font-mono">{order.trackingNumber}</p>
                 </div>
                 <Button

package/src/movethewheels/pages/OrdersListPage.tsx

@@ -67,7 +67,7 @@ export default function OrdersListPage() {
       cell: (row) => (
         <div className="min-w-0">
           <p className="font-medium truncate">{row.customerInfo.name}</p>
-          <p className="text-sm text-muted-foreground truncate">{row.customerInfo.email}</p>
+          <p className="text-sm text-text-secondary truncate">{row.customerInfo.email}</p>
         </div>
       ),
     },
@@ -173,7 +173,7 @@ export default function OrdersListPage() {
         <CardContent className="p-4">
           <div className="flex flex-wrap items-center gap-4">
             <div className="flex items-center gap-2">
-              <Filter size={16} className="text-muted-foreground" />
+              <Filter size={16} className="text-text-secondary" />
               <span className="text-sm font-medium">
                 {t('movethewheels.orders.filters.label', 'Filters:')}
               </span>

package/src/movethewheels/pages/ProductDetailsPage.tsx

@@ -66,28 +66,28 @@ export default function ProductDetailsPage() {
             <CardContent>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Length</p>
+                  <p className="text-sm text-text-secondary">Length</p>
                   <p className="text-2xl font-bold">
                     {product.dimensions.length}
                     <span className="text-sm font-normal"> {product.dimensions.unit}</span>
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Width</p>
+                  <p className="text-sm text-text-secondary">Width</p>
                   <p className="text-2xl font-bold">
                     {product.dimensions.width}
                     <span className="text-sm font-normal"> {product.dimensions.unit}</span>
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Height</p>
+                  <p className="text-sm text-text-secondary">Height</p>
                   <p className="text-2xl font-bold">
                     {product.dimensions.height}
                     <span className="text-sm font-normal"> {product.dimensions.unit}</span>
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Weight</p>
+                  <p className="text-sm text-text-secondary">Weight</p>
                   <p className="text-2xl font-bold">
                     {product.weight}
                     <span className="text-sm font-normal"> kg</span>
@@ -108,7 +108,7 @@ export default function ProductDetailsPage() {
                 <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                   {product.attributes.map((attr, i) => (
                     <div key={i}>
-                      <p className="text-sm text-muted-foreground">{attr.name}</p>
+                      <p className="text-sm text-text-secondary">{attr.name}</p>
                       <p className="font-medium">{attr.value}</p>
                     </div>
                   ))}
@@ -127,7 +127,7 @@ export default function ProductDetailsPage() {
             </CardHeader>
             <CardContent>
               <p className="text-3xl font-bold">{formatCurrency(product.value)}</p>
-              <p className="text-sm text-muted-foreground">Unit price</p>
+              <p className="text-sm text-text-secondary">Unit price</p>
             </CardContent>
           </Card>
 
@@ -137,12 +137,12 @@ export default function ProductDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-3">
               <div>
-                <p className="text-sm text-muted-foreground">SKU</p>
+                <p className="text-sm text-text-secondary">SKU</p>
                 <p className="font-mono">{product.sku}</p>
               </div>
               {product.barcode && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Barcode</p>
+                  <p className="text-sm text-text-secondary">Barcode</p>
                   <p className="font-mono">{product.barcode}</p>
                 </div>
               )}

package/src/movethewheels/pages/ProductsPage.tsx

@@ -34,7 +34,7 @@ export default function ProductsPage() {
       cell: (row) => (
         <div>
           <p className="font-medium">{row.name}</p>
-          <p className="text-sm text-muted-foreground line-clamp-1">{row.description}</p>
+          <p className="text-sm text-text-secondary line-clamp-1">{row.description}</p>
         </div>
       ),
     },