@burdenoff/microfe-movethewheels 2026.614.1 → 2026.624.1

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',

package/src/movethewheels/pages/DriverDetailsPage.tsx

@@ -51,7 +51,7 @@ export default function DriverDetailsPage() {
           <div className="flex items-center gap-1">
             <Star size={16} className="text-yellow-500 fill-yellow-500" />
             <span className="font-medium">{driver.ratings.overall.toFixed(1)}</span>
-            <span className="text-muted-foreground">({driver.ratings.totalRatings} ratings)</span>
+            <span className="text-text-secondary">({driver.ratings.totalRatings} ratings)</span>
           </div>
         </div>
       }
@@ -75,7 +75,7 @@ export default function DriverDetailsPage() {
                   { label: 'On-Time Delivery', value: driver.ratings.onTimeDelivery },
                 ].map((rating) => (
                   <div key={rating.label}>
-                    <p className="text-sm text-muted-foreground">{rating.label}</p>
+                    <p className="text-sm text-text-secondary">{rating.label}</p>
                     <div className="flex items-center gap-2 mt-1">
                       <Progress value={rating.value * 20} className="flex-1 h-2" />
                       <span className="text-sm font-medium">{rating.value.toFixed(1)}</span>
@@ -96,23 +96,23 @@ export default function DriverDetailsPage() {
             <CardContent>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 <div>
-                  <p className="text-sm text-muted-foreground">Shift</p>
+                  <p className="text-sm text-text-secondary">Shift</p>
                   <p className="font-medium">
                     {driver.workingHours.startTime} - {driver.workingHours.endTime}
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Working Days</p>
+                  <p className="text-sm text-text-secondary">Working Days</p>
                   <p className="font-medium">{driver.workingHours.workingDays.length} days/week</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Hours Today</p>
+                  <p className="text-sm text-text-secondary">Hours Today</p>
                   <p className="font-medium">
                     {driver.workingHours.currentHoursToday}h / {driver.workingHours.maxHoursPerDay}h
                   </p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">Hours This Week</p>
+                  <p className="text-sm text-text-secondary">Hours This Week</p>
                   <p className="font-medium">
                     {driver.workingHours.currentHoursThisWeek}h /{' '}
                     {driver.workingHours.maxHoursPerWeek}h
@@ -134,10 +134,10 @@ export default function DriverDetailsPage() {
                 <div className="flex items-center justify-between p-3 border rounded-lg">
                   <div>
                     <p className="font-medium">Driver's License</p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       {driver.licenseNumber} - {driver.licenseType}
                     </p>
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm text-text-secondary">
                       Expires: {formatDate(driver.licenseExpiry)}
                     </p>
                   </div>
@@ -150,7 +150,7 @@ export default function DriverDetailsPage() {
                   >
                     <div>
                       <p className="font-medium capitalize">{doc.type.replace('_', ' ')}</p>
-                      <p className="text-sm text-muted-foreground">
+                      <p className="text-sm text-text-secondary">
                         Expires: {formatDate(doc.expiryDate)}
                       </p>
                     </div>
@@ -172,15 +172,15 @@ export default function DriverDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-4">
               <div>
-                <p className="text-sm text-muted-foreground">Total Deliveries</p>
+                <p className="text-sm text-text-secondary">Total Deliveries</p>
                 <p className="text-2xl font-bold">{driver.completedOrders.toLocaleString()}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Today's Deliveries</p>
+                <p className="text-sm text-text-secondary">Today's Deliveries</p>
                 <p className="text-2xl font-bold">{driver.todayOrders}</p>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Join Date</p>
+                <p className="text-sm text-text-secondary">Join Date</p>
                 <p className="font-medium">{formatDate(driver.joinDate)}</p>
               </div>
             </CardContent>
@@ -195,23 +195,23 @@ export default function DriverDetailsPage() {
             </CardHeader>
             <CardContent className="space-y-3">
               <div>
-                <p className="text-sm text-muted-foreground">Total Earnings</p>
+                <p className="text-sm text-text-secondary">Total Earnings</p>
                 <p className="text-2xl font-bold">
                   {formatCurrency(driver.earnings.totalEarnings)}
                 </p>
               </div>
               <div className="grid grid-cols-2 gap-3">
                 <div>
-                  <p className="text-sm text-muted-foreground">This Week</p>
+                  <p className="text-sm text-text-secondary">This Week</p>
                   <p className="font-medium">{formatCurrency(driver.earnings.weeklyEarnings)}</p>
                 </div>
                 <div>
-                  <p className="text-sm text-muted-foreground">This Month</p>
+                  <p className="text-sm text-text-secondary">This Month</p>
                   <p className="font-medium">{formatCurrency(driver.earnings.monthlyEarnings)}</p>
                 </div>
               </div>
               <div>
-                <p className="text-sm text-muted-foreground">Base Salary</p>
+                <p className="text-sm text-text-secondary">Base Salary</p>
                 <p className="font-medium">{formatCurrency(driver.baseSalary)}/year</p>
               </div>
             </CardContent>
@@ -229,7 +229,7 @@ export default function DriverDetailsPage() {
                 <p className="text-sm">
                   {driver.currentLocation.address || 'Location updating...'}
                 </p>
-                <p className="text-xs text-muted-foreground mt-1">
+                <p className="text-xs text-text-secondary mt-1">
                   Updated {formatDate(driver.currentLocation.timestamp || new Date(), 'relative')}
                 </p>
               </CardContent>

package/src/movethewheels/pages/DriversPage.tsx

@@ -35,7 +35,7 @@ export default function DriversPage() {
           </Avatar>
           <div>
             <p className="font-medium">{row.fullName}</p>
-            <p className="text-sm text-muted-foreground">{row.employeeId}</p>
+            <p className="text-sm text-text-secondary">{row.employeeId}</p>
           </div>
         </div>
       ),
@@ -54,7 +54,7 @@ export default function DriversPage() {
         <div className="flex items-center gap-1">
           <Star size={14} className="text-yellow-500 fill-yellow-500" />
           <span className="font-medium">{row.ratings.overall.toFixed(1)}</span>
-          <span className="text-muted-foreground text-sm">({row.ratings.totalRatings})</span>
+          <span className="text-text-secondary text-sm">({row.ratings.totalRatings})</span>
         </div>
       ),
     },
@@ -71,7 +71,7 @@ export default function DriversPage() {
       cell: (row) => (
         <div className="text-sm">
           <p>{row.licenseType}</p>
-          <p className="text-muted-foreground">Exp: {formatDate(row.licenseExpiry, 'short')}</p>
+          <p className="text-text-secondary">Exp: {formatDate(row.licenseExpiry, 'short')}</p>
         </div>
       ),
     },