hey-pharmacist-ecommerce 1.1.40 → 1.1.42

package/src/components/ProductCard.tsx

@@ -180,7 +180,7 @@ export function ProductCard({
   return (
     <>
       <motion.div
-        className="bg-white rounded-[16px] overflow-hidden border-2 border-gray-100 hover:border-secondary hover:shadow-lg transition-all duration-300 group h-full flex flex-col"
+        className="bg-white rounded-[16px] overflow-hidden border-2 border-gray-100 hover:border-hsecondary hover:shadow-lg transition-all duration-300 group h-full flex flex-col"
         whileHover={{ y: -4 }}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
@@ -239,7 +239,7 @@ export function ProductCard({
 
             </div>
             <div className="mb-1">
-              <p className="font-['Poppins',sans-serif] text-xs text-secondary uppercase tracking-wide font-medium">
+              <p className="font-['Poppins',sans-serif] text-xs text-hsecondary uppercase tracking-wide font-medium">
                 {product.brand}
               </p>
             </div>
@@ -274,7 +274,7 @@ export function ProductCard({
 
             {/* Price */}
             <div className="flex items-center gap-1.5 mb-3">
-              <span className="font-['Poppins',sans-serif] font-bold text-md text-primary-600">
+              <span className="font-['Poppins',sans-serif] font-bold text-md text-hprimary-600">
                 ${displayFinalPrice.toFixed(2)}
               </span>
               {displayIsDiscounted && (
@@ -304,8 +304,8 @@ export function ProductCard({
                       setIsImageLoaded(false);
                     }}
                     className={`relative w-8 h-8 rounded-full overflow-hidden border-2 transition-all ${selectedVariantId === variant.variantId
-                      ? 'border-primary-500 ring-2 ring-primary-200'
-                      : 'border-gray-200 hover:border-primary-300'
+                      ? 'border-hprimary-500 ring-2 ring-hprimary-200'
+                      : 'border-gray-200 hover:border-hprimary-300'
                       }`}
                     aria-label={`Select ${variant.variantName || 'variant'}`}
                   >
@@ -358,7 +358,7 @@ export function ProductCard({
               }
             }}
             disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId) || displayInventoryCount === 0}
-            className="w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-secondary text-white hover:bg-secondary/80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+            className="w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-hsecondary text-white hover:bg-hsecondary/80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
           >
             <ShoppingCart className="h-4 w-4" />
             {displayInventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}

package/src/components/QuickViewModal.tsx

@@ -74,10 +74,10 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
           {/* Header */}
           <div className="flex items-start justify-between mb-6">
             <div>
-              <p className="font-['Poppins',sans-serif] text-[11px] text-primary uppercase tracking-wide font-medium mb-2">
+              <p className="font-['Poppins',sans-serif] text-[11px] text-hprimary uppercase tracking-wide font-medium mb-2">
                 {product.brand}
               </p>
-              <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1px]">
+              <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary tracking-[-1px]">
                 {displayName}
               </h2>
 
@@ -88,13 +88,13 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                     <Star
                       key={i}
                       className={`size-4 ${i < Math.floor(product.summary?.averageRating || 0)
-                        ? 'text-accent fill-accent'
+                        ? 'text-haccent fill-accent'
                         : 'text-gray-300'
                         }`}
                     />
                   ))}
                 </div>
-                <span className="font-['Poppins',sans-serif] text-[13px] text-muted">
+                <span className="font-['Poppins',sans-serif] text-[13px] text-hmuted">
                   {product.summary?.averageRating || 0} ({product.summary?.reviewCount || 0} reviews)
                 </span>
               </div>
@@ -103,7 +103,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
               onClick={onClose}
               className="p-2 hover:bg-gray-100 rounded-full transition-colors"
             >
-              <X className="size-6 text-muted" />
+              <X className="size-6 text-hmuted" />
             </button>
           </div>
 
@@ -119,14 +119,14 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 {/* Badges */}
                 <div className="absolute top-4 left-4 flex flex-col gap-2">
                   {isDiscounted && (
-                    <div className="bg-accent text-white rounded-full px-3 py-1.5">
+                    <div className="bg-haccent text-white rounded-full px-3 py-1.5">
                       <span className="font-['Poppins',sans-serif] font-bold text-[11px] uppercase">
                         -{discountAmount}%
                       </span>
                     </div>
                   )}
                   {/* {product.bestseller && (
-                    <div className="bg-secondary text-white rounded-full px-3 py-1.5">
+                    <div className="bg-hsecondary text-white rounded-full px-3 py-1.5">
                       <span className="font-['Poppins',sans-serif] font-semibold text-[10px] uppercase">
                         Bestseller
                       </span>
@@ -141,7 +141,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                   {selectedVariant.media.map((image: any, index: any) => (
                     <div
                       key={index}
-                      className={`aspect-square rounded-xl overflow-hidden cursor-pointer transition-opacity ${selectedImageIndex === index ? 'ring-2 ring-primary' : 'bg-gray-50 hover:opacity-75'}`}
+                      className={`aspect-square rounded-xl overflow-hidden cursor-pointer transition-opacity ${selectedImageIndex === index ? 'ring-2 ring-hprimary' : 'bg-gray-50 hover:opacity-75'}`}
                       onClick={() => setSelectedImageIndex(index)}
                     >
                       <img
@@ -159,11 +159,11 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
             <div className="flex flex-col">
               {/* Price */}
               <div className="flex items-center gap-3 mb-4">
-                <span className="font-['Poppins',sans-serif] font-bold text-[32px] text-accent">
+                <span className="font-['Poppins',sans-serif] font-bold text-[32px] text-haccent">
                   ${displayPrice.toFixed(2)}
                 </span>
                 {isDiscounted && (
-                  <span className="font-['Poppins',sans-serif] text-[20px] text-muted line-through">
+                  <span className="font-['Poppins',sans-serif] text-[20px] text-hmuted line-through">
                     ${displayOriginalPrice.toFixed(2)}
                   </span>
                 )}
@@ -176,7 +176,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                     Out of Stock
                   </span>
                 ) : selectedVariant.inventoryCount <= 10 ? (
-                  <span className="font-['Poppins',sans-serif] text-[12px] text-primary font-medium flex items-center gap-1">
+                  <span className="font-['Poppins',sans-serif] text-[12px] text-hprimary font-medium flex items-center gap-1">
                     <Package className="size-3" />
                     Only {selectedVariant.inventoryCount} left in stock
                   </span>
@@ -190,14 +190,14 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
 
               {/* Description */}
               <div
-                className="font-['Poppins',sans-serif] text-[14px] text-muted leading-[1.7] mb-6 max-w-full overflow-hidden break-words"
+                className="font-['Poppins',sans-serif] text-[14px] text-hmuted leading-[1.7] mb-6 max-w-full overflow-hidden break-words"
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
 
               {/* Color Selection */}
               <div className="mb-6">
-                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
-                  Selected Variant: <span className="font-normal text-muted">{product.variants[selectedVariantIndex].name}</span>
+                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
+                  Selected Variant: <span className="font-normal text-hmuted">{product.variants[selectedVariantIndex].name}</span>
                 </h3>
                 <div className="flex flex-wrap gap-3">
                   {product.variants.map((variant: any, index: any) => (
@@ -209,8 +209,8 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                         setSelectedImageIndex(0); // Reset selected image index when variant changes
                       }}
                       className={`size-10 rounded-full border-2 transition-all ${selectedVariantIndex === index
-                        ? 'border-primary scale-110'
-                        : 'border-gray-200 hover:border-primary-50'
+                        ? 'border-hprimary scale-110'
+                        : 'border-gray-200 hover:border-hprimary-50'
                         }`}
                       style={{ backgroundColor: variant.colorHex }}
                       title={variant.color}
@@ -231,8 +231,8 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 <ul className="space-y-2">
                   {product.tags.slice(0, 3).map((feature: any, index: any) => (
                     <li key={index} className="flex items-start gap-2">
-                      <Check className="size-4 text-primary shrink-0 mt-0.5" />
-                      <span className="font-['Poppins',sans-serif] text-[12px] text-muted">
+                      <Check className="size-4 text-hprimary shrink-0 mt-0.5" />
+                      <span className="font-['Poppins',sans-serif] text-[12px] text-hmuted">
                         {feature}
                       </span>
                     </li>
@@ -242,7 +242,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
 
               {/* Quantity Selector */}
               <div className="mb-6">
-                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
+                <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
                   Quantity
                 </h3>
                 <div className="flex items-center gap-4">
@@ -251,7 +251,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                     disabled={quantity <= 1}
                     className="p-2 rounded-full border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    <Minus className="size-4 text-secondary" />
+                    <Minus className="size-4 text-hsecondary" />
                   </button>
                   <span className="w-8 text-center font-medium">{quantity}</span>
                   <button
@@ -259,7 +259,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                     disabled={quantity >= (selectedVariant.inventoryCount || 10)}
                     className="p-2 rounded-full border border-gray-200 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                    <Plus className="size-4 text-secondary" />
+                    <Plus className="size-4 text-hsecondary" />
                   </button>
                 </div>
               </div>
@@ -271,7 +271,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                   disabled={addedToCart || selectedVariant.inventoryCount === 0}
                   className={`w-full font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 ${addedToCart
                     ? 'bg-green-500 text-white'
-                    : 'bg-accent text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed'
+                    : 'bg-haccent text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed'
                     }`}
                 >
                   {isAddingToCart ? (
@@ -301,7 +301,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                       onClose();
                       // onNavigateToProduct?.(product._id || product.id);
                     }}
-                    className="w-full font-['Poppins',sans-serif] font-medium text-[13px] px-6 py-3 rounded-full bg-white text-secondary border-2 border-primary hover:bg-gray-50 transition-all flex items-center justify-center gap-2"
+                    className="w-full font-['Poppins',sans-serif] font-medium text-[13px] px-6 py-3 rounded-full bg-white text-hsecondary border-2 border-hprimary hover:bg-gray-50 transition-all flex items-center justify-center gap-2"
                   >
                     View Full Details
                     <ExternalLink className="size-4" />

package/src/components/ReviewCard.tsx

@@ -19,8 +19,8 @@ export function ReviewCard({ review, showProductInfo = false }: ReviewCardProps)
     <div className="border border-gray-200 rounded-lg p-4 bg-white">
       <div className="flex items-start justify-between mb-3">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-secondary/10 rounded-full flex items-center justify-center">
-            <User className="size-5 text-secondary" />
+          <div className="w-10 h-10 bg-hsecondary/10 rounded-full flex items-center justify-center">
+            <User className="size-5 text-hsecondary" />
           </div>
           <div>
             <p className="font-medium text-gray-900">Customer Review</p>
@@ -41,9 +41,9 @@ export function ReviewCard({ review, showProductInfo = false }: ReviewCardProps)
       <p className="text-gray-700 text-sm leading-relaxed mb-3">{review.review}</p>
 
       {review.reply && (
-        <div className="mt-4 pl-4 border-l-2 border-secondary bg-gray-50 p-3 rounded">
+        <div className="mt-4 pl-4 border-l-2 border-hsecondary bg-gray-50 p-3 rounded">
           <div className="flex items-center gap-2 mb-2">
-            <MessageCircle className="size-4 text-secondary" />
+            <MessageCircle className="size-4 text-hsecondary" />
             <p className="text-xs font-medium text-gray-900">Store Response</p>
             {replyDate && (
               <p className="text-xs text-gray-500">

package/src/components/TabNavigation.tsx

@@ -31,8 +31,8 @@ export function TabNavigation({ tabs, activeTab, onTabChange }: TabNavigationPro
                 flex items-center gap-2 px-6 py-3 mt-2 text-sm font-medium whitespace-nowrap
                 border-b-2 transition-colors
                 ${isActive
-                                    ? 'bg-secondary text-white rounded-xl hover:transition-all hover:duration-300 hover:ease-in-out hover:-translate-y-1'
-                                    : 'bg-white text-muted rounded-xl hover:text-secondary hover:transition-all hover:duration-150 hover:ease-in-out hover:-translate-y-1'
+                                    ? 'bg-hsecondary text-white rounded-xl hover:transition-all hover:duration-300 hover:ease-in-out hover:-translate-y-1'
+                                    : 'bg-white text-hmuted rounded-xl hover:text-hsecondary hover:transition-all hover:duration-150 hover:ease-in-out hover:-translate-y-1'
                                 }
               `}
                             aria-current={isActive ? 'page' : undefined}

package/src/components/ui/Badge.tsx

@@ -9,8 +9,8 @@ interface BadgeProps {
 
 export function Badge({ children, variant = 'primary', size = 'md', className = '' }: BadgeProps) {
   const variants = {
-    primary: 'bg-primary-100 text-primary-700 border-primary-200',
-    secondary: 'bg-secondary-100 text-secondary-700 border-secondary-200',
+    primary: 'bg-hprimary-100 text-hprimary-700 border-hprimary-200',
+    secondary: 'bg-hsecondary-100 text-hsecondary-700 border-hsecondary-200',
     success: 'bg-green-100 text-green-700 border-green-200',
     warning: 'bg-yellow-100 text-yellow-700 border-yellow-200',
     danger: 'bg-red-100 text-red-700 border-red-200',

package/src/components/ui/Button.tsx

@@ -23,12 +23,12 @@ export function Button({
   children,
   ...props
 }: ButtonProps) {
-  const baseStyles = 'font-medium rounded-full transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 hover:cursor-pointer';
+  const baseStyles = 'font-medium rounded-full transition-all duration-200 inline-flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-hprimary-500 hover:cursor-pointer';
   
   const variants = {
     primary: 'bg-[#0E172B] text-white hover:bg-[#0E172B]/80 shadow-lg shadow-[#0E172B]/30 hover:shadow-xl hover:shadow-[#0E172B]/40',
-    secondary: 'bg-secondary-600 text-white hover:bg-secondary-700 shadow-lg shadow-secondary-500/30 hover:shadow-xl hover:shadow-secondary-500/40',
-    'outline-solid': 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50',
+    secondary: 'bg-hsecondary-600 text-white hover:bg-hsecondary-700 shadow-lg shadow-secondary-500/30 hover:shadow-xl hover:shadow-secondary-500/40',
+    'outline-solid': 'border-2 border-hprimary-600 text-hprimary-600 hover:bg-hprimary-50',
     ghost: 'text-gray-700 hover:bg-gray-100',
   };
   

package/src/components/ui/ConfirmModal.tsx

@@ -42,7 +42,7 @@ export function ConfirmModal({
             button: 'primary' as const,
         },
         info: {
-            icon: 'text-secondary bg-blue-100',
+            icon: 'text-hsecondary bg-blue-100',
             button: 'primary' as const,
         },
     };
@@ -58,10 +58,10 @@ export function ConfirmModal({
                 </div>
 
                 {/* Title */}
-                <h3 className="text-xl font-semibold text-secondary mb-2">{title}</h3>
+                <h3 className="text-xl font-semibold text-hsecondary mb-2">{title}</h3>
 
                 {/* Message */}
-                <p className="text-muted mb-6">{message}</p>
+                <p className="text-hmuted mb-6">{message}</p>
 
                 {/* Actions */}
                 <div className="flex gap-3 w-full justify-center">

package/src/components/ui/Input.tsx

@@ -21,7 +21,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             w-full px-4 py-3 rounded-lg border-2 transition-all duration-200
             ${error 
               ? 'border-red-500 focus:border-red-600 focus:ring-red-500/20' 
-              : 'border-gray-200 focus:border-primary-500 focus:ring-primary-500/20'
+              : 'border-gray-200 focus:border-hprimary-500 focus:ring-hprimary-500/20'
             }
             focus:outline-hidden focus:ring-4
             placeholder:text-gray-400

package/src/providers/ThemeProvider.tsx

@@ -27,7 +27,7 @@ interface ThemeProviderProps {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export function ThemeProvider({ config, children }: ThemeProviderProps) {
-  // Generate CSS variables string for inline style injection
+  // Generate CSS variables string for inline style injection (namespaced with --hp-)
   const cssVariables = React.useMemo(() => {
     const primaryShades = generateColorShades(config.colors.primary);
     const secondaryShades = generateColorShades(config.colors.secondary);
@@ -35,23 +35,23 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
 
     const vars: string[] = [];
 
-    // Base colors
-    vars.push(`--color-primary: ${config.colors.primary}`);
-    vars.push(`--color-primary-dark: ${config.colors.primaryDark}`);
-    vars.push(`--color-secondary: ${config.colors.secondary}`);
-    vars.push(`--color-accent: ${config.colors.accent}`);
-    vars.push(`--color-accent-dark: ${config.colors.accentDark}`);
-    vars.push(`--color-text-muted: ${config.colors.textMuted}`);
+    // Base colors (namespaced)
+    vars.push(`--hp-primary: ${config.colors.primary}`);
+    vars.push(`--hp-primary-dark: ${config.colors.primaryDark}`);
+    vars.push(`--hp-secondary: ${config.colors.secondary}`);
+    vars.push(`--hp-accent: ${config.colors.accent}`);
+    vars.push(`--hp-accent-dark: ${config.colors.accentDark}`);
+    vars.push(`--hp-text-hmuted: ${config.colors.textMuted}`);
 
-    // Shaded colors
+    // Shaded colors (namespaced)
     Object.entries(primaryShades).forEach(([shade, rgb]) => {
-      vars.push(`--color-primary-${shade}: ${rgb}`);
+      vars.push(`--hp-primary-${shade}: ${rgb}`);
     });
     Object.entries(secondaryShades).forEach(([shade, rgb]) => {
-      vars.push(`--color-secondary-${shade}: ${rgb}`);
+      vars.push(`--hp-secondary-${shade}: ${rgb}`);
     });
     Object.entries(accentShades).forEach(([shade, rgb]) => {
-      vars.push(`--color-accent-${shade}: ${rgb}`);
+      vars.push(`--hp-accent-${shade}: ${rgb}`);
     });
 
     return vars.join('; ');
@@ -64,23 +64,23 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
     const secondaryShades = generateColorShades(config.colors.secondary);
     const accentShades = generateColorShades(config.colors.accent);
 
-    // Set base color variables
-    root.style.setProperty('--color-primary', config.colors.primary);
-    root.style.setProperty('--color-primary-dark', config.colors.primaryDark);
-    root.style.setProperty('--color-secondary', config.colors.secondary);
-    root.style.setProperty('--color-accent', config.colors.accent);
-    root.style.setProperty('--color-accent-dark', config.colors.accentDark);
-    root.style.setProperty('--color-text-muted', config.colors.textMuted);
+    // Set base color variables (namespaced)
+    root.style.setProperty('--hp-primary', config.colors.primary);
+    root.style.setProperty('--hp-primary-dark', config.colors.primaryDark);
+    root.style.setProperty('--hp-secondary', config.colors.secondary);
+    root.style.setProperty('--hp-accent', config.colors.accent);
+    root.style.setProperty('--hp-accent-dark', config.colors.accentDark);
+    root.style.setProperty('--hp-text-hmuted', config.colors.textMuted);
 
-    // Set shaded color variables
+    // Set shaded color variables (namespaced)
     Object.entries(primaryShades).forEach(([shade, rgb]) => {
-      root.style.setProperty(`--color-primary-${shade}`, rgb);
+      root.style.setProperty(`--hp-primary-${shade}`, rgb);
     });
     Object.entries(secondaryShades).forEach(([shade, rgb]) => {
-      root.style.setProperty(`--color-secondary-${shade}`, rgb);
+      root.style.setProperty(`--hp-secondary-${shade}`, rgb);
     });
     Object.entries(accentShades).forEach(([shade, rgb]) => {
-      root.style.setProperty(`--color-accent-${shade}`, rgb);
+      root.style.setProperty(`--hp-accent-${shade}`, rgb);
     });
   }, [config]);
 

package/src/screens/AddressesScreen.tsx

@@ -247,7 +247,7 @@ export function AddressesScreen() {
               </p>
               <div className="flex flex-wrap gap-3 text-xs text-slate-500">
                 <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-2">
-                  <Sparkles className="h-4 w-4 text-primary-600" />
+                  <Sparkles className="h-4 w-4 text-hprimary-600" />
                   Default: {defaultAddress ? defaultAddress.name : 'Not set'}
                 </span>
               </div>
@@ -328,7 +328,7 @@ export function AddressesScreen() {
                     key={address.id}
                     initial={{ opacity: 0, y: 24 }}
                     animate={{ opacity: 1, y: 0 }}
-                    className="group relative flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-6 shadow-xs transition hover:-translate-y-1 hover:border-primary-200 hover:shadow-lg"
+                    className="group relative flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-6 shadow-xs transition hover:-translate-y-1 hover:border-hprimary-200 hover:shadow-lg"
                   >
                     {address.isDefault && (
                       <span className="absolute right-6 top-6 inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">
@@ -337,7 +337,7 @@ export function AddressesScreen() {
                       </span>
                     )}
                     <div className="flex items-center gap-3">
-                      <span className="rounded-full bg-primary-50 p-3 text-primary-600">
+                      <span className="rounded-full bg-hprimary-50 p-3 text-hprimary-600">
                         <User className="h-5 w-5" />
                       </span>
                       <div>
@@ -362,7 +362,7 @@ export function AddressesScreen() {
                       <button
                         type="button"
                         onClick={() => openEditModal(address)}
-                        className="inline-flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-sm font-medium text-slate-600 transition hover:border-primary-300 hover:text-primary-600"
+                        className="inline-flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-sm font-medium text-slate-600 transition hover:border-hprimary-300 hover:text-hprimary-600"
                       >
                         <Edit3 className="h-4 w-4" />
                         Edit
@@ -463,7 +463,7 @@ export function AddressesScreen() {
               <span className="text-sm font-semibold text-slate-700">Address type</span>
               <select
                 {...register('addressType')}
-                className="rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 focus:border-primary-400 focus:outline-hidden focus:ring-2 focus:ring-primary-500/20"
+                className="rounded-xl border border-slate-200 px-3 py-2 text-sm text-slate-700 focus:border-hprimary-400 focus:outline-hidden focus:ring-2 focus:ring-hprimary-500/20"
               >
                 <option value="Shipping">Shipping</option>
                 <option value="Billing">Billing</option>
@@ -475,7 +475,7 @@ export function AddressesScreen() {
               <input
                 type="checkbox"
                 {...register('isDefault')}
-                className="h-4 w-4 rounded-sm border-primary-300 text-primary-600 focus:ring-primary-500"
+                className="h-4 w-4 rounded-sm border-hprimary-300 text-hprimary-600 focus:ring-hprimary-500"
               />
             </label>
           </div>

package/src/screens/CartScreen.tsx

@@ -42,15 +42,15 @@ export function CartScreen() {
               >
                 <div className="flex justify-center">
                   <div className="rounded-full bg-gray-100 p-6">
-                    <ShoppingBag className="h-12 w-12 text-secondary" />
+                    <ShoppingBag className="h-12 w-12 text-hsecondary" />
                   </div>
                 </div>
 
                 <div className="space-y-2">
-                  <h2 className="text-2xl font-bold text-secondary">
+                  <h2 className="text-2xl font-bold text-hsecondary">
                     Your cart is empty
                   </h2>
-                  <p className="text-muted">
+                  <p className="text-hmuted">
                     Start adding products to your cart to see them here.
                   </p>
                 </div>
@@ -59,7 +59,7 @@ export function CartScreen() {
                   <button
                     type="button"
                     onClick={() => router.push(buildPath('/shop'))}
-                    className="rounded-xl border-2 border-primary 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-hprimary 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
                     <ArrowRight className="h-5 w-5" />
@@ -68,15 +68,15 @@ export function CartScreen() {
 
                 <div className="mt-8 space-y-3 pt-6 border-t border-gray-200">
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-hsecondary shrink-0 mt-0.5" />
                     <span>Free shipping on all orders</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-hsecondary shrink-0 mt-0.5" />
                     <span>Easy returns within 30 days</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-hsecondary shrink-0 mt-0.5" />
                     <span>Secure checkout process</span>
                   </div>
                 </div>
@@ -113,10 +113,10 @@ export function CartScreen() {
         <div className="container mx-auto px-4 py-8">
           {/* Header */}
           <div className="mb-12">
-            <h1 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-2px] mb-2 text-4xl">
+            <h1 className="font-['Poppins',sans-serif] font-semibold text-hsecondary tracking-[-2px] mb-2 text-4xl">
               Shopping Cart
             </h1>
-            <p className="font-['Poppins',sans-serif] text-[16px] text-muted">
+            <p className="font-['Poppins',sans-serif] text-[16px] text-hmuted">
               {itemCount} {itemCount === 1 ? 'item' : 'items'} in your cart
             </p>
           </div>
@@ -150,13 +150,13 @@ export function CartScreen() {
               transition={{ delay: 0.1 }}
               className="space-y-6 lg:sticky lg:top-24 h-fit lg:col-span-1"
             >
-              <div className="bg-linear-to-br from-secondary/10 to-secondary/10 rounded-[24px] p-8 border-2 border-secondary/20 sticky top-24">
-                <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-6">Order Summary</h2>
+              <div className="bg-linear-to-br from-hsecondary/10 to-hsecondary/10 rounded-[24px] p-8 border-2 border-hsecondary/20 sticky top-24">
+                <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-6">Order Summary</h2>
 
                 <div className="space-y-4 mb-6">
                   <div className="flex items-center justify-between">
-                    <span className="font-['Poppins',sans-serif] text-[14px] text-muted">Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
-                    <span className="font-['Poppins',sans-serif] font-semibold text-[14px] text-secondary">{formatPrice(subtotal)}</span>
+                    <span className="font-['Poppins',sans-serif] text-[14px] text-hmuted">Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
+                    <span className="font-['Poppins',sans-serif] font-semibold text-[14px] text-hsecondary">{formatPrice(subtotal)}</span>
                   </div>
                   <div className="flex items-center justify-between text-sm">
                     <span className="text-gray-600">Shipping</span>
@@ -166,8 +166,8 @@ export function CartScreen() {
                   </div>
                   <div className="border-t border-gray-200 pt-4 mt-4">
                     <div className="flex items-center justify-between">
-                      <span className="text-lg font-bold text-secondary">Total</span>
-                      <span className="text-2xl font-bold text-primary">{formatPrice(total)}</span>
+                      <span className="text-lg font-bold text-hsecondary">Total</span>
+                      <span className="text-2xl font-bold text-hprimary">{formatPrice(total)}</span>
                     </div>
                   </div>
                 </div>
@@ -176,7 +176,7 @@ export function CartScreen() {
                   <button
                     type="submit"
                     onClick={handleSubmit}
-                    className="w-full rounded-full border-2 border-secondary bg-secondary hover:bg-secondary/80 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
+                    className="w-full rounded-full border-2 border-hsecondary bg-hsecondary hover:bg-hsecondary/80 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
                   >
                     Proceed to Checkout
                     <ArrowRight className="h-5 w-5" />
@@ -192,17 +192,17 @@ export function CartScreen() {
 
                 <div className="mt-6 space-y-3 pt-6 border-t border-gray-200">
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-muted shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-hmuted shrink-0 mt-0.5" />
                     <span>Easy returns within 30 days</span>
                   </div>
                   <div className="flex items-start gap-3 text-sm text-slate-600">
-                    <CheckCircle2 className="h-5 w-5 text-muted shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-hmuted shrink-0 mt-0.5" />
                     <span>Secure checkout process</span>
                   </div>
                 </div>
               </div>
 
-              {/* <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-700 shadow-xs">
+              {/* <div className="rounded-3xl border border-hprimary-100 bg-hprimary-50/70 p-6 text-sm text-hprimary-700 shadow-xs">
                 <p className="font-semibold uppercase tracking-[0.3em]">Need help?</p>
                 <p className="mt-2 leading-relaxed">
                   Chat with a pharmacist to optimize your regimen or discuss substitutions before you

package/src/screens/ChangePasswordScreen.tsx

@@ -74,7 +74,7 @@ export function ChangePasswordScreen() {
           className="mx-auto max-w-2xl rounded-3xl border border-slate-200 bg-white p-8 shadow-xl shadow-primary-50"
         >
           <div className="flex items-center gap-3">
-            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary-50 text-primary-600">
+            <span className="flex h-11 w-11 items-center justify-center rounded-2xl bg-hprimary-50 text-hprimary-600">
               <Lock className="h-5 w-5" />
             </span>
             <div>
@@ -143,7 +143,7 @@ export function ChangePasswordScreen() {
           </form>
 
           <div className="mt-6 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" />
             Strong passwords and up-to-date contact details help pharmacists verify changes quickly.
           </div>
         </motion.div>