@burdenoff/microfe-movethewheels 2026.608.1 → 2026.624.1

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>
       ),
     },

package/src/movethewheels/pages/ReportsPage.tsx

@@ -95,18 +95,18 @@ export default function ReportsPage() {
               <CardContent className="p-4">
                 <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">
                       <FileBarChart size={20} className="text-primary" />
                     </div>
                     <div>
                       <p className="font-medium">{report.name}</p>
-                      <p className="text-sm text-muted-foreground">{report.description}</p>
+                      <p className="text-sm text-text-secondary">{report.description}</p>
                     </div>
                   </div>
                   <div className="flex items-center gap-3">
                     <div className="text-right">
                       <Badge variant="outline">{report.frequency}</Badge>
-                      <p className="text-xs text-muted-foreground mt-1">
+                      <p className="text-xs text-text-secondary mt-1">
                         Last: {report.lastGenerated}
                       </p>
                     </div>
@@ -131,8 +131,8 @@ export default function ReportsPage() {
               {scheduledReports.map((report) => (
                 <div key={report.name} className="p-3 border rounded-lg">
                   <p className="font-medium">{report.name}</p>
-                  <p className="text-sm text-muted-foreground">Next: {report.nextRun}</p>
-                  <p className="text-xs text-muted-foreground">{report.recipients} recipients</p>
+                  <p className="text-sm text-text-secondary">Next: {report.nextRun}</p>
+                  <p className="text-xs text-text-secondary">{report.recipients} recipients</p>
                 </div>
               ))}
               <Button variant="outline" className="w-full">

package/src/movethewheels/pages/RouteDetailsPage.tsx

@@ -35,7 +35,7 @@ export default function RouteDetailsPage() {
       >
         <Card>
           <CardContent className="p-8 text-center">
-            <p className="text-muted-foreground">Route creation form would go here</p>
+            <p className="text-text-secondary">Route creation form would go here</p>
           </CardContent>
         </Card>
       </PageLayout>
@@ -97,8 +97,8 @@ export default function RouteDetailsPage() {
               <CardTitle>Route Map</CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="aspect-video bg-muted rounded-lg flex items-center justify-center">
-                <div className="text-center text-muted-foreground">
+              <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center">
+                <div className="text-center text-text-secondary">
                   <MapPin size={48} className="mx-auto mb-2 opacity-50" />
                   <p>Route map visualization</p>
                 </div>
@@ -116,7 +116,7 @@ export default function RouteDetailsPage() {
                   <div key={stop.id} className="flex gap-4">
                     <div className="relative">
                       <div
-                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-green-500 text-white' : 'bg-muted'}`}
+                        className={`w-8 h-8 rounded-full flex items-center justify-center ${stop.status === 'completed' ? 'bg-green-500 text-white' : 'bg-bg-sunken'}`}
                       >
                         {stop.status === 'completed' ? <CheckCircle size={16} /> : stop.sequence}
                       </div>
@@ -136,7 +136,7 @@ export default function RouteDetailsPage() {
                             </Badge>
                             <span className="font-medium">Order #{stop.orderId}</span>
                           </div>
-                          <p className="text-sm text-muted-foreground mt-1">
+                          <p className="text-sm text-text-secondary mt-1">
                             {formatAddress(stop.address)}
                           </p>
                         </div>
@@ -149,7 +149,7 @@ export default function RouteDetailsPage() {
                               Actual: {formatDate(stop.actualTime, 'time')}
                             </p>
                           )}
-                          <p className="text-xs text-muted-foreground">{stop.duration} min stop</p>
+                          <p className="text-xs text-text-secondary">{stop.duration} min stop</p>
                         </div>
                       </div>
                     </div>
@@ -167,14 +167,14 @@ export default function RouteDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground">Total Distance</p>
+                <p className="text-sm text-text-secondary">Total Distance</p>
                 <p className="text-2xl font-bold">
                   {route.distance.toFixed(1)}
                   <span className="text-sm font-normal"> km</span>
                 </p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Est. Duration</p>
+                <p className="text-sm text-text-secondary">Est. Duration</p>
                 <p className="text-2xl font-bold">
                   {route.estimatedDuration}
                   <span className="text-sm font-normal"> min</span>
@@ -182,7 +182,7 @@ export default function RouteDetailsPage() {
               </div>
               {route.actualDuration && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Actual Duration</p>
+                  <p className="text-sm text-text-secondary">Actual Duration</p>
                   <p className="text-2xl font-bold">
                     {route.actualDuration}
                     <span className="text-sm font-normal"> min</span>
@@ -201,18 +201,18 @@ export default function RouteDetailsPage() {
             <CardContent className="space-y-3">
               {route.startTime && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Started</p>
+                  <p className="text-sm text-text-secondary">Started</p>
                   <p>{formatDate(route.startTime, 'full')}</p>
                 </div>
               )}
               {route.endTime && (
                 <div>
-                  <p className="text-sm text-muted-foreground">Completed</p>
+                  <p className="text-sm text-text-secondary">Completed</p>
                   <p>{formatDate(route.endTime, 'full')}</p>
                 </div>
               )}
               <div>
-                <p className="text-sm text-muted-foreground">Created</p>
+                <p className="text-sm text-text-secondary">Created</p>
                 <p>{formatDate(route.createdAt, 'full')}</p>
               </div>
             </CardContent>
@@ -230,7 +230,7 @@ export default function RouteDetailsPage() {
                     className={`p-2 rounded mb-2 ${tc.condition === 'severe' ? 'bg-red-50' : tc.condition === 'heavy' ? 'bg-orange-50' : 'bg-yellow-50'}`}
                   >
                     <p className="text-sm font-medium capitalize">{tc.condition} traffic</p>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-text-secondary">
                       {tc.location} - +{tc.delay} min delay
                     </p>
                   </div>

package/src/movethewheels/pages/SettingsPage.tsx

@@ -143,7 +143,7 @@ export default function SettingsPage() {
                 <div key={item.label} className="flex items-center justify-between">
                   <div>
                     <p className="font-medium">{item.label}</p>
-                    <p className="text-sm text-muted-foreground">{item.desc}</p>
+                    <p className="text-sm text-text-secondary">{item.desc}</p>
                   </div>
                   <Switch defaultChecked />
                 </div>
@@ -200,7 +200,7 @@ export default function SettingsPage() {
               <CardDescription>Manage your API access</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="p-4 bg-muted rounded-lg">
+              <div className="p-4 bg-bg-sunken rounded-lg">
                 <p className="font-medium">Production API Key</p>
                 <code className="text-sm">pk_live_••••••••••••••••</code>
               </div>

package/src/movethewheels/pages/TrackingPage.tsx

@@ -61,7 +61,7 @@ export default function TrackingPage() {
         <CardContent className="p-6">
           <form onSubmit={handleSearch} className="flex gap-4">
             <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-text-secondary" />
               <Input
                 value={trackingInput}
                 onChange={(e) => setTrackingInput(e.target.value)}
@@ -83,15 +83,15 @@ export default function TrackingPage() {
 
       {/* Error State */}
       {error && (
-        <Card className="border-destructive">
+        <Card className="border-status-error-border">
           <CardContent className="p-6">
             <div className="flex items-center gap-4">
-              <AlertCircle className="w-8 h-8 text-destructive" />
+              <AlertCircle className="w-8 h-8 text-status-error-text" />
               <div>
-                <p className="font-medium text-destructive">
+                <p className="font-medium text-status-error-text">
                   {t('movethewheels.tracking.error.title', 'Unable to find shipment')}
                 </p>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-text-secondary">
                   {t(
                     'movethewheels.tracking.error.description',
                     'Please check the tracking number and try again'
@@ -134,13 +134,13 @@ export default function TrackingPage() {
               <CardContent>
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                   <div>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {t('movethewheels.tracking.details.trackingNumber', 'Tracking Number')}
                     </p>
                     <p className="font-mono font-medium">{order.trackingNumber}</p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {t('movethewheels.tracking.details.estimatedDelivery', 'Estimated Delivery')}
                     </p>
                     <p className="font-medium">
@@ -152,7 +152,7 @@ export default function TrackingPage() {
                     </p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {t('movethewheels.tracking.details.items', 'Items')}
                     </p>
                     <p className="font-medium">
@@ -161,7 +161,7 @@ export default function TrackingPage() {
                     </p>
                   </div>
                   <div>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {t('movethewheels.tracking.details.lastUpdated', 'Last Updated')}
                     </p>
                     <p className="font-medium">{formatDate(tracking.lastUpdated, 'relative')}</p>
@@ -225,21 +225,21 @@ export default function TrackingPage() {
                           <div
                             className={`w-10 h-10 rounded-full flex items-center justify-center ${
                               isComplete
-                                ? 'bg-primary text-primary-foreground'
-                                : 'bg-muted text-muted-foreground'
+                                ? 'bg-action-primary-bg text-action-primary-text'
+                                : 'bg-bg-sunken text-text-secondary'
                             } ${isCurrent ? 'ring-4 ring-primary/20' : ''}`}
                           >
                             <step.icon size={20} />
                           </div>
                           <p
-                            className={`text-xs mt-2 text-center ${isComplete ? 'font-medium' : 'text-muted-foreground'}`}
+                            className={`text-xs mt-2 text-center ${isComplete ? 'font-medium' : 'text-text-secondary'}`}
                           >
                             {step.label}
                           </p>
                           {index < 3 && (
                             <div
                               className={`absolute top-5 h-0.5 ${
-                                isComplete ? 'bg-primary' : 'bg-muted'
+                                isComplete ? 'bg-action-primary-bg' : 'bg-bg-sunken'
                               }`}
                               style={{
                                 left: `calc(${(index + 0.5) * 25}% + 20px)`,
@@ -262,7 +262,7 @@ export default function TrackingPage() {
                       <div key={index} className="flex gap-4">
                         <div className="relative">
                           <div
-                            className={`w-3 h-3 rounded-full ${index === 0 ? 'bg-primary' : 'bg-muted'}`}
+                            className={`w-3 h-3 rounded-full ${index === 0 ? 'bg-action-primary-bg' : 'bg-bg-sunken'}`}
                           />
                           {index < order.timeline.length - 1 && (
                             <div className="absolute top-3 left-1.5 w-px h-8 -ml-px bg-border" />
@@ -271,13 +271,13 @@ export default function TrackingPage() {
                         <div className="flex-1 pb-4">
                           <div className="flex items-center gap-2">
                             <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 mt-1">{event.notes}</p>}
                           {event.location && (
-                            <p className="text-xs text-muted-foreground mt-1">
+                            <p className="text-xs text-text-secondary mt-1">
                               <MapPin size={12} className="inline mr-1" />
                               {formatAddress(event.location)}
                             </p>
@@ -323,7 +323,7 @@ export default function TrackingPage() {
                         />
                         <div>
                           <p className="text-sm font-medium">{alert.message}</p>
-                          <p className="text-xs text-muted-foreground">
+                          <p className="text-xs text-text-secondary">
                             {formatDate(alert.timestamp, 'relative')}
                             {alert.resolvedAt &&
                               ` - ${t('movethewheels.tracking.alerts.resolved', 'Resolved')}`}
@@ -348,8 +348,8 @@ export default function TrackingPage() {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="aspect-video bg-muted rounded-lg flex items-center justify-center mb-4">
-                  <div className="text-center text-muted-foreground">
+                <div className="aspect-video bg-bg-sunken rounded-lg flex items-center justify-center mb-4">
+                  <div className="text-center text-text-secondary">
                     <MapPin size={32} className="mx-auto mb-2" />
                     <p className="text-sm">
                       {t('movethewheels.tracking.location.mapView', 'Map View')}
@@ -360,7 +360,7 @@ export default function TrackingPage() {
                   {tracking.currentLocation.address ||
                     t('movethewheels.tracking.location.updating', 'Location updating...')}
                 </p>
-                <p className="text-xs text-muted-foreground mt-1">
+                <p className="text-xs text-text-secondary mt-1">
                   {t('movethewheels.tracking.location.updated', 'Updated')}{' '}
                   {formatDate(tracking.currentLocation.timestamp || new Date(), 'relative')}
                 </p>
@@ -376,7 +376,7 @@ export default function TrackingPage() {
               </CardHeader>
               <CardContent>
                 <p className="text-sm">{order.customerInfo.name}</p>
-                <p className="text-sm text-muted-foreground mt-2">
+                <p className="text-sm text-text-secondary mt-2">
                   {formatAddress(order.deliveryAddress)}
                 </p>
               </CardContent>