hey-pharmacist-ecommerce 1.1.40 → 1.1.42

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-['Poppins',sans-serif] 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="font-['Poppins',sans-serif] 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 font-['Poppins',sans-serif] 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="font-['Poppins',sans-serif] 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 && (
@@ -714,8 +714,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           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'
+                          ? '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="font-['Poppins',sans-serif] 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">
@@ -749,8 +749,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                         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'
+                          ? '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="font-['Poppins',sans-serif] 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'
+                      ? '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="font-['Poppins',sans-serif] 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">
@@ -810,8 +810,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           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'
+                            ? '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 font-['Poppins',sans-serif] 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 font-['Poppins',sans-serif] 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>
@@ -928,7 +928,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       {/* Shop by Category Section */}
       <section className="py-8 bg-white">
         <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-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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={`font-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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={`font-['Poppins',sans-serif] 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-['Poppins',sans-serif] 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>

package/src/screens/WishlistScreen.tsx

@@ -166,19 +166,19 @@ export default function WishlistScreen() {
                                 <div className="max-w-lg text-center space-y-6">
                                     <div className="flex justify-center">
                                         <div className="rounded-full bg-gray-100 p-6">
-                                            <Heart className="h-12 w-12 text-secondary" />
+                                            <Heart className="h-12 w-12 text-hsecondary" />
                                         </div>
                                     </div>
                                     <div className="space-y-2">
-                                        <h2 className="text-2xl font-bold text-secondary">Sign in to see your favourites</h2>
-                                        <p className="text-muted">
+                                        <h2 className="text-2xl font-bold text-hsecondary">Sign in to see your favourites</h2>
+                                        <p className="text-hmuted">
                                             Create your curated shelf of products and we&apos;ll keep them ready whenever you return.
                                         </p>
                                     </div>
                                     <button
                                         type="button"
                                         onClick={() => router.push(buildPath('/login'))}
-                                        className="rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors hover:opacity-80"
+                                        className="rounded-xl border-2 border-hprimary bg-hprimary text-white px-6 py-3 text-sm font-medium transition-colors hover:opacity-80"
                                     >
                                         Sign In
                                     </button>
@@ -189,8 +189,8 @@ export default function WishlistScreen() {
                         {isAuthenticated && (
                             <>
                                 <div className="mb-6">
-                                    <h1 className="text-2xl font-bold text-secondary">Wishlist</h1>
-                                    <p className="text-sm text-muted mt-1">
+                                    <h1 className="text-2xl font-bold text-hsecondary">Wishlist</h1>
+                                    <p className="text-sm text-hmuted mt-1">
                                         {wishlistCount} {wishlistCount === 1 ? 'item' : 'items'} saved
                                         {wishlistCount > 0 && ` • Total value: ${formatPrice(totalValue)}`}
                                     </p>
@@ -199,19 +199,19 @@ export default function WishlistScreen() {
                                 <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between mb-6">
                                     <div className="space-y-1">
                                         {onlyInStock && (
-                                            <p className="text-sm text-muted">
+                                            <p className="text-sm text-hmuted">
                                                 Showing items ready to ship
                                             </p>
                                         )}
                                     </div>
 
                                     <div className="flex flex-wrap items-center gap-3">
-                                        <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary hover:text-secondary">
+                                        <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-hprimary hover:text-hsecondary">
                                             <input
                                                 type="checkbox"
                                                 checked={onlyInStock}
                                                 onChange={(event) => setOnlyInStock(event.target.checked)}
-                                                className="h-4 w-4 rounded-sm border-slate-300 text-secondary focus:ring-secondary"
+                                                className="h-4 w-4 rounded-sm border-slate-300 text-hsecondary focus:ring-hsecondary"
                                             />
                                             Only show in-stock
                                         </label>
@@ -236,7 +236,7 @@ export default function WishlistScreen() {
                                                 type="button"
                                                 onClick={() => setViewMode('grid')}
                                                 className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === 'grid'
-                                                    ? 'bg-white text-primary shadow-md'
+                                                    ? 'bg-white text-hprimary shadow-md'
                                                     : 'text-slate-600 hover:bg-white'
                                                     }`}
                                             >
@@ -246,7 +246,7 @@ export default function WishlistScreen() {
                                                 type="button"
                                                 onClick={() => setViewMode('list')}
                                                 className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition rounded-full ${viewMode === 'list'
-                                                    ? 'bg-white text-primary shadow-md'
+                                                    ? 'bg-white text-hprimary shadow-md'
                                                     : 'text-slate-600 hover:bg-white'
                                                     }`}
                                             >
@@ -283,12 +283,12 @@ export default function WishlistScreen() {
                                         <div className="text-center space-y-6 max-w-md">
                                             <div className="flex justify-center">
                                                 <div className="rounded-full bg-gray-100 p-6">
-                                                    <Heart className="h-12 w-12 text-secondary" />
+                                                    <Heart className="h-12 w-12 text-hsecondary" />
                                                 </div>
                                             </div>
                                             <div className="space-y-2">
-                                                <h2 className="text-2xl font-bold text-secondary">Your wishlist is empty</h2>
-                                                <p className="text-muted">
+                                                <h2 className="text-2xl font-bold text-hsecondary">Your wishlist is empty</h2>
+                                                <p className="text-hmuted">
                                                     Start adding products to your wishlist to see them here.
                                                 </p>
                                             </div>
@@ -296,7 +296,7 @@ export default function WishlistScreen() {
                                                 <button
                                                     type="button"
                                                     onClick={() => router.push(buildPath('/shop'))}
-                                                    className="rounded-xl border-2 border-secondary bg-secondary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
+                                                    className="rounded-xl border-2 border-hsecondary bg-hsecondary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
                                                 >
                                                     Discover products
                                                 </button>
@@ -357,15 +357,15 @@ export default function WishlistScreen() {
                                                             <div className="flex flex-1 flex-col gap-2">
                                                                 <div className="flex flex-wrap items-center justify-between gap-3">
                                                                     <div>
-                                                                        <h3 className="text-lg font-semibold text-secondary">
+                                                                        <h3 className="text-lg font-semibold text-hsecondary">
                                                                             {product.name}
                                                                         </h3>
-                                                                        <p className="text-sm text-muted">
+                                                                        <p className="text-sm text-hmuted">
                                                                             General wellness
                                                                         </p>
                                                                     </div>
                                                                     <div className="text-right">
-                                                                        <p className="text-lg font-bold text-primary">
+                                                                        <p className="text-lg font-bold text-hprimary">
                                                                             {formatPrice(product.summary?.minPrice ?? 0)}
                                                                         </p>
                                                                         {product.summary?.hasDiscount && (
@@ -391,7 +391,7 @@ export default function WishlistScreen() {
                                                                     <Button
                                                                         size="sm"
                                                                         onClick={() => router.push(buildPath(`/products/${product._id}`))}
-                                                                        className='bg-primary-90 text-white hover:bg-primary-70'
+                                                                        className='bg-hprimary-90 text-white hover:bg-hprimary-70'
                                                                     >
                                                                         View details
                                                                     </Button>
@@ -417,15 +417,15 @@ export default function WishlistScreen() {
                                         <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200 text-gray-500">
                                             <Package className="h-8 w-8" />
                                         </div>
-                                        <h3 className="mt-6 text-xl font-semibold text-secondary">
+                                        <h3 className="mt-6 text-xl font-semibold text-hsecondary">
                                             Nothing matches those filters
                                         </h3>
-                                        <p className="mt-2 max-w-md text-sm text-muted">
+                                        <p className="mt-2 max-w-md text-sm text-hmuted">
                                             Try showing out-of-stock items or adjust your sort order to revisit everything you&apos;ve saved.
                                         </p>
                                         <button
                                             type="button"
-                                            className="mt-6 rounded-xl border-2 border-primary bg-white px-6 py-3 text-sm font-medium text-secondary hover:opacity-80 transition-colors"
+                                            className="mt-6 rounded-xl border-2 border-hprimary bg-white px-6 py-3 text-sm font-medium text-hsecondary hover:opacity-80 transition-colors"
                                             onClick={() => setOnlyInStock(false)}
                                         >
                                             Show all saved products

package/src/styles/globals.css

@@ -4,50 +4,49 @@
 @source "../**/*.{js,jsx,ts,tsx,mdx}";
 
 @theme {
-  --color-primary-50: rgb(var(--color-primary-50));
-  --color-primary-100: rgb(var(--color-primary-100));
-  --color-primary-200: rgb(var(--color-primary-200));
-  --color-primary-300: rgb(var(--color-primary-300));
-  --color-primary-400: rgb(var(--color-primary-400));
-  --color-primary-500: rgb(var(--color-primary-500));
-  --color-primary-600: var(--color-primary-600, #E67E50);
-  ;
-  --color-primary-700: rgb(var(--color-primary-700));
-  --color-primary-800: rgb(var(--color-primary-800));
-  --color-primary-900: rgb(var(--color-primary-900));
-  --color-primary-950: rgb(var(--color-primary-950));
-  --color-primary: var(--color-primary, #5b9bd5);
-  --color-primary-dark: var(--color-primary-dark, #4a8ac4);
-  --color-primary-bg: var(--color-primary-bg, #e6ebf0);
-
-  --color-secondary-50: rgb(var(--color-secondary-50));
-  --color-secondary-100: rgb(var(--color-secondary-100));
-  --color-secondary-200: rgb(var(--color-secondary-200));
-  --color-secondary-300: rgb(var(--color-secondary-300));
-  --color-secondary-400: rgb(var(--color-secondary-400));
-  --color-secondary-500: rgb(var(--color-secondary-500));
-  --color-secondary-600: rgb(var(--color-secondary-600));
-  --color-secondary-700: rgb(var(--color-secondary-700));
-  --color-secondary-800: rgb(var(--color-secondary-800));
-  --color-secondary-900: rgb(var(--color-secondary-900));
-  --color-secondary-950: rgb(var(--color-secondary-950));
-  --color-secondary: var(--color-secondary, #2b4b7c);
-
-  --color-accent-50: rgb(var(--color-accent-50));
-  --color-accent-100: rgb(var(--color-accent-100));
-  --color-accent-200: rgb(var(--color-accent-200));
-  --color-accent-300: rgb(var(--color-accent-300));
-  --color-accent-400: rgb(var(--color-accent-400));
-  --color-accent-500: rgb(var(--color-accent-500));
-  --color-accent-600: rgb(var(--color-accent-600));
-  --color-accent-700: rgb(var(--color-accent-700));
-  --color-accent-800: rgb(var(--color-accent-800));
-  --color-accent-900: rgb(var(--color-accent-900));
-  --color-accent-950: rgb(var(--color-accent-950));
-  --color-accent: var(--color-accent, #e67e50);
-  --color-accent-dark: var(--color-accent-dark, #d66f45);
-
-  --color-muted: var(--color-text-muted, #676c80);
+  --color-hprimary-50: rgb(var(--hp-primary-50));
+  --color-hprimary-100: rgb(var(--hp-primary-100));
+  --color-hprimary-200: rgb(var(--hp-primary-200));
+  --color-hprimary-300: rgb(var(--hp-primary-300));
+  --color-hprimary-400: rgb(var(--hp-primary-400));
+  --color-hprimary-500: rgb(var(--hp-primary-500));
+  --color-hprimary-600: var(--hp-primary-600, #E67E50);
+  --color-hprimary-700: rgb(var(--hp-primary-700));
+  --color-hprimary-800: rgb(var(--hp-primary-800));
+  --color-hprimary-900: rgb(var(--hp-primary-900));
+  --color-hprimary-950: rgb(var(--hp-primary-950));
+  --color-hprimary: var(--hp-primary, #5b9bd5);
+  --color-hprimary-dark: var(--hp-primary-dark, #4a8ac4);
+  --color-hprimary-bg: var(--hp-primary-bg, #e6ebf0);
+
+  --color-hsecondary-50: rgb(var(--hp-secondary-50));
+  --color-hsecondary-100: rgb(var(--hp-secondary-100));
+  --color-hsecondary-200: rgb(var(--hp-secondary-200));
+  --color-hsecondary-300: rgb(var(--hp-secondary-300));
+  --color-hsecondary-400: rgb(var(--hp-secondary-400));
+  --color-hsecondary-500: rgb(var(--hp-secondary-500));
+  --color-hsecondary-600: rgb(var(--hp-secondary-600));
+  --color-hsecondary-700: rgb(var(--hp-secondary-700));
+  --color-hsecondary-800: rgb(var(--hp-secondary-800));
+  --color-hsecondary-900: rgb(var(--hp-secondary-900));
+  --color-hsecondary-950: rgb(var(--hp-secondary-950));
+  --color-hsecondary: var(--hp-secondary, #2b4b7c);
+
+  --color-haccent-50: rgb(var(--hp-accent-50));
+  --color-haccent-100: rgb(var(--hp-accent-100));
+  --color-haccent-200: rgb(var(--hp-accent-200));
+  --color-haccent-300: rgb(var(--hp-accent-300));
+  --color-haccent-400: rgb(var(--hp-accent-400));
+  --color-haccent-500: rgb(var(--hp-accent-500));
+  --color-haccent-600: rgb(var(--hp-accent-600));
+  --color-haccent-700: rgb(var(--hp-accent-700));
+  --color-haccent-800: rgb(var(--hp-accent-800));
+  --color-haccent-900: rgb(var(--hp-accent-900));
+  --color-haccent-950: rgb(var(--hp-accent-950));
+  --color-haccent: var(--hp-accent, #e67e50);
+  --color-haccent-dark: var(--hp-accent-dark, #d66f45);
+
+  --color-hmuted: var(--hp-text-muted, #676c80);
 
   --animate-fade-in: fadeIn 0.3s ease-in-out;
   --animate-slide-up: slideUp 0.3s ease-out;