hey-pharmacist-ecommerce 1.1.41 → 1.1.43

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>

package/src/screens/ProductDetailScreen.tsx

@@ -334,7 +334,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
       <div className="min-h-screen bg-slate-50">
         <div className="container mx-auto px-4 py-16">
           <div className="rounded-3xl bg-white p-10 text-center shadow-xs">
-            <Sparkles className="mx-auto h-10 w-10 text-primary-500" />
+            <Sparkles className="mx-auto h-10 w-10 text-hprimary-500" />
             <h1 className="mt-6 text-2xl font-semibold text-gray-900">Product not found</h1>
             <p className="mt-2 text-gray-600">
               It may have been removed or is temporarily unavailable. Discover other pharmacy
@@ -361,7 +361,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
         <div className="max-w-[1400px] mx-auto px-8 md:px-12">
           <button
             onClick={() => router.push(buildPath('/shop'))}
-            className="flex items-center gap-2 font-['Poppins',sans-serif] text-[13px] text-muted hover:text-primary transition-colors"
+            className="flex items-center gap-2 text-[13px] text-hmuted hover:text-hprimary transition-colors"
           >
             <ChevronLeft className="size-4" />
             Back to Shop
@@ -405,22 +405,22 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                       <div className="absolute top-6 left-6 flex flex-col gap-3">
                         {discount > 0 && (
-                          <div className="bg-[#E67E50] text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide">
+                          <div className="bg-hsecondary text-white rounded-full px-4 py-2">
+                            <span className="font-bold text-[12px] uppercase tracking-wide">
                               Save {discount}%
                             </span>
                           </div>
                         )}
                         {/* {product.bestseller && (
-                          <div className="bg-secondary text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                          <div className="bg-hsecondary text-white rounded-full px-4 py-2">
+                            <span className="font-semibold text-[11px] uppercase tracking-wide">
                               Bestseller
                             </span>
                           </div>
                         )}
                         {product.newArrival && (
-                          <div className="bg-primary text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                          <div className="bg-hprimary text-white rounded-full px-4 py-2">
+                            <span className="font-semibold text-[11px] uppercase tracking-wide">
                               New Arrival
                             </span>
                           </div>
@@ -437,8 +437,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                             type="button"
                             onClick={() => setActiveImageIndex(index)}
                             className={`relative aspect-square overflow-hidden rounded-lg border-2 transition-all ${activeImageIndex === index
-                              ? 'border-primary-50 ring-2 ring-primary-80 ring-offset-2 shadow-md'
-                              : 'border-slate-200 hover:border-primary-50'
+                              ? 'border-hprimary-50 ring-2 ring-hprimary-80 ring-offset-2 shadow-md'
+                              : 'border-slate-200 hover:border-hprimary-50'
                               }`}
                           >
                             <Image
@@ -461,10 +461,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
               <aside className="space-y-6 lg:sticky lg:top-24">
                 {/* Category Path */}
                 <div className="mb-4">
-                  <p className="font-['Poppins',sans-serif] text-[12px] text-primary uppercase tracking-wide font-medium mb-2">
+                  <p className="text-[12px] text-hprimary uppercase tracking-wide font-medium mb-2">
                     {product.brand} • {product.categoryIds?.[0]?.name || 'Uncategorized'}
                   </p>
-                  <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3">
+                  <h1 className="text-3xl font-semibold text-hsecondary tracking-[-1.5px] mb-3">
                     {selectedVariant?.name || product.name}
                   </h1>
                   {/* Rating */}
@@ -480,22 +480,22 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         />
                       ))}
                     </div>
-                    <span className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                    <span className="text-[14px] text-hmuted">
                       {reviewStats.averageRating} ({reviewStats.reviewCount} {reviewStats.reviewCount === 1 ? 'review' : 'reviews'})
                     </span>
                   </div>
                   {selectedVariant && (
                     <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
-                      <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
+                      <span className="font-bold text-[40px] text-hsecondary">
                         ${variantPrice.toFixed(2)}
                       </span>
                       {variantComparePrice && variantComparePrice > variantPrice && (
                         <>
-                          <span className="font-['Poppins',sans-serif] text-[24px] text-muted line-through">
+                          <span className="text-[24px] text-hmuted line-through">
                             ${variantComparePrice.toFixed(2)}
                           </span>
-                          <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
+                          <div className="px-3 py-1 rounded-full bg-hsecondary/10">
+                            <span className="font-semibold text-[13px] text-hsecondary">
                               Save ${formatPrice(variantComparePrice - variantPrice)}
                             </span>
                           </div>
@@ -510,28 +510,28 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         {selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK ? (
                           <>
                             <div className="size-3 rounded-full bg-red-500" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-red-600 font-medium">
+                            <span className="text-[13px] text-red-600 font-medium">
                               Out of Stock
                             </span>
                           </>
                         ) : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.LOWSTOCK || selectedVariant.inventoryCount <= 10 ? (
                           <>
-                            <div className="size-3 rounded-full bg-primary animate-pulse" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-primary font-medium">
+                            <div className="size-3 rounded-full bg-hprimary animate-pulse" />
+                            <span className="text-[13px] text-hprimary font-medium">
                               Only {selectedVariant.inventoryCount} left in stock - Order soon!
                             </span>
                           </>
                         ) : (
                           <>
                             <div className="size-3 rounded-full bg-green-500" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium">
+                            <span className="text-[13px] text-green-600 font-medium">
                               In Stock
                             </span>
                           </>
                         )}
 
                       </div>
-                      <p className="font-['Poppins',sans-serif] text-[12px] text-muted">
+                      <p className="text-[12px] text-hmuted">
                         SKU: {selectedVariant?.sku || product?.sku}
                       </p>
                     </div>
@@ -540,7 +540,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Description */}
                   {product.description && (
                     <div
-                      className="font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.7] mb-8 max-w-full overflow-hidden break-words"
+                      className="text-[14px] text-hmuted leading-[1.7] mb-8 max-w-full overflow-hidden break-words"
                       dangerouslySetInnerHTML={{ __html: product.description }}
                     />
                   )}
@@ -548,7 +548,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Variant Selector with Images */}
                   {product?.variants && product.variants.length > 0 && (
                     <div className="mb-6">
-                      <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
+                      <h3 className="font-semibold text-[14px] text-hsecondary mb-3">
                         Select Variant
                       </h3>
                       <div className="flex flex-wrap gap-3">
@@ -564,11 +564,11 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                               type="button"
                               onClick={() => handleVariantSelect(variant)}
                               className={`flex items-start gap-3 px-4 py-2.5 rounded-xl border-2 transition-all ${isSelected
-                                ? 'border-primary bg-primary-5'
-                                : 'border-gray-200 hover:border-primary-50'
+                                ? 'border-hprimary bg-hprimary-5'
+                                : 'border-gray-200 hover:border-hprimary-50'
                                 }`}
                             >
-                              <div className={`relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-primary' : 'border-slate-200'}`}>
+                              <div className={`relative h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 ${isSelected ? 'border-hprimary' : 'border-slate-200'}`}>
                                 <Image
                                   src={variantImage}
                                   alt={variant.name || 'Variant image'}
@@ -578,7 +578,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                                 />
                               </div>
                               <div className="flex-1">
-                                <p className={`text-start text-sm font-medium ${isSelected ? 'text-secondary' : 'text-slate-900'}`}>
+                                <p className={`text-start text-sm font-medium ${isSelected ? 'text-hsecondary' : 'text-slate-900'}`}>
                                   {variant.name}
                                 </p>
                                 {variant.sku && (
@@ -586,7 +586,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                                 )}
                               </div>
                               {isSelected && (
-                                <Check className="h-5 w-5 text-secondary shrink-0" />
+                                <Check className="h-5 w-5 text-hsecondary shrink-0" />
                               )}
                             </button>
                           );
@@ -598,7 +598,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                   {/* Quantity Selector */}
                   <div className="mb-8">
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary mb-3">
+                    <h3 className="font-semibold text-[14px] text-hsecondary mb-3">
                       Quantity
                     </h3>
                     <div className="flex items-center gap-3">
@@ -608,18 +608,18 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           type="button"
                           onClick={() => setQuantity((current) => Math.max(1, current - 1))}
 
-                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors"
+                          className="font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors"
                           aria-label="Increase quantity"
                         >
                           -
                         </button>
-                        <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary min-w-[30px] text-center">
+                        <span className="font-semibold text-[16px] text-hsecondary min-w-[30px] text-center">
                           {quantity}
                         </span>
                         <button
                           onClick={() => setQuantity(Math.min(selectedVariant?.inventoryCount || product.inventoryCount || 999, quantity + 1))}
                           disabled={quantity >= (selectedVariant?.inventoryCount || product.inventoryCount || 0)}
-                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary hover:text-primary transition-colors disabled:opacity-50"
+                          className="font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors disabled:opacity-50"
                         >
                           +
                         </button>
@@ -635,7 +635,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Action Buttons */}
                   <div className="flex flex-col sm:flex-row gap-3 mb-8">
                     <button
-                      className="flex-1 font-['Poppins',sans-serif] font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="flex-1 font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-hsecondary text-white hover:bg-hsecondary/80 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                       onClick={handleAddToCart}
                       disabled={!selectedVariant || selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK || isAddingToCart}
                     >
@@ -660,64 +660,64 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       )
                       }
                     </button>
-                    <button className="sm:w-auto px-6 py-4 rounded-full border-2 border-primary hover:bg-primary-5 transition-all flex items-center justify-center"
+                    <button className="sm:w-auto px-6 py-4 rounded-full border-2 border-hprimary hover:bg-hprimary-5 transition-all flex items-center justify-center"
                       onClick={handleToggleFavorite}>
-                      <Heart className={`h-4 w-4  ${isFavorited ? 'fill-red-500 text-red-500' : 'text-primary'}`} />
+                      <Heart className={`h-4 w-4  ${isFavorited ? 'fill-red-500 text-red-500' : 'text-hprimary'}`} />
                     </button>
                   </div>
 
                 </div>
 
                 {/* Benefits */}
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-secondary/5 to-secondary/5 rounded-[24px]">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-hsecondary/5 to-hsecondary/5 rounded-[24px]">
                   <div className="flex items-start gap-3">
                     <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                      <Truck className="size-5 text-primary" />
+                      <Truck className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Free Shipping
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="text-[11px] text-hmuted">
                         On all orders
                       </p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3">
                     <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                      <RotateCcw className="size-5 text-primary" />
+                      <RotateCcw className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Easy Returns
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="text-[11px] text-hmuted">
                         30-day return policy
                       </p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3">
                     <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                      <Shield className="size-5 text-primary" />
+                      <Shield className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Secure Checkout
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="text-[11px] text-hmuted">
                         Safe & protected
                       </p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3">
                     <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
-                      <Package className="size-5 text-primary" />
+                      <Package className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Quality Guaranteed
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="text-[11px] text-hmuted">
                         Premium materials
                       </p>
                     </div>
@@ -734,9 +734,9 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   <button
                     key={tab}
                     onClick={() => setActiveTab(tab)}
-                    className={`font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab
-                      ? 'text-primary border-b-2 border-primary -mb-0.5'
-                      : 'text-muted hover:text-primary'
+                    className={`font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab
+                      ? 'text-hprimary border-b-2 border-hprimary -mb-0.5'
+                      : 'text-hmuted hover:text-hprimary'
                       }`}
                   >
                     {tab.charAt(0).toUpperCase() + tab.slice(1)}
@@ -747,29 +747,29 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
               <div className="bg-white rounded-[24px] p-8 border-2 border-gray-100">
                 {activeTab === 'description' && (
                   <div>
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-4">
+                    <h3 className="font-semibold text-hsecondary mb-4">
                       Product Description
                     </h3>
                     <div
-                      className="font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.8] mb-4 max-w-full overflow-hidden break-words"
+                      className="text-[14px] text-hmuted leading-[1.8] mb-4 max-w-full overflow-hidden break-words"
                       dangerouslySetInnerHTML={{ __html: product.description }}
                     />
 
                     <div className="mt-6">
-                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
+                      <h4 className="font-semibold text-[13px] text-hsecondary mb-3">
                         Last updated:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                      <p className="text-[14px] text-hmuted">
                         {lastUpdatedLabel}
                       </p>
                     </div>
 
                     {/* shipped from */}
                     <div className="mt-6">
-                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
+                      <h4 className="font-semibold text-[13px] text-hsecondary mb-3">
                         Shipped from:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                      <p className="text-[14px] text-hmuted">
                         Local pharmacy distribution center
                       </p>
                     </div>
@@ -786,7 +786,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
             {/* Related Products */}
             {relatedProducts.length > 0 && (
               <div>
-                <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-8 text-2xl">
+                <h2 className="font-semibold text-hsecondary mb-8 text-2xl">
                   You May Also Like
                 </h2>
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">