hey-pharmacist-ecommerce 1.1.41 → 1.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -72,4 +72,4 @@
     "url": "https://github.com/yourusername/hey-pharmacist-customer/issues"
   },
   "homepage": "https://github.com/yourusername/hey-pharmacist-customer#readme"
-}
+}

package/src/components/AccountAddressesTab.tsx

@@ -91,11 +91,11 @@ export function AccountAddressesTab() {
             <div className="p-6 bg-white rounded-xl">
                 <div className="mb-6 flex items-center justify-between">
                     <div>
-                        <h3 className="text-lg font-semibold text-secondary">Saved Addresses</h3>
-                        <p className="text-sm text-muted">Manage your delivery and billing addresses</p>
+                        <h3 className="text-lg font-semibold text-hsecondary">Saved Addresses</h3>
+                        <p className="text-sm text-hmuted">Manage your delivery and billing addresses</p>
                     </div>
                     <button
-                        className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-secondary text-white text-sm'
+                        className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-hsecondary text-white text-sm'
                         onClick={() => {
                             setEditingAddress(undefined);
                             setIsAddressModalOpen(true);
@@ -128,8 +128,8 @@ export function AccountAddressesTab() {
                                 <div className="mb-3">
                                     <div className='justify-between flex items-center'>
                                         <div className="flex items-center gap-x-2">
-                                            <MapPin className="h-4 w-4 text-secondary" />
-                                            <p className="font-semibold text-secondary">{address.name}</p>
+                                            <MapPin className="h-4 w-4 text-hsecondary" />
+                                            <p className="font-semibold text-hsecondary">{address.name}</p>
                                             {address.isDefault && (
                                                 <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-semibold text-green-700">
                                                     Default
@@ -142,7 +142,7 @@ export function AccountAddressesTab() {
                                                     setEditingAddress(address);
                                                     setIsAddressModalOpen(true);
                                                 }}
-                                                className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs font-medium text-muted transition hover:border-primary-300 hover:text-primary-600"
+                                                className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2 py-1 text-xs font-medium text-hmuted transition hover:border-hprimary-300 hover:text-hprimary-600"
                                             >
                                                 <Edit3 className="h-3 w-3" />
                                             </button>
@@ -164,14 +164,14 @@ export function AccountAddressesTab() {
                                             </button>
                                         </div>
                                     </div>
-                                    <p className="text-sm text-muted mt-1">
+                                    <p className="text-sm text-hmuted mt-1">
                                         {address.street1}
                                         {address.street2 && `, ${address.street2}`}
                                     </p>
-                                    <p className="text-sm text-muted">
+                                    <p className="text-sm text-hmuted">
                                         {address.city}, {address.state} {address.zip}
                                     </p>
-                                    <p className="text-sm text-muted">{address.country}</p>
+                                    <p className="text-sm text-hmuted">{address.country}</p>
                                     {address.phone && (
                                         <p className="text-sm text-slate-500 mt-1">{address.phone}</p>
                                     )}

package/src/components/AccountOrdersTab.tsx

@@ -69,11 +69,11 @@ export function AccountOrdersTab() {
                         <div className="flex items-start justify-between mb-4 pb-4 border-b border-slate-200">
                             <div className="flex items-center gap-3">
                                 <div>
-                                    <h3 className="text-base font-semibold text-secondary">
+                                    <h3 className="text-base font-semibold text-hsecondary">
                                         Order ORD-{order._id?.slice(-6).toUpperCase()}
                                     </h3>
                                     {/* Order Date */}
-                                    <p className="text-xs text-muted mb-4">
+                                    <p className="text-xs text-hmuted mb-4">
                                         Placed on {formatDate(order.createdAt || new Date(), 'long')}
                                     </p>
                                 </div>
@@ -89,8 +89,8 @@ export function AccountOrdersTab() {
                                 </Badge>
                             </div>
                             <div className="text-right">
-                                <p className="text-xs text-muted mb-1">Total Amount</p>
-                                <p className="text-lg font-bold text-secondary">
+                                <p className="text-xs text-hmuted mb-1">Total Amount</p>
+                                <p className="text-lg font-bold text-hsecondary">
                                     {formatPrice(order.grandTotal || 0)}
                                 </p>
                             </div>
@@ -117,19 +117,19 @@ export function AccountOrdersTab() {
                                                 />
                                             </div>
                                             <div className="flex-1 min-w-0">
-                                                <p className="font-medium text-secondary text-sm truncate">
+                                                <p className="font-medium text-hsecondary text-sm truncate">
                                                     {item.productVariantData?.name || 'Unknown Product'}
                                                 </p>
-                                                <p className="text-xs text-muted">Qty: {item.quantity}</p>
+                                                <p className="text-xs text-hmuted">Qty: {item.quantity}</p>
                                             </div>
-                                            <p className="font-semibold text-secondary text-sm">
+                                            <p className="font-semibold text-hsecondary text-sm">
                                                 {formatPrice(itemTotal)}
                                             </p>
                                         </div>
                                     );
                                 })
                             ) : (
-                                <p className="text-sm text-muted text-center py-2">No items found</p>
+                                <p className="text-sm text-hmuted text-center py-2">No items found</p>
                             )}
                         </div>
 
@@ -139,12 +139,12 @@ export function AccountOrdersTab() {
                                 <div className="flex items-center gap-2 bg-blue-50 rounded-lg p-3">
                                     <Truck className="h-4 w-4 text-blue-600" />
                                     <div className="flex-1">
-                                        <p className="text-xs text-muted">Tracking Number:</p>
-                                        <p className="text-sm font-medium text-secondary">
+                                        <p className="text-xs text-hmuted">Tracking Number:</p>
+                                        <p className="text-sm font-medium text-hsecondary">
                                             {order.trackingNumber}
                                         </p>
                                     </div>
-                                    <button className="text-xs text-primary-600 hover:text-primary-700 font-medium">
+                                    <button className="text-xs text-hprimary-600 hover:text-hprimary-700 font-medium">
                                         Track
                                     </button>
                                 </div>

package/src/components/AccountOverviewTab.tsx

@@ -34,7 +34,7 @@ export function AccountOverviewTab() {
             icon: Package,
             label: 'Total Orders',
             value: totalOrders,
-            color: 'bg-[#DBEAFE] text-[#5B9BD5]',
+            color: 'bg-hprimary-100 text-[#5B9BD5]',
         },
         {
             icon: CheckCircle,
@@ -72,7 +72,7 @@ export function AccountOverviewTab() {
                                     <Icon className="h-6 w-6" />
                                 </div>
                                 <div>
-                                    <p className="text-2xl font-bold text-secondary">{stat.value}</p>
+                                    <p className="text-2xl font-bold text-hsecondary">{stat.value}</p>
                                     <p className="text-sm text-slate-600">{stat.label}</p>
                                 </div>
                             </div>
@@ -84,10 +84,10 @@ export function AccountOverviewTab() {
             {/* Profile Information */}
             <div className="rounded-xl border border-slate-200 bg-white p-6">
                 <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-semibold text-secondary">Profile Information</h3>
+                    <h3 className="text-lg font-semibold text-hsecondary">Profile Information</h3>
                     <button
                         onClick={() => router.push(buildPath('/account/edit'))}
-                        className="flex items-center gap-1 text-sm text-primary-600 hover:text-primary-700"
+                        className="flex items-center gap-1 text-sm text-hprimary-600 hover:text-hprimary-700"
                     >
                         <Edit className="h-4 w-4" />
                         Edit
@@ -95,43 +95,43 @@ export function AccountOverviewTab() {
                 </div>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <User className="h-5 w-5 text-secondary" />
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
+                            <User className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>
-                            <p className="text-xs text-muted">Full Name</p>
-                            <p className="text-sm font-medium text-secondary">
+                            <p className="text-xs text-hmuted">Full Name</p>
+                            <p className="text-sm font-medium text-hsecondary">
                                 {user.firstname} {user.lastname}
                             </p>
                         </div>
                     </div>
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <Mail className="h-5 w-5 text-secondary" />
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
+                            <Mail className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>
-                            <p className="text-xs text-muted">E-mail Address</p>
-                            <p className="text-sm font-medium text-secondary">{user.email}</p>
+                            <p className="text-xs text-hmuted">E-mail Address</p>
+                            <p className="text-sm font-medium text-hsecondary">{user.email}</p>
                         </div>
                     </div>
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <Phone className="h-5 w-5 text-secondary" />
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
+                            <Phone className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>
-                            <p className="text-xs text-muted">Phone Number</p>
-                            <p className="text-sm font-medium text-secondary">
+                            <p className="text-xs text-hmuted">Phone Number</p>
+                            <p className="text-sm font-medium text-hsecondary">
                                 {user.phoneNumber || 'Not provided'}
                             </p>
                         </div>
                     </div>
                     <div className="flex items-start gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <MapPin className="h-5 w-5 text-secondary" />
+                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-hprimary-100">
+                            <MapPin className="h-5 w-5 text-hsecondary" />
                         </div>
                         <div>
-                            <p className="text-xs text-muted">Date of Birth</p>
-                            <p className="text-sm font-medium text-secondary">Not provided</p>
+                            <p className="text-xs text-hmuted">Date of Birth</p>
+                            <p className="text-sm font-medium text-hsecondary">Not provided</p>
                         </div>
                     </div>
                 </div>
@@ -140,14 +140,14 @@ export function AccountOverviewTab() {
             {/* Recent Orders */}
             <div className="rounded-xl border border-slate-200 bg-white p-6">
                 <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-semibold text-secondary">Recent Orders</h3>
+                    <h3 className="text-lg font-semibold text-hsecondary">Recent Orders</h3>
                     <button
                         onClick={() => {
                             // Switch to orders tab
                             const event = new CustomEvent('switchTab', { detail: 'orders' });
                             window.dispatchEvent(event);
                         }}
-                        className="text-sm text-primary-600 hover:text-primary-700"
+                        className="text-sm text-hprimary-600 hover:text-hprimary-700"
                     >
                         View All →
                     </button>
@@ -162,7 +162,7 @@ export function AccountOverviewTab() {
                         ))}
                     </div>
                 ) : recentOrders.length === 0 ? (
-                    <p className="text-sm text-muted text-center py-8">No orders yet</p>
+                    <p className="text-sm text-hmuted text-center py-8">No orders yet</p>
                 ) : (
                     <div className="space-y-3">
                         {recentOrders.map((order) => (
@@ -177,7 +177,7 @@ export function AccountOverviewTab() {
                                     </div>
                                     <div>
                                         <div className='flex items-center gap-2'>
-                                            <p className="text-sm font-medium text-secondary">
+                                            <p className="text-sm font-medium text-hsecondary">
                                                 ORD-{order._id?.slice(-6).toUpperCase()}
                                             </p>
                                             <Badge className='p-1 text-xs'
@@ -189,14 +189,14 @@ export function AccountOverviewTab() {
                                                 {order.orderStatus}
                                             </Badge>
                                         </div>
-                                        <p className="text-xs text-muted">
+                                        <p className="text-xs text-hmuted">
                                             {formatDate(order.createdAt || new Date(), 'short')}
                                         </p>
                                     </div>
                                 </div>
                                 <div className="flex items-center gap-3">
 
-                                    <p className="text-sm font-semibold text-secondary">
+                                    <p className="text-sm font-semibold text-hsecondary">
                                         {formatPrice(order.grandTotal || 0)}
                                     </p>
                                 </div>

package/src/components/AccountPaymentTab.tsx

@@ -82,8 +82,8 @@ export function AccountPaymentTab() {
                             className="flex items-center justify-between rounded-lg border border-slate-200 bg-white p-4 hover:shadow-md transition-shadow"
                         >
                             <div className="flex items-center gap-4">
-                                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-50">
-                                    <CreditCard className="h-6 w-6 text-primary-600" />
+                                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-hprimary-50">
+                                    <CreditCard className="h-6 w-6 text-hprimary-600" />
                                 </div>
                                 {/* <div>
                                     <div className="flex items-center gap-2">

package/src/components/AccountReviewsTab.tsx

@@ -76,7 +76,7 @@ export function AccountReviewsTab() {
         </div>
         <button
           onClick={() => router.push(buildPath('/reviews'))}
-          className="inline-flex items-center gap-2 px-4 py-2 border border-secondary text-secondary rounded-lg font-medium hover:bg-secondary/5 transition-colors text-sm"
+          className="inline-flex items-center gap-2 px-4 py-2 border border-hsecondary text-hsecondary rounded-lg font-medium hover:bg-hsecondary/5 transition-colors text-sm"
         >
           <MessageSquare className="size-4" />
           Write a Review

package/src/components/AccountSettingsTab.tsx

@@ -39,14 +39,14 @@ export function AccountSettingsTab() {
         <div className="p-6 space-y-6">
             <div className="rounded-2xl border border-slate-200 bg-white p-6">
                 <div className="flex items-center gap-2 mb-4">
-                    <Lock className="h-5 w-5 text-secondary" />
-                    <h3 className="text-lg font-semibold text-secondary">Security</h3>
+                    <Lock className="h-5 w-5 text-hsecondary" />
+                    <h3 className="text-lg font-semibold text-hsecondary">Security</h3>
                 </div>
                 <div className="space-y-3">
                     <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
                         <div>
-                            <p className="text-sm font-medium text-secondary">Change Password</p>
-                            <p className="text-xs text-muted">Update your account password</p>
+                            <p className="text-sm font-medium text-hsecondary">Change Password</p>
+                            <p className="text-xs text-hmuted">Update your account password</p>
                         </div>
                         <Button
                             variant="outline-solid"
@@ -58,8 +58,8 @@ export function AccountSettingsTab() {
                     </div>
                     {/* <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
                         <div>
-                            <p className="text-sm font-medium text-secondary">Two-Factor Authentication</p>
-                            <p className="text-xs text-muted">Add an extra layer of security</p>
+                            <p className="text-sm font-medium text-hsecondary">Two-Factor Authentication</p>
+                            <p className="text-xs text-hmuted">Add an extra layer of security</p>
                         </div>
                         <Button variant="outline-solid" size="sm">
                             Enable

package/src/components/AddressFormModal.tsx

@@ -178,11 +178,11 @@ export function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpd
           <button
             type="button"
             onClick={onClose}
-            className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors text-secondary text-sm'
+            className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors text-hsecondary text-sm'
           >
             Cancel
           </button>
-          <button type="submit" disabled={isSubmitting} className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-secondary text-white text-sm'>
+          <button type="submit" disabled={isSubmitting} className='flex flex-row items-center gap-2 px-6 py-2 border border-slate-200 rounded-xl text-slate-700 hover:opacity-80 transition-colors bg-hsecondary text-white text-sm'>
             {isSubmitting ? 'Adding Address...' : 'Add Address'}
           </button>
         </div>

package/src/components/CartItem.tsx

@@ -50,14 +50,12 @@ export function CartItem({ item }: CartItemProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, x: -100 }}
-      className="bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-secondary/30 transition-all duration-300"
+      className="bg-white border-2 border-gray-100 rounded-[24px] p-4 md:p-6 hover:border-hsecondary/30 transition-all duration-300"
     >
 
 
-      <div className="flex gap-4 pr-8">
-
-
-        <div className="w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
+      <div className="flex gap-3 md:gap-4">
+        <div className="w-20 h-20 md:w-28 md:h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
           <Image
             src={item.productVariantData.media[0]?.file || PLACEHOLDER_IMAGE_SRC}
             alt={item.productVariantData.name}
@@ -71,11 +69,11 @@ export function CartItem({ item }: CartItemProps) {
         <div className="flex-1 min-w-0">
           <div className="flex items-start justify-between gap-4 mb-3">
             <div className="flex-1 min-w-0">
-              <h3 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2">
+              <h3 className="font-semibold text-[#2B4B7C] mb-2">
                 {item.productVariantData.name}
               </h3>
               <div className="flex flex-wrap items-center gap-3">
-                <span className="font-['Poppins',sans-serif] text-[12px] text-[#676c80]">
+                <span className="text-[12px] text-[#676c80]">
                   Variant: <span className="font-medium text-[#2B4B7C]">{item.productVariantData.name}</span>
                 </span>
               </div>
@@ -98,34 +96,36 @@ export function CartItem({ item }: CartItemProps) {
           </div>
 
           {/* Quantity and Price */}
-          <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-auto">
             {/* Quantity Controls */}
-            <div className="flex items-center gap-3 bg-gray-50 rounded-full px-4 py-2">
+            <div className="flex items-center gap-3 bg-gray-50 rounded-full px-3 py-1.5 md:px-4 md:py-2 w-fit">
               <button
                 onClick={() => handleUpdateQuantity(item.quantity - 1)}
                 disabled={isUpdating || item.quantity <= 1}
                 className="p-1 hover:bg-white rounded-full transition-colors"
+                aria-label="Decrease quantity"
               >
-                <Minus className="size-4 text-[#2B4B7C]" />
+                <Minus className="size-3 md:size-4 text-[#2B4B7C]" />
               </button>
-              <span className="font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] min-w-[20px] text-center">
+              <span className="font-semibold text-[13px] md:text-[14px] text-[#2B4B7C] min-w-[20px] text-center">
                 {item.quantity}
               </span>
               <button
                 onClick={() => handleUpdateQuantity(item.quantity + 1)}
                 disabled={isUpdating || item.quantity >= (item.productVariantData.inventoryCount || 999)}
                 className="p-1 hover:bg-white rounded-full transition-colors"
+                aria-label="Increase quantity"
               >
-                <Plus className="size-4 text-[#2B4B7C]" />
+                <Plus className="size-3 md:size-4 text-[#2B4B7C]" />
               </button>
             </div>
 
             {/* Price */}
-            <div className="text-right">
-              <p className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary">
+            <div className="text-left sm:text-right">
+              <p className="font-bold text-[16px] md:text-[18px] text-hsecondary">
                 {formatPrice(itemTotal)}
               </p>
-              <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
+              <p className="text-[10px] md:text-[11px] text-[#676c80]">
                 {formatPrice(unitPrice)} each
               </p>
             </div>

package/src/components/FilterChips.tsx

@@ -76,7 +76,7 @@ export function FilterChips({
           <button
             type="button"
             onClick={() => onSelect('All')}
-            className="ml-auto text-xs text-primary-600 hover:text-primary-700 font-medium"
+            className="ml-auto text-xs text-hprimary-600 hover:text-hprimary-700 font-medium"
           >
             Clear
           </button>
@@ -94,8 +94,8 @@ export function FilterChips({
               className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${
                 isSelected
                   ? isPrimary
-                    ? 'border-primary-500 bg-primary-500 text-white shadow-xs'
-                    : 'border-secondary-500 bg-secondary-500 text-white shadow-xs'
+                    ? 'border-hprimary-500 bg-hprimary-500 text-white shadow-xs'
+                    : 'border-hsecondary-500 bg-hsecondary-500 text-white shadow-xs'
                   : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
               }`}
             >
@@ -113,8 +113,8 @@ export function FilterChips({
               className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all whitespace-nowrap ${
                 overflowFilters.includes(selected)
                   ? isPrimary
-                    ? 'border-primary-500 bg-primary-50 text-primary-700'
-                    : 'border-secondary-500 bg-secondary-50 text-secondary-700'
+                    ? 'border-hprimary-500 bg-hprimary-50 text-hprimary-700'
+                    : 'border-hsecondary-500 bg-hsecondary-50 text-hsecondary-700'
                   : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
               }`}
             >
@@ -145,8 +145,8 @@ export function FilterChips({
                           className={`flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium transition ${
                             isSelected
                               ? isPrimary
-                                ? 'bg-primary-500 text-white'
-                                : 'bg-secondary-500 text-white'
+                                ? 'bg-hprimary-500 text-white'
+                                : 'bg-hsecondary-500 text-white'
                               : 'text-slate-700 hover:bg-slate-100'
                           }`}
                         >

package/src/components/Footer.tsx

@@ -48,15 +48,15 @@ export function Footer() {
             </p>
             <div className="space-y-3">
               <div className="flex items-center gap-3">
-                <Mail className="w-5 h-5 text-primary-500" />
+                <Mail className="w-5 h-5 text-hprimary-500" />
                 <span>support@{config.storeName.toLowerCase().replace(/\s+/g, '')}.com</span>
               </div>
               <div className="flex items-center gap-3">
-                <Phone className="w-5 h-5 text-primary-500" />
+                <Phone className="w-5 h-5 text-hprimary-500" />
                 <span>+1 (555) 123-4567</span>
               </div>
               <div className="flex items-center gap-3">
-                <MapPin className="w-5 h-5 text-primary-500" />
+                <MapPin className="w-5 h-5 text-hprimary-500" />
                 <span>123 Store Street, City, Country</span>
               </div>
             </div>
@@ -70,7 +70,7 @@ export function Footer() {
                 <li key={link.href}>
                   <Link
                     href={link.href}
-                    className="hover:text-primary-500 transition-colors"
+                    className="hover:text-hprimary-500 transition-colors"
                   >
                     {link.label}
                   </Link>
@@ -87,7 +87,7 @@ export function Footer() {
                 <li key={link.href}>
                   <Link
                     href={link.href}
-                    className="hover:text-primary-500 transition-colors"
+                    className="hover:text-hprimary-500 transition-colors"
                   >
                     {link.label}
                   </Link>
@@ -104,7 +104,7 @@ export function Footer() {
                 <li key={link.href}>
                   <Link
                     href={link.href}
-                    className="hover:text-primary-500 transition-colors"
+                    className="hover:text-hprimary-500 transition-colors"
                   >
                     {link.label}
                   </Link>
@@ -124,19 +124,19 @@ export function Footer() {
           <div className="flex items-center gap-4">
             <a
               href="#"
-              className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
+              className="w-10 h-10 bg-gray-800 hover:bg-hprimary-600 rounded-full flex items-center justify-center transition-colors"
             >
               <Facebook className="w-5 h-5" />
             </a>
             <a
               href="#"
-              className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
+              className="w-10 h-10 bg-gray-800 hover:bg-hprimary-600 rounded-full flex items-center justify-center transition-colors"
             >
               <Twitter className="w-5 h-5" />
             </a>
             <a
               href="#"
-              className="w-10 h-10 bg-gray-800 hover:bg-primary-600 rounded-full flex items-center justify-center transition-colors"
+              className="w-10 h-10 bg-gray-800 hover:bg-hprimary-600 rounded-full flex items-center justify-center transition-colors"
             >
               <Instagram className="w-5 h-5" />
             </a>

package/src/components/Header.tsx

@@ -67,10 +67,10 @@ export function Header() {
               <Link
                 key={link.href}
                 href={link.href}
-                className="text-gray-700 hover:text-primary-600 font-medium transition-colors relative group"
+                className="text-gray-700 hover:text-hprimary-600 font-medium transition-colors relative group"
               >
                 {link.label}
-                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-primary-600 group-hover:w-full transition-all duration-300" />
+                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-hprimary-600 group-hover:w-full transition-all duration-300" />
               </Link>
             ))}
           </nav>
@@ -144,7 +144,7 @@ export function Header() {
                 )}
               </Link>
 
-              <Link href={buildPath('/cart')} className="relative p-2 text-gray-700 hover:text-primary-600 transition-colors">
+              <Link href={buildPath('/cart')} className="relative p-2 text-gray-700 hover:text-hprimary-600 transition-colors">
                 <ShoppingCart className="w-6 h-6" />
                 {cart?.cartBody?.items?.length && cart.cartBody?.items?.length > 0 ? (
                   <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
@@ -160,7 +160,7 @@ export function Header() {
                     onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                     className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-2 hover:bg-slate-50 transition-colors"
                   >
-                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700">
+                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-hprimary-100 text-xs font-semibold text-hprimary-700">
                       {getInitials(user?.firstname || '', user?.lastname || '')}
                     </div>
                     <ChevronDown className={`h-4 w-4 text-slate-400 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
@@ -176,7 +176,7 @@ export function Header() {
                       <div className="absolute right-0 top-full mt-2 w-56 rounded-lg border border-slate-200 bg-white shadow-lg z-20">
                         <div className="p-2">
                           <div className="px-3 py-2 border-b border-slate-200 mb-1">
-                            <p className="text-sm font-medium text-secondary truncate">
+                            <p className="text-sm font-medium text-hsecondary truncate">
                               {user?.firstname} {user?.lastname}
                             </p>
                             <p className="text-xs text-slate-500 truncate">{user?.email}</p>
@@ -206,7 +206,7 @@ export function Header() {
               ) : (
                 <Link
                   href={buildPath('/login')}
-                  className="hidden sm:block px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
+                  className="hidden sm:block px-4 py-2 bg-hprimary-600 text-white rounded-lg hover:bg-hprimary-700 transition-colors font-medium"
                 >
                   Sign In
                 </Link>
@@ -250,7 +250,7 @@ export function Header() {
                     <Link
                       href={buildPath('/login')}
                       onClick={() => setIsMobileMenuOpen(false)}
-                      className="px-4 py-3 text-primary-600 hover:bg-gray-50 rounded-lg font-medium"
+                      className="px-4 py-3 text-hprimary-600 hover:bg-gray-50 rounded-lg font-medium"
                     >
                       Sign In
                     </Link>

package/src/components/Notification.tsx

@@ -78,7 +78,7 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
             animate={{ opacity: 1, y: 0, scale: 1 }}
             exit={{ opacity: 0, x: 100, scale: 0.95 }}
             transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-            className={`relative bg-white rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
+            className={`relative bg-hprimary-50 rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
         >
             {/* Gradient accent bar */}
             <div className={`h-1 bg-linear-to-r ${config.gradient}`} />
@@ -96,11 +96,11 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
 
                 {/* Content */}
                 <div className="flex-1 min-w-0">
-                    <p className="font-['Poppins',sans-serif] font-semibold text-[14px] text-[#2B4B7C] mb-1">
+                    <p className="font-semibold text-[14px] text-[#2B4B7C] mb-1">
                         {notification.message}
                     </p>
                     {notification.description && (
-                        <p className="font-['Poppins',sans-serif] text-[12px] text-[#676c80] leading-relaxed">
+                        <p className="text-[12px] text-[#676c80] leading-relaxed">
                             {notification.description}
                         </p>
                     )}