hey-pharmacist-ecommerce 1.1.41 → 1.1.42

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 font-['Poppins',sans-serif] text-[13px] text-hmuted hover:text-hprimary transition-colors"
           >
             <ChevronLeft className="size-4" />
             Back to Shop
@@ -412,14 +412,14 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           </div>
                         )}
                         {/* {product.bestseller && (
-                          <div className="bg-secondary text-white rounded-full px-4 py-2">
+                          <div className="bg-hsecondary text-white rounded-full px-4 py-2">
                             <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
                               Bestseller
                             </span>
                           </div>
                         )}
                         {product.newArrival && (
-                          <div className="bg-primary text-white rounded-full px-4 py-2">
+                          <div className="bg-hprimary text-white rounded-full px-4 py-2">
                             <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
                               New Arrival
                             </span>
@@ -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="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] font-semibold text-hsecondary tracking-[-1.5px] mb-3">
                     {selectedVariant?.name || product.name}
                   </h1>
                   {/* Rating */}
@@ -480,7 +480,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         />
                       ))}
                     </div>
-                    <span className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                    <span className="font-['Poppins',sans-serif] text-[14px] text-hmuted">
                       {reviewStats.averageRating} ({reviewStats.reviewCount} {reviewStats.reviewCount === 1 ? 'review' : 'reviews'})
                     </span>
                   </div>
@@ -491,7 +491,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       </span>
                       {variantComparePrice && variantComparePrice > variantPrice && (
                         <>
-                          <span className="font-['Poppins',sans-serif] text-[24px] text-muted line-through">
+                          <span className="font-['Poppins',sans-serif] text-[24px] text-hmuted line-through">
                             ${variantComparePrice.toFixed(2)}
                           </span>
                           <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
@@ -516,8 +516,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           </>
                         ) : 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="font-['Poppins',sans-serif] text-[13px] text-hprimary font-medium">
                               Only {selectedVariant.inventoryCount} left in stock - Order soon!
                             </span>
                           </>
@@ -531,7 +531,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         )}
 
                       </div>
-                      <p className="font-['Poppins',sans-serif] text-[12px] text-muted">
+                      <p className="font-['Poppins',sans-serif] 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="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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-['Poppins',sans-serif] font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors disabled:opacity-50"
                         >
                           +
                         </button>
@@ -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-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
                         Free Shipping
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
                         Easy Returns
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
                         Secure Checkout
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
                         Quality Guaranteed
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-muted">
+                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
                         Premium materials
                       </p>
                     </div>
@@ -735,8 +735,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                     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'
+                      ? '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-['Poppins',sans-serif] 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="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
                         Last updated:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                      <p className="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
                         Shipped from:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-muted">
+                      <p className="font-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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">

package/src/screens/ProfileScreen.tsx

@@ -98,8 +98,8 @@ export default function AccountPage() {
         <div className="container mx-auto px-4 py-4">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-2xl font-semibold text-secondary">My Account</h1>
-              <p className="text-sm text-muted">
+              <h1 className="text-2xl font-semibold text-hsecondary">My Account</h1>
+              <p className="text-sm text-hmuted">
                 Manage your profile, orders, and preferences
               </p>
             </div>

package/src/screens/RegisterScreen.tsx

@@ -98,9 +98,9 @@ export function RegisterScreen() {
         >
           <div className="w-full max-w-xl space-y-10 text-center">
             <div className="space-y-2">
-              <UserPlus strokeWidth={2} className='h-16 w-16 mx-auto text-white rounded-full bg-primary m-2 mb-4 px-4' />
-              <h2 className="text-4xl text-secondary">Create Your Account</h2>
-              <p className="text-sm text-muted">Join Holmdel Pharmacy Care for convenient healthcare access
+              <UserPlus strokeWidth={2} className='h-16 w-16 mx-auto text-white rounded-full bg-hprimary m-2 mb-4 px-4' />
+              <h2 className="text-4xl text-hsecondary">Create Your Account</h2>
+              <p className="text-sm text-hmuted">Join Holmdel Pharmacy Care for convenient healthcare access
               </p>
             </div>
 
@@ -113,7 +113,7 @@ export function RegisterScreen() {
             >
               <div className="grid gap-4 md:grid-cols-2 text-start">
                 <div>
-                  <h2 className="text-sm text-secondary mb-3">First name <span className='text-primary-500'>*</span></h2>
+                  <h2 className="text-sm text-hsecondary mb-3">First name <span className='text-hprimary-500'>*</span></h2>
                   <Input
                     placeholder="Alex"
                     {...register('firstname')}
@@ -121,7 +121,7 @@ export function RegisterScreen() {
                   />
                 </div>
                 <div>
-                  <h2 className="text-sm text-secondary mb-3">Last name <span className='text-primary-500'>*</span></h2>
+                  <h2 className="text-sm text-hsecondary mb-3">Last name <span className='text-hprimary-500'>*</span></h2>
                   <Input
                     placeholder="Morgan"
                     {...register('lastname')}
@@ -130,7 +130,7 @@ export function RegisterScreen() {
                 </div>
               </div>
               <div>
-                <h2 className="text-sm text-secondary mb-3">Email Address <span className='text-primary-500'>*</span></h2>
+                <h2 className="text-sm text-hsecondary mb-3">Email Address <span className='text-hprimary-500'>*</span></h2>
                 <Input
                   type="email"
                   placeholder="you@example.com"
@@ -139,7 +139,7 @@ export function RegisterScreen() {
                 />
               </div>
               <div>
-                <h2 className="text-sm text-secondary mb-3">Phone Number</h2>
+                <h2 className="text-sm text-hsecondary mb-3">Phone Number</h2>
                 <Input
                   type="tel"
                   placeholder="+1 (555) 123-4567"
@@ -149,7 +149,7 @@ export function RegisterScreen() {
               </div>
               <div className="relative">
 
-                <h2 className="text-sm text-secondary mb-3">Password <span className='text-primary-500'>*</span></h2>
+                <h2 className="text-sm text-hsecondary mb-3">Password <span className='text-hprimary-500'>*</span></h2>
                 <Input
                   type={showPassword ? 'text' : 'password'}
                   placeholder="••••••••"
@@ -165,7 +165,7 @@ export function RegisterScreen() {
                 </button>
               </div>
               <div className="relative">
-                <h2 className="text-sm text-secondary mb-3">Confirm Password <span className='text-primary-500'>*</span></h2>
+                <h2 className="text-sm text-hsecondary mb-3">Confirm Password <span className='text-hprimary-500'>*</span></h2>
                 <Input
                   type={showConfirmPassword ? 'text' : 'password'}
                   placeholder="••••••••"
@@ -182,16 +182,16 @@ export function RegisterScreen() {
               </div>
 
               <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4 text-sm text-slate-600">
-                <Shield strokeWidth={2} className="mt-0.5 h-8 w-8 text-primary" />
+                <Shield strokeWidth={2} className="mt-0.5 h-8 w-8 text-hprimary" />
                 <span>
                   By creating an account, you agree to our{' '}
-                  <Link href={buildPath('/terms')} className="font-semibold text-primary hover:opacity-70">
+                  <Link href={buildPath('/terms')} className="font-semibold text-hprimary hover:opacity-70">
                     Terms of Service
                   </Link>{' '}
                   and{' '}
                   <Link
                     href={buildPath('/privacy')}
-                    className="font-semibold text-primary hover:opacity-70"
+                    className="font-semibold text-hprimary hover:opacity-70"
                   >
                     Privacy Policy
                   </Link>
@@ -202,7 +202,7 @@ export function RegisterScreen() {
               <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 ? 'Creating account...' : 'Create my account'}
               </button>
@@ -210,7 +210,7 @@ export function RegisterScreen() {
 
             {/* <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">
-                <Heart className="mt-0.5 h-5 w-5 text-primary-500" />
+                <Heart className="mt-0.5 h-5 w-5 text-hprimary-500" />
                 <div>
                   <p className="font-semibold text-slate-800">Members love us</p>
                   <p>
@@ -222,7 +222,7 @@ export function RegisterScreen() {
             </div> */}
 
             <div className="mt-4">
-              <p className="text-muted">Already have an account? <Link href={buildPath('/login')} className="font-medium text-primary transition hover:opacity-90">Sign in</Link></p>
+              <p className="text-hmuted">Already have an account? <Link href={buildPath('/login')} className="font-medium text-hprimary transition hover:opacity-90">Sign in</Link></p>
             </div>
           </div>
         </motion.section>

package/src/screens/ResetPasswordScreen.tsx

@@ -107,10 +107,10 @@ export function ResetPasswordScreen() {
             <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"
+                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">Reset Password</h2>
-              <p className="text-sm text-muted">
+              <h2 className="text-4xl text-hsecondary">Reset Password</h2>
+              <p className="text-sm text-hmuted">
                 Enter your new password below to reset your account password.
               </p>
             </div>
@@ -134,16 +134,16 @@ export function ResetPasswordScreen() {
                 </div>
               )}
 
-              <div className="relative text-start text-secondary">
-                <h2 className="text-sm text-secondary mb-3">
-                  New Password <span className="text-primary-500">*</span>
+              <div className="relative text-start text-hsecondary">
+                <h2 className="text-sm text-hsecondary mb-3">
+                  New Password <span className="text-hprimary-500">*</span>
                 </h2>
                 <Input
                   type={showPassword ? 'text' : 'password'}
                   placeholder="Enter new password (min. 8 characters)"
                   {...register('newPassword')}
                   error={errors.newPassword?.message}
-                  className="text-secondary"
+                  className="text-hsecondary"
                 />
                 <button
                   type="button"
@@ -154,16 +154,16 @@ export function ResetPasswordScreen() {
                 </button>
               </div>
 
-              <div className="relative text-start text-secondary">
-                <h2 className="text-sm text-secondary mb-3">
-                  Confirm Password <span className="text-primary-500">*</span>
+              <div className="relative text-start text-hsecondary">
+                <h2 className="text-sm text-hsecondary mb-3">
+                  Confirm Password <span className="text-hprimary-500">*</span>
                 </h2>
                 <Input
                   type={showConfirmPassword ? 'text' : 'password'}
                   placeholder="Re-enter new password"
                   {...register('confirmPassword')}
                   error={errors.confirmPassword?.message}
-                  className="text-secondary"
+                  className="text-hsecondary"
                 />
                 <button
                   type="button"
@@ -181,20 +181,20 @@ export function ResetPasswordScreen() {
               <button
                 type="submit"
                 disabled={isSubmitting || !token}
-                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 ? 'Resetting Password...' : 'Reset Password'}
               </button>
 
               <div className="flex items-center gap-2 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
-                <ShieldCheck className="h-4 w-4 text-primary-600" />
+                <ShieldCheck className="h-4 w-4 text-hprimary-600" />
                 Use a strong password that you haven't used elsewhere.
               </div>
 
               <div className="pt-4 border-t border-slate-200">
                 <Link
                   href={buildPath('/login')}
-                  className="text-sm font-medium text-primary transition hover:opacity-80"
+                  className="text-sm font-medium text-hprimary transition hover:opacity-80"
                 >
                   Back to login
                 </Link>

package/src/screens/SearchResultsScreen.tsx

@@ -214,7 +214,7 @@ export default function SearchPage() {
                             onFocus={handleInputFocus}
                             onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
                             placeholder="Search for products..."
-                            className="pl-10 pr-10 py-6 text-base rounded-lg border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                            className="pl-10 pr-10 py-6 text-base rounded-lg border-gray-300 focus:ring-2 focus:ring-hprimary-500 focus:border-hprimary-500"
                             autoComplete="off"
                         />
                         {searchInput && (
@@ -251,7 +251,7 @@ export default function SearchPage() {
                                                     onClick={() => handleSuggestionClick(suggestion)}
                                                     className="w-full text-left px-3 py-2.5 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2 group"
                                                 >
-                                                    <Search className="h-4 w-4 text-gray-400 group-hover:text-primary-500" />
+                                                    <Search className="h-4 w-4 text-gray-400 group-hover:text-hprimary-500" />
                                                     <span className="text-sm text-gray-700 group-hover:text-gray-900">
                                                         {suggestion}
                                                     </span>
@@ -274,7 +274,7 @@ export default function SearchPage() {
                                                     onClick={() => handleSuggestionClick(search)}
                                                     className="w-full text-left px-3 py-2.5 hover:bg-gray-50 rounded-md transition-colors flex items-center gap-2 group"
                                                 >
-                                                    <Clock className="h-4 w-4 text-gray-400 group-hover:text-primary-500" />
+                                                    <Clock className="h-4 w-4 text-gray-400 group-hover:text-hprimary-500" />
                                                     <span className="text-sm text-gray-700 group-hover:text-gray-900">
                                                         {search}
                                                     </span>
@@ -288,7 +288,7 @@ export default function SearchPage() {
                     </div>
                     <button
                         type="submit"
-                        className="mt-4 w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                        className="mt-4 w-full bg-hprimary-600 hover:bg-hprimary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                         disabled={!searchInput.trim()}
                     >
                         Search
@@ -346,7 +346,7 @@ export default function SearchPage() {
 
                             <Link
                                 href={buildPath('/shop')}
-                                className="px-6 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
+                                className="px-6 py-2.5 bg-hprimary-600 text-white rounded-lg hover:bg-hprimary-700 transition-colors font-medium"
                             >
                                 Browse All Products
                             </Link>
@@ -371,8 +371,8 @@ export default function SearchPage() {
                     </div>
                 ) : (
                     <div className="text-center py-12">
-                        <div className="w-16 h-16 bg-primary-50 rounded-full flex items-center justify-center mx-auto mb-4">
-                            <Search className="h-8 w-8 text-primary-500" />
+                        <div className="w-16 h-16 bg-hprimary-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <Search className="h-8 w-8 text-hprimary-500" />
                         </div>
                         <h3 className="text-xl font-semibold text-gray-900 mb-2">
                             Start Searching