hey-pharmacist-ecommerce 1.1.41 → 1.1.43

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

package/src/screens/ShopScreen.tsx

@@ -664,22 +664,22 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
         <div className={`lg:w-72 ${showFilters ? 'block rounded-full' : 'hidden lg:block'}`}>
           <div className="bg-white rounded-[24px] p-6 border-2 border-gray-100 sticky top-24">
-            <h3 className="font-['Poppins',sans-serif] font-semibold text-secondary">
+            <h3 className="font-semibold text-hsecondary">
               Filters
             </h3>
             {/* Search */}
             <div className="mb-6">
-              <label className="font-['Poppins',sans-serif] text-[12px] text-muted mb-2 block font-medium">
+              <label className="text-[12px] text-hmuted mb-2 block font-medium">
                 Search Products
               </label>
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted" />
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-hmuted" />
                 <input
                   type="text"
                   placeholder="Search..."
                   value={searchQuery}
                   onChange={handleInputChange}
-                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
+                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                 />
               </div>
             </div>
@@ -690,13 +690,13 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('category')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Category
                 </label>
                 {expandedFilterSections.category ? (
-                  <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
+                  <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
                 ) : (
-                  <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
+                  <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.category ? 'rotate-180' : ''}`} />
                 )}
               </button>
               {expandedFilterSections.category && (
@@ -713,9 +713,9 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           if (!isExpanded) toggleCategoryExpand(categoryId);
                           handleCategoryChange(categoryId);
                         }}
-                        className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
-                          ? 'bg-primary text-white shadow-lg'
-                          : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                        className={`w-full text-left px-4 py-3 rounded-xl text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
+                          ? 'bg-hprimary text-white shadow-lg'
+                          : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                           }`}
                       >
                         <Icon className="size-4" />
@@ -733,10 +733,10 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('brand')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Brand
                 </label>
-                <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.brand ? 'rotate-180' : ''}`} />
+                <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.brand ? 'rotate-180' : ''}`} />
               </button>
               {expandedFilterSections.brand && (
                 <div className="space-y-2">
@@ -748,9 +748,9 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       <button
                         key={brand}
                         onClick={() => handleBrandChange(brand)}
-                        className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all ${isSelected
-                          ? 'bg-primary text-white shadow-lg'
-                          : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                        className={`w-full text-left px-4 py-3 rounded-xl text-[13px] transition-all ${isSelected
+                          ? 'bg-hprimary text-white shadow-lg'
+                          : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                           }`}
                       >
                         {brand}
@@ -769,18 +769,18 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('availability')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Availability
                 </label>
-                <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.availability ? 'rotate-180' : ''}`} />
+                <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.availability ? 'rotate-180' : ''}`} />
               </button>
               {expandedFilterSections.availability && (
                 <div className="space-y-2">
                   <button
                     onClick={handleToggleStock}
-                    className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${inStockOnly
-                      ? 'bg-primary text-white shadow-lg'
-                      : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                    className={`w-full flex items-center justify-between px-4 py-3 rounded-xl text-[13px] transition-all border-2 ${inStockOnly
+                      ? 'bg-hprimary text-white shadow-lg'
+                      : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                       }`}
                   >
                     In Stock Only
@@ -794,10 +794,10 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('price')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-muted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Price Range
                 </label>
-                <ChevronDown className={`size-4 text-muted transition-transform ${expandedFilterSections.price ? 'rotate-180' : ''}`} />
+                <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.price ? 'rotate-180' : ''}`} />
               </button>
               {expandedFilterSections.price && (
                 <div className="space-y-2">
@@ -809,9 +809,9 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           type="button"
                           key={range.value}
                           onClick={() => handlePriceRangeSelect(range.value)}
-                          className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${isActive
-                            ? 'bg-primary text-white shadow-lg'
-                            : 'text-secondary hover:bg-gray-50 border-2 border-gray-100'
+                          className={`w-full flex items-center justify-between px-4 py-3 rounded-xl text-[13px] transition-all border-2 ${isActive
+                            ? 'bg-hprimary text-white shadow-lg'
+                            : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                             }`}
                         >
                           {range.label}
@@ -828,7 +828,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, min: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                     />
                     <Input
                       type="number"
@@ -838,14 +838,14 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, max: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-primary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-secondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                     />
                   </div>
                   <button
                     type="button"
                     onClick={applyCustomPrice}
                     disabled={!isCustomPriceDirty}
-                    className="w-full rounded-lg border border-primary bg-primary-10 px-4 py-2 text-sm font-medium text-primary transition hover:bg-primary-20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
+                    className="w-full rounded-lg border border-hprimary bg-hprimary-10 px-4 py-2 text-sm font-medium text-hprimary transition hover:bg-hprimary-20 disabled:cursor-not-allowed disabled:border-slate-200 disabled:text-slate-400"
                   >
                     Apply
                   </button>
@@ -878,7 +878,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
   return (
     <div className="min-h-screen bg-[#F9FAFB]">
       {/* Header Section */}
-      <section className="relative overflow-hidden bg-primary-bg py-16 md:py-24">
+      <section className="relative overflow-hidden bg-hprimary-bg py-16 md:py-24">
         <div className="container mx-auto px-4">
           <motion.div
             initial={{ opacity: 0, y: 24 }}
@@ -887,8 +887,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
           >
             {/* Orange icon and badge */}
             <div className="flex items-center justify-center gap-2 mb-4">
-              <Star className="h-5 w-5 text-primary fill-primary" />
-              <span className="text-sm font-semibold uppercase tracking-wider text-primary">
+              <Star className="h-5 w-5 text-hprimary fill-primary" />
+              <span className="text-sm font-semibold uppercase tracking-wider text-hprimary">
                 COMPLETE PHARMACY SHOP
               </span>
             </div>
@@ -916,7 +916,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   value={searchQuery}
                   onChange={handleInputChange}
                   onKeyDown={handleKeyDown}
-                  className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-hidden focus:ring-2 focus:ring-primary-500/30 disabled:opacity-50"
+                  className="flex h-16 w-full rounded-full border-0 bg-white px-5 pl-14 pr-5 text-base text-slate-900 placeholder-slate-400 shadow-lg focus:outline-hidden focus:ring-2 focus:ring-hprimary-500/30 disabled:opacity-50"
                   disabled={isSearching}
                 />
               </div>
@@ -926,9 +926,9 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       </section>
 
       {/* Shop by Category Section */}
-      <section className="py-8 bg-white">
+      <section className="py-8 bg-white/50">
         <div className="container mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-secondary mb-6">
+          <h2 className="text-2xl md:text-3xl font-semibold text-hsecondary mb-6">
             Shop by Category
           </h2>
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
@@ -936,23 +936,23 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
               onClick={handleClearCategory}
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${!categoryFilter ? 'bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105'
-                : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
+              className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${!categoryFilter ? 'bg-linear-to-br from-hprimary to-hsecondary text-white shadow-xl scale-105'
+                : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-hprimary'
                 }`}
             >
               <div className="relative">
                 <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${!categoryFilter
                   ? 'bg-white/20'
-                  : 'bg-linear-to-br from-primary-10 to-secondary-10 group-hover:scale-110'
+                  : 'bg-linear-to-br from-hprimary-10 to-hsecondary-10 group-hover:scale-110'
                   }`}>
-                  <Package className={`size-6 ${!categoryFilter ? 'text-white' : 'text-primary'
+                  <Package className={`size-6 ${!categoryFilter ? 'text-white' : 'text-hprimary'
                     }`} />
                 </div>
-                <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-secondary'
+                <h3 className={`font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-hsecondary'
                   }`}>
                   All Products
                 </h3>
-                <p className={`font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-muted'
+                <p className={`text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-hmuted'
                   }`}>
                   Browse Everything
                 </p>
@@ -971,23 +971,23 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ delay: index * 0.1 }}
                   onClick={() => handleCategoryChange(categoryId)}
-                  className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${isSelected ? 'bg-linear-to-br from-primary to-secondary text-white shadow-xl scale-105'
-                    : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-primary'
+                  className={`group relative overflow-hidden rounded-[24px] p-6 min-h-[180px] min-w-[170px] transition-all duration-300 ${isSelected ? 'bg-linear-to-br from-hprimary to-hsecondary text-white shadow-xl scale-105'
+                    : 'bg-linear-to-br from-gray-50 to-white hover:shadow-lg border-2 border-gray-100 hover:border-hprimary'
                     }`}
                 >
                   <div className="relative">
                     <div className={`size-12 rounded-full mb-3 mx-auto flex items-center justify-center transition-all ${isSelected
                       ? 'bg-white/20'
-                      : 'bg-linear-to-br from-primary-10 to-secondary-10 group-hover:scale-110'
+                      : 'bg-linear-to-br from-hprimary-10 to-hsecondary-10 group-hover:scale-110'
                       }`}>
-                      <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-primary'
+                      <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-hprimary'
                         }`} />
                     </div>
-                    <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-secondary'
+                    <h3 className={`font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-hsecondary'
                       }`}>
                       {category.name}
                     </h3>
-                    <p className={`font-['Poppins',sans-serif] text-[11px] ${isSelected ? 'text-white/80' : 'text-muted'
+                    <p className={`text-[11px] ${isSelected ? 'text-white/80' : 'text-hmuted'
                       }`}>
                       {category.description}
                     </p>
@@ -1027,7 +1027,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         onChange={(event) => {
                           setSortOption(event.target.value as SortOption);
                         }}
-                        className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-xs transition focus:outline-hidden focus:ring-1 focus:ring-secondary focus:border-primary"
+                        className="appearance-none rounded-full border border-gray-200 bg-white py-2.5 pl-10 pr-9 text-sm font-medium text-gray-700 shadow-xs transition focus:outline-hidden focus:ring-1 focus:ring-hsecondary focus:border-hprimary"
                       >
                         <option value="featured">Featured products</option>
                         <option value="price-low-high">Price: low to high</option>
@@ -1041,7 +1041,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         type="button"
                         onClick={() => setViewMode('grid')}
                         className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === 'grid'
-                          ? 'bg-white text-primary shadow-md'
+                          ? 'bg-white text-hprimary shadow-md'
                           : 'text-gray-500 hover:text-gray-700'
                           }`}
                         aria-pressed={viewMode === 'grid'}
@@ -1052,7 +1052,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         type="button"
                         onClick={() => setViewMode('list')}
                         className={`flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition ${viewMode === 'list'
-                          ? 'bg-white text-primary shadow-md'
+                          ? 'bg-white text-hprimary shadow-md'
                           : 'text-gray-500 hover:text-gray-700'
                           }`}
                         aria-pressed={viewMode === 'list'}
@@ -1070,10 +1070,10 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         key={chip.key}
                         type="button"
                         onClick={chip.onRemove}
-                        className="group flex items-center gap-2 rounded-full bg-primary-50 px-3 py-1.5 text-sm font-medium text-primary-700 transition hover:bg-primary-100"
+                        className="group flex items-center gap-2 rounded-full bg-hprimary-50 px-3 py-1.5 text-sm font-medium text-hprimary-700 transition hover:bg-hprimary-100"
                       >
                         {chip.label}
-                        <X className="h-4 w-4 text-primary-500 group-hover:text-primary-700" />
+                        <X className="h-4 w-4 text-hprimary-500 group-hover:text-hprimary-700" />
                       </button>
                     ))}
                     <button
@@ -1136,7 +1136,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                               </div>
 
                               <div className="flex-1 space-y-3">
-                                <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-primary-600">
+                                <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-hprimary-600">
                                   {product.tags?.slice(0, 3).map((tag: string) => (
                                     <span
                                       key={tag}
@@ -1150,12 +1150,12 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                   {product.name}
                                 </h3>
                                 <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
-                                  <span className="inline-flex items-center gap-2 font-medium text-primary-600">
+                                  <span className="inline-flex items-center gap-2 font-medium text-hprimary-600">
                                     <ShieldCheck className="h-4 w-4" />
                                     {displayInventoryCount > 0 ? 'In stock & ready to ship' : 'Restocking soon'}
                                   </span>
                                   <span className="inline-flex items-center gap-2">
-                                    <Clock className="h-4 w-4 text-primary-500" />
+                                    <Clock className="h-4 w-4 text-hprimary-500" />
                                     Added {new Date(product.createdAt).toLocaleDateString()}
                                   </span>
                                 </div>
@@ -1177,7 +1177,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                     event.stopPropagation();
                                     router.push(buildPath(`/products/${product._id}`));
                                   }}
-                                  className="w-full font-['Poppins',sans-serif] font-medium text-sm px-3 py-2 rounded-xl bg-secondary text-white hover:opacity-80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
+                                  className="w-full font-medium text-sm px-3 py-2 rounded-xl bg-hsecondary text-white hover:opacity-80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
                                 >
                                   View product
                                 </button>