hey-pharmacist-ecommerce 1.1.41 → 1.1.42

package/src/screens/CheckoutScreen.tsx

@@ -595,13 +595,13 @@ export function CheckoutScreen() {
                             }
                           }}
                           className={`relative flex w-full items-center justify-between rounded-xl border-2 p-3 transition-all duration-200 ${active
-                            ? 'border-primary-500 bg-primary-50'
-                            : 'border-gray-200 hover:border-primary-300'
+                            ? 'border-hprimary-500 bg-hprimary-50'
+                            : 'border-gray-200 hover:border-hprimary-300'
                             }`}
                         >
                           <div className="flex items-center gap-3">
                             <div
-                              className={`p-2 rounded-lg ${active ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 text-gray-600'
+                              className={`p-2 rounded-lg ${active ? 'bg-hprimary-100 text-hprimary-600' : 'bg-gray-100 text-gray-600'
                                 }`}
                             >
                               {option.icon}
@@ -612,7 +612,7 @@ export function CheckoutScreen() {
                             </div>
                           </div>
                           {active && (
-                            <div className="w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center shrink-0">
+                            <div className="w-5 h-5 rounded-full bg-hprimary-500 flex items-center justify-center shrink-0">
                               <Check className="w-3 h-3 text-white" />
                             </div>
                           )}
@@ -726,9 +726,9 @@ export function CheckoutScreen() {
                             <label
                               key={addr.id}
                               className={`group relative flex items-start gap-3 p-4 rounded-2xl border ${selectedAddressId === addr.id
-                                ? 'border-primary-500 bg-primary-50 shadow-xs'
+                                ? 'border-hprimary-500 bg-hprimary-50 shadow-xs'
                                 : 'border-slate-200 bg-white'
-                                } cursor-pointer hover:border-primary-300 transition-colors`}
+                                } cursor-pointer hover:border-hprimary-300 transition-colors`}
                             >
                               <input
                                 type="radio"
@@ -763,14 +763,14 @@ export function CheckoutScreen() {
                                 )}
                                 <div className="mt-3 flex items-center gap-2">
                                   {addr.isDefault && (
-                                    <span className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-semibold text-primary-700">
+                                    <span className="inline-flex items-center gap-1 rounded-full bg-hprimary-100 px-2.5 py-0.5 text-xs font-semibold text-hprimary-700">
                                       Default
                                     </span>
                                   )}
                                   <button
                                     type="button"
                                     onClick={(e) => { e.preventDefault(); setEditingAddress(addr); setIsAddressModalOpen(true); }}
-                                    className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-medium text-slate-600 hover:border-primary-300 hover:text-primary-600"
+                                    className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-medium text-slate-600 hover:border-hprimary-300 hover:text-hprimary-600"
                                   >
                                     <Edit3 className="h-3.5 w-3.5" /> Edit
                                   </button>
@@ -833,7 +833,7 @@ export function CheckoutScreen() {
 
                 {shippingRatesLoading ? (
                   <div className="flex items-center justify-center py-12">
-                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent"></div>
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-haccent"></div>
                     <span className="ml-3 text-gray-600">Loading shipping options...</span>
                   </div>
                 ) : shippingRatesError ? (
@@ -861,7 +861,7 @@ export function CheckoutScreen() {
                             setShippingPrice(parseFloat(rate.amount));
                           }}
                           className={`relative p-5 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md ${isSelected
-                            ? 'border-primary-500 bg-primary-50 ring-2 ring-primary-200'
+                            ? 'border-hprimary-500 bg-hprimary-50 ring-2 ring-hprimary-200'
                             : 'border-gray-200 hover:border-gray-300'
                             }`}
                         >
@@ -889,7 +889,7 @@ export function CheckoutScreen() {
                                     {rate.provider} {rate.servicelevel?.name}
                                   </h3>
                                   {isTest && (
-                                    <span className="px-2 py-1 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">
+                                    <span className="px-2 py-1 text-xs font-medium bg-hprimary-100 text-hprimary-800 rounded-full">
                                       TEST
                                     </span>
                                   )}
@@ -947,7 +947,7 @@ export function CheckoutScreen() {
                           {/* Selection Indicator */}
                           {isSelected && (
                             <div className="absolute top-3 right-3">
-                              <div className="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center">
+                              <div className="w-6 h-6 bg-hprimary-500 rounded-full flex items-center justify-center">
                                 <CheckIcon className="w-4 h-4 text-white" />
                               </div>
                             </div>
@@ -979,8 +979,8 @@ export function CheckoutScreen() {
             className="space-y-10 lg:sticky lg:top-24 lg:col-span-1"
           >
             {/* Order Summary */}
-            <div className="bg-linear-to-br from-secondary/10 to-secondary/10 rounded-[24px] p-8 border-2 border-secondary/20 sticky top-24">
-              <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-6 text-2xl">Order Summary</h2>
+            <div className="bg-linear-to-br from-hsecondary/10 to-hsecondary/10 rounded-[24px] p-8 border-2 border-hsecondary/20 sticky top-24">
+              <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-6 text-2xl">Order Summary</h2>
 
 
               {/* Cart Summary */}
@@ -998,7 +998,7 @@ export function CheckoutScreen() {
                         <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
                           {item?.productVariantData?.brand} • Qty: {item.quantity}
                         </p>
-                        <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mt-1">
+                        <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mt-1">
                           {formatPrice(item.productVariantData.finalPrice * item.quantity)}
                         </p>
                       </div>
@@ -1006,7 +1006,7 @@ export function CheckoutScreen() {
                   ))}
                 </div>
 
-                <div className="h-px bg-secondary/20 my-4" />
+                <div className="h-px bg-hsecondary/20 my-4" />
 
                 {/* Coupon Code Section */}
                 <div className="mb-6">
@@ -1042,11 +1042,11 @@ export function CheckoutScreen() {
                     <span>Estimated tax</span>
                     <span className="font-semibold">{formatPrice(tax)}</span>
                   </div>
-                  <div className="h-px bg-secondary/20 mt-6" />
+                  <div className="h-px bg-hsecondary/20 mt-6" />
 
                   <div className="flex items-center justify-between mb-6">
-                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary">Total</span>
-                    <span className="font-['Poppins',sans-serif] font-bold text-[24px] text-secondary">{formatPrice(total)}</span>
+                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-hsecondary">Total</span>
+                    <span className="font-['Poppins',sans-serif] font-bold text-[24px] text-hsecondary">{formatPrice(total)}</span>
                   </div>
                   {/* <p className="mt-1 text-xs text-slate-500">
                       Tax is estimated. Final amount confirmed after payment.
@@ -1055,7 +1055,7 @@ export function CheckoutScreen() {
 
                 <div className="bg-white/80 rounded-xl p-4">
                   <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]">
-                    <strong className="text-secondary">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
+                    <strong className="text-hsecondary">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
                   </p>
                 </div>
               </section>
@@ -1093,7 +1093,7 @@ export function CheckoutScreen() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-secondary hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-hsecondary hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}

package/src/screens/CurrentOrdersScreen.tsx

@@ -112,21 +112,21 @@ export function CurrentOrdersScreen() {
                 </h2>
                 <div className="mt-4 space-y-4 text-sm text-slate-600">
                   <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
-                    <Warehouse className="h-5 w-5 text-primary-500" />
+                    <Warehouse className="h-5 w-5 text-hprimary-500" />
                     <div>
                       <p className="font-semibold text-slate-800">Preparation</p>
                       <p>Our pharmacists verify ingredients and pack thermo-sensitive items.</p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
-                    <Truck className="h-5 w-5 text-primary-500" />
+                    <Truck className="h-5 w-5 text-hprimary-500" />
                     <div>
                       <p className="font-semibold text-slate-800">In transit</p>
                       <p>Track live courier location with ETA updates tailored to your delivery window.</p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
-                    <BellRing className="h-5 w-5 text-primary-500" />
+                    <BellRing className="h-5 w-5 text-hprimary-500" />
                     <div>
                       <p className="font-semibold text-slate-800">Arrival alerts</p>
                       <p>Receive SMS and email notifications when parcels are out for delivery.</p>
@@ -135,7 +135,7 @@ export function CurrentOrdersScreen() {
                 </div>
               </div>
 
-              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-xs">
+              <div className="rounded-3xl border border-hprimary-100 bg-hprimary-50/70 p-6 text-sm text-hprimary-700 shadow-xs">
                 <p className="font-semibold uppercase tracking-[0.3em]">Need support?</p>
                 <p className="mt-3 leading-relaxed">
                   Our fulfillment team is online 7 days a week. Message us if you need to adjust

package/src/screens/EditProfileScreen.tsx

@@ -75,7 +75,7 @@ export function EditProfileScreen() {
           className="mx-auto max-w-3xl rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-primary-50"
         >
           <div className="flex items-center gap-3">
-            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary-50 text-primary-600">
+            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-hprimary-50 text-hprimary-600">
               <User className="h-5 w-5" />
             </span>
             <div>

package/src/screens/ForgotPasswordScreen.tsx

@@ -67,10 +67,10 @@ export function ForgotPasswordScreen() {
             <div className="space-y-2">
               <Mail
                 strokeWidth={2}
-                className="h-16 w-16 mx-auto text-white rounded-full bg-secondary m-2 mb-4 px-4"
+                className="h-16 w-16 mx-auto text-white rounded-full bg-hsecondary m-2 mb-4 px-4"
               />
-              <h2 className="text-4xl text-secondary">Forgot Password?</h2>
-              <p className="text-sm text-muted">
+              <h2 className="text-4xl text-hsecondary">Forgot Password?</h2>
+              <p className="text-sm text-hmuted">
                 No worries! Enter your email and we'll send you reset instructions.
               </p>
             </div>
@@ -95,23 +95,23 @@ export function ForgotPasswordScreen() {
                 </div>
               )}
 
-              <div className="text-start text-secondary">
-                <h2 className="text-sm text-secondary mb-3">
-                  Email Address <span className="text-primary-500">*</span>
+              <div className="text-start text-hsecondary">
+                <h2 className="text-sm text-hsecondary mb-3">
+                  Email Address <span className="text-hprimary-500">*</span>
                 </h2>
                 <Input
                   type="email"
                   placeholder="you@example.com"
                   {...register('email')}
                   error={errors.email?.message}
-                  className="text-secondary"
+                  className="text-hsecondary"
                 />
               </div>
 
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full bg-secondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                className="w-full bg-hsecondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
               >
                 {isSubmitting ? (
                   'Sending...'
@@ -126,7 +126,7 @@ export function ForgotPasswordScreen() {
               <div className="pt-4 border-t border-slate-200">
                 <Link
                   href={buildPath('/login')}
-                  className="flex items-center justify-center gap-2 text-sm font-medium text-primary transition hover:opacity-80"
+                  className="flex items-center justify-center gap-2 text-sm font-medium text-hprimary transition hover:opacity-80"
                 >
                   <ArrowLeft className="h-4 w-4" />
                   Back to login
@@ -135,11 +135,11 @@ export function ForgotPasswordScreen() {
             </form>
 
             <div className="mt-4">
-              <p className="text-muted">
+              <p className="text-hmuted">
                 Don't have an account?{' '}
                 <Link
                   href={buildPath('/register')}
-                  className="font-medium text-primary transition hover:opacity-90"
+                  className="font-medium text-hprimary transition hover:opacity-90"
                 >
                   Sign up
                 </Link>

package/src/screens/LoginScreen.tsx

@@ -81,9 +81,9 @@ export function LoginScreen() {
         >
           <div className="w-full max-w-lg space-y-10 text-center">
             <div className="space-y-2">
-              <Lock strokeWidth={2} className='h-16 w-16 mx-auto text-white rounded-full bg-secondary m-2 mb-4 px-4' />
-              <h2 className="text-4xl text-secondary">Welcome Back</h2>
-              <p className="text-sm text-muted">Sign in to access your patient portal
+              <Lock strokeWidth={2} className='h-16 w-16 mx-auto text-white rounded-full bg-hsecondary m-2 mb-4 px-4' />
+              <h2 className="text-4xl text-hsecondary">Welcome Back</h2>
+              <p className="text-sm text-hmuted">Sign in to access your patient portal
               </p>
             </div>
 
@@ -103,19 +103,19 @@ export function LoginScreen() {
                 </div>
               )}
 
-              <div className='text-start text-secondary'>
-                <h2 className="text-sm text-secondary mb-3">Email Address <span className='text-primary-500'>*</span></h2>
+              <div className='text-start text-hsecondary'>
+                <h2 className="text-sm text-hsecondary mb-3">Email Address <span className='text-hprimary-500'>*</span></h2>
                 <Input
                   type="email"
                   // label="Email address"
                   placeholder="you@example.com"
                   {...register('email')}
                   error={errors.email?.message}
-                  className='text-secondary'
+                  className='text-hsecondary'
                 />
               </div>
-              <div className="relative text-start text-secondary">
-                <h2 className="text-sm text-secondary mb-3">Password <span className='text-primary-500'>*</span></h2>
+              <div className="relative text-start text-hsecondary">
+                <h2 className="text-sm text-hsecondary mb-3">Password <span className='text-hprimary-500'>*</span></h2>
 
                 <Input
                   type={showPassword ? 'text' : 'password'}
@@ -135,7 +135,7 @@ export function LoginScreen() {
               <div className="flex items-center justify-end text-sm">
                 <Link
                   href={buildPath('/forgot-password')}
-                  className="font-medium text-primary transition hover:opacity-80"
+                  className="font-medium text-hprimary transition hover:opacity-80"
                 >
                   Forgot password?
                 </Link>
@@ -144,20 +144,20 @@ export function LoginScreen() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full bg-secondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
+                className="w-full bg-hsecondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
               >
                 {isSubmitting ? 'Signing in...' : 'Sign in'}
               </button>
             </form>
 
               <div className="mt-4">
-                <p className="text-muted">Don't have an account? <Link href={buildPath('/register')} className="font-medium text-primary transition hover:opacity-90">Sign up</Link></p>
+                <p className="text-hmuted">Don't have an account? <Link href={buildPath('/register')} className="font-medium text-hprimary transition hover:opacity-90">Sign up</Link></p>
               </div>
 
 
             {/* <div className="rounded-3xl border border-slate-100 bg-slate-50 p-6 text-sm text-slate-600">
               <div className="flex items-start gap-3">
-                <Lock className="mt-0.5 h-5 w-5 text-primary-500" />
+                <Lock className="mt-0.5 h-5 w-5 text-hprimary-500" />
                 <div>
                   <p className="font-semibold text-slate-800">Secure by design</p>
                   <p>

package/src/screens/OrderDetailScreen.tsx

@@ -59,8 +59,8 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
     if (isLoading) {
         return (
             <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
-                <div className="w-16 h-16 border-4 border-primary-20 border-t-primary rounded-full animate-spin mb-4" />
-                <p className="text-muted font-medium animate-pulse">Retrieving order details...</p>
+                <div className="w-16 h-16 border-4 border-hprimary-20 border-t-primary rounded-full animate-spin mb-4" />
+                <p className="text-hmuted font-medium animate-pulse">Retrieving order details...</p>
             </div>
         );
     }
@@ -71,8 +71,8 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                 <div className="p-4 bg-red-50 rounded-full mb-4">
                     <AlertCircle className="w-10 h-10 text-red-500" />
                 </div>
-                <h1 className="text-xl font-bold text-secondary mb-2">Order Not Found</h1>
-                <p className="text-muted mb-6">We couldn't find the order you're looking for.</p>
+                <h1 className="text-xl font-bold text-hsecondary mb-2">Order Not Found</h1>
+                <p className="text-hmuted mb-6">We couldn't find the order you're looking for.</p>
                 <Button onClick={() => router.push(buildPath('/account'))}>
                     Back to Account
                 </Button>
@@ -106,7 +106,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
             <div className="container mx-auto px-4 pt-8 max-w-6xl">
                 <button
                     onClick={() => router.back()}
-                    className="group flex items-center gap-2 text-muted hover:text-secondary transition-colors mb-6"
+                    className="group flex items-center gap-2 text-hmuted hover:text-hsecondary transition-colors mb-6"
                 >
                     <div className="p-1.5 rounded-full bg-white shadow-xs group-hover:shadow-md transition-all">
                         <ChevronLeft className="w-4 h-4" />
@@ -117,16 +117,16 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                 <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
                     <div>
                         <div className="flex items-center gap-3 mb-2">
-                            <h1 className="text-3xl font-bold text-secondary">Order Details</h1>
+                            <h1 className="text-3xl font-bold text-hsecondary">Order Details</h1>
                             <Badge variant={getStatusVariant(status)}>{status}</Badge>
-                            <Badge variant="primary" className="bg-primary-100 text-primary-700 border-primary-200">
+                            <Badge variant="primary" className="bg-hprimary-100 text-hprimary-700 border-hprimary-200">
                                 {order.orderType || 'Pickup'}
                             </Badge>
                         </div>
-                        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted">
+                        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-hmuted">
                             <span className="flex items-center gap-1.5 font-medium">
                                 <span className="opacity-60 text-xs uppercase tracking-widest font-bold">ID:</span>
-                                <span className="text-secondary font-mono tracking-tight">#{id.toUpperCase()}</span>
+                                <span className="text-hsecondary font-mono tracking-tight">#{id.toUpperCase()}</span>
                             </span>
                             <span className="flex items-center gap-1.5 font-medium">
                                 <Calendar className="w-4 h-4 opacity-60" />
@@ -136,7 +136,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                     </div>
                     <div className="flex gap-3">
                         {order.payment?.hostedInvoiceUrl && (
-                            <Button size="sm" onClick={() => window.open(order.payment?.hostedInvoiceUrl, '_blank')} className="bg-accent hover:bg-accent-dark border-none">
+                            <Button size="sm" onClick={() => window.open(order.payment?.hostedInvoiceUrl, '_blank')} className="bg-haccent hover:bg-haccent-dark border-none">
                                 <ExternalLink className="w-4 h-4" />
                                 Payment Details
                             </Button>
@@ -156,10 +156,10 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                     >
                         <div className="p-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
                             <div className="flex items-center gap-2">
-                                <Package className="w-5 h-5 text-secondary" />
-                                <h2 className="font-bold text-secondary">Order Items</h2>
+                                <Package className="w-5 h-5 text-hsecondary" />
+                                <h2 className="font-bold text-hsecondary">Order Items</h2>
                             </div>
-                            <span className="text-xs font-bold bg-slate-200 text-muted px-2.5 py-1 rounded-full">
+                            <span className="text-xs font-bold bg-slate-200 text-hmuted px-2.5 py-1 rounded-full">
                                 {items.length} {items.length === 1 ? 'Product' : 'Products'}
                             </span>
                         </div>
@@ -179,19 +179,19 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                                     </div>
                                     <div className="flex-1 flex flex-col justify-between py-1">
                                         <div>
-                                            <h3 className="font-bold text-secondary text-lg group-hover:text-primary transition-colors leading-snug mb-1">
+                                            <h3 className="font-bold text-hsecondary text-lg group-hover:text-hprimary transition-colors leading-snug mb-1">
                                                 {item.productVariantData?.name}
                                             </h3>
-                                            <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted">
+                                            <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-hmuted">
                                                 <span className="flex items-center gap-1.5">
                                                     <span className="w-1.5 h-1.5 rounded-full bg-slate-300" />
-                                                    Quantity: <span className="text-secondary font-bold">{item.quantity}</span>
+                                                    Quantity: <span className="text-hsecondary font-bold">{item.quantity}</span>
                                                 </span>
                                             </div>
                                         </div>
                                         <div className="flex items-center justify-between">
-                                            <span className="text-muted text-sm">{formatPrice(item.productVariantData?.finalPrice || 0)} per unit</span>
-                                            <span className="font-black text-secondary">{formatPrice((item.productVariantData?.finalPrice || 0) * item.quantity)}</span>
+                                            <span className="text-hmuted text-sm">{formatPrice(item.productVariantData?.finalPrice || 0)} per unit</span>
+                                            <span className="font-black text-hsecondary">{formatPrice((item.productVariantData?.finalPrice || 0) * item.quantity)}</span>
                                         </div>
                                     </div>
                                 </div>
@@ -203,12 +203,12 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xs">
                             <div className="flex items-center gap-2 mb-4">
-                                <MapPin className="w-5 h-5 text-accent" />
-                                <h3 className="font-bold text-secondary">{isDelivery ? 'Shipping Address' : 'Pickup Location'}</h3>
+                                <MapPin className="w-5 h-5 text-haccent" />
+                                <h3 className="font-bold text-hsecondary">{isDelivery ? 'Shipping Address' : 'Pickup Location'}</h3>
                             </div>
                             {activeAddress ? (
-                                <div className="text-sm text-muted leading-relaxed">
-                                    <p className="font-bold text-secondary text-base mb-1">
+                                <div className="text-sm text-hmuted leading-relaxed">
+                                    <p className="font-bold text-hsecondary text-base mb-1">
                                         {activeAddress.name}
                                     </p>
                                     <p>{activeAddress.street1}</p>
@@ -217,16 +217,16 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                                     <p>{activeAddress.country}</p>
                                 </div>
                             ) : (
-                                <p className="text-sm text-muted italic">No address recorded</p>
+                                <p className="text-sm text-hmuted italic">No address recorded</p>
                             )}
                         </div>
                         <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xs">
                             <div className="flex items-center gap-2 mb-4">
-                                <CreditCard className="w-5 h-5 text-accent" />
-                                <h3 className="font-bold text-secondary">Payment Method</h3>
+                                <CreditCard className="w-5 h-5 text-haccent" />
+                                <h3 className="font-bold text-hsecondary">Payment Method</h3>
                             </div>
-                            <div className="text-sm text-muted leading-relaxed">
-                                <p className="font-bold text-secondary text-base mb-1">
+                            <div className="text-sm text-hmuted leading-relaxed">
+                                <p className="font-bold text-hsecondary text-base mb-1">
                                     {order.payment?.paymentMethod ? order.payment.paymentMethod.replace('_', ' ').toUpperCase() : 'N/A'}
                                 </p>
                                 <p className="flex items-center gap-2 mt-2">
@@ -250,7 +250,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                     <motion.div
                         initial={{ opacity: 0, x: 20 }}
                         animate={{ opacity: 1, x: 0 }}
-                        className="bg-secondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary-20 sticky top-8"
+                        className="bg-hsecondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary-20 sticky top-8"
                     >
                         <h2 className="text-xl font-bold mb-6 flex items-center gap-2">
                             Summary View
@@ -270,7 +270,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                                 <span className="font-bold text-white">{formatPrice(order.tax || 0)}</span>
                             </div>
                             {order.discountedAmount !== undefined && order.discountedAmount > 0 && (
-                                <div className="flex justify-between items-center text-primary">
+                                <div className="flex justify-between items-center text-hprimary">
                                     <span className="text-sm font-medium">Discount</span>
                                     <span className="font-bold">-{formatPrice(order.discountedAmount)}</span>
                                 </div>
@@ -292,7 +292,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                         {order.orderStatus === 'Pending' && (
                             <div className="p-4 bg-white/5 rounded-2xl border border-white/10 mb-8">
                                 <div className="flex items-start gap-3">
-                                    <Info className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+                                    <Info className="w-5 h-5 text-hprimary shrink-0 mt-0.5" />
                                     <div>
                                         <p className="text-xs font-bold mb-1">Order is processing</p>
                                         <p className="text-[11px] text-white/60 leading-relaxed">We've received your request and our pharmacists are reviewing it for safety and accuracy.</p>

package/src/screens/OrdersScreen.tsx

@@ -64,9 +64,9 @@ export function OrdersScreen() {
           className="space-y-6"
         >
           <div className="mb-8">
-            <h1 className="text-3xl font-black text-secondary tracking-tight">Order History</h1>
-            <p className="text-sm font-medium text-muted mt-1 flex items-center gap-2">
-              <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
+            <h1 className="text-3xl font-black text-hsecondary tracking-tight">Order History</h1>
+            <p className="text-sm font-medium text-hmuted mt-1 flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-haccent animate-pulse" />
               {filteredOrders.length} {filteredOrders.length === 1 ? 'record found' : 'records found'} for your account
             </p>
           </div>