hey-pharmacist-ecommerce 1.1.41 → 1.1.43

package/src/lib/Apis/models/update-user-dto.ts

@@ -97,12 +97,6 @@ export interface UpdateUserDto {
      * @memberof UpdateUserDto
      */
     notes?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof UpdateUserDto
-     */
-    mailJetId?: number;
     /**
      * 
      * @type {string}

package/src/lib/Apis/models/user-group.ts

@@ -60,12 +60,6 @@ export interface UserGroup {
      * @memberof UserGroup
      */
     storeId: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof UserGroup
-     */
-    mailJetListId: number;
     /**
      * 
      * @type {number}

package/src/lib/Apis/models/user-with-no-id.ts

@@ -90,12 +90,6 @@ export interface UserWithNoId {
      * @memberof UserWithNoId
      */
     notes?: string;
-    /**
-     * 
-     * @type {number}
-     * @memberof UserWithNoId
-     */
-    mailJetId?: number;
     /**
      * 
      * @type {string}

package/src/lib/Apis/sharedConfig.ts

@@ -4,6 +4,6 @@ import { Configuration } from "./configuration";
 export const AXIOS_CONFIG = new Configuration({
     basePath: "https://api.heypharmacist.com", // Default fallback
     baseOptions: {
-        timeout: 20000,
+        timeout: 60000,
     },
 });

package/src/providers/ThemeProvider.tsx

@@ -41,7 +41,7 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
     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-muted: ${config.colors.textMuted}`);
+    vars.push(`--hp-text-hmuted: ${config.colors.textMuted}`);
 
     // Shaded colors (namespaced)
     Object.entries(primaryShades).forEach(([shade, rgb]) => {
@@ -70,7 +70,7 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
     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-muted', config.colors.textMuted);
+    root.style.setProperty('--hp-text-hmuted', config.colors.textMuted);
 
     // Set shaded color variables (namespaced)
     Object.entries(primaryShades).forEach(([shade, rgb]) => {

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>
@@ -109,14 +109,14 @@ export function CartScreen() {
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="max-w-[1400px] mx-auto px-8 md:px-12">
-        <div className="container mx-auto px-4 py-8">
+      <div className="max-w-[1400px] mx-auto px-4 md:px-12">
+        <div className="py-8">
           {/* Header */}
-          <div className="mb-12">
-            <h1 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-2px] mb-2 text-4xl">
+          <div className="mb-8 md:mb-12">
+            <h1 className="font-semibold text-hsecondary tracking-[-1px] md:tracking-[-2px] mb-2 text-3xl md:text-4xl">
               Shopping Cart
             </h1>
-            <p className="font-['Poppins',sans-serif] text-[16px] text-muted">
+            <p className="text-[14px] md:text-[16px] text-hmuted">
               {itemCount} {itemCount === 1 ? 'item' : 'items'} in your cart
             </p>
           </div>
@@ -148,15 +148,15 @@ export function CartScreen() {
               initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
-              className="space-y-6 lg:sticky lg:top-24 h-fit lg:col-span-1"
+              className="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-hsecondary/[0.03] md:bg-linear-to-br md:from-hsecondary/10 md:to-hsecondary/10 rounded-[24px] p-6 md:p-8 border-2 border-hsecondary/10 md:border-hsecondary/20 lg:sticky lg:top-24">
+                <h2 className="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="text-[14px] text-hmuted">Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
+                    <span className="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>

package/src/screens/CheckoutScreen.tsx

@@ -557,10 +557,10 @@ export function CheckoutScreen() {
           >
             {/* Header */}
             <div className="mb-12">
-              <h1 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-3xl">
+              <h1 className="font-semibold text-[#2B4B7C] mb-2 text-3xl">
                 Checkout
               </h1>
-              <p className="font-['Poppins',sans-serif] text-[14px] text-[#676c80] text-md leading-relaxed">
+              <p className="text-[14px] text-[#676c80] text-md leading-relaxed">
                 Complete your order information below
               </p>
             </div>
@@ -595,13 +595,13 @@ export function CheckoutScreen() {
                             }
                           }}
                           className={`relative flex w-full items-center justify-between rounded-xl border-2 p-3 transition-all duration-200 ${active
-                            ? 'border-primary-500 bg-primary-50'
-                            : 'border-gray-200 hover:border-primary-300'
+                            ? 'border-hprimary-500 bg-hprimary-50'
+                            : 'border-gray-200 hover:border-hprimary-300'
                             }`}
                         >
                           <div className="flex items-center gap-3">
                             <div
-                              className={`p-2 rounded-lg ${active ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 text-gray-600'
+                              className={`p-2 rounded-lg ${active ? 'bg-hprimary-100 text-hprimary-600' : 'bg-gray-100 text-gray-600'
                                 }`}
                             >
                               {option.icon}
@@ -612,7 +612,7 @@ export function CheckoutScreen() {
                             </div>
                           </div>
                           {active && (
-                            <div className="w-5 h-5 rounded-full bg-primary-500 flex items-center justify-center shrink-0">
+                            <div className="w-5 h-5 rounded-full bg-hprimary-500 flex items-center justify-center shrink-0">
                               <Check className="w-3 h-3 text-white" />
                             </div>
                           )}
@@ -694,7 +694,7 @@ export function CheckoutScreen() {
               <section className="bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]">
                 <div className="flex flex-wrap items-center justify-between gap-4">
                   <div>
-                    <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-2xl">
+                    <h2 className="font-semibold text-[#2B4B7C] mb-2 text-2xl">
                       {isDelivery ? 'Delivery Address' : 'Contact Information'}
                     </h2>
                     <p className="text-sm text-slate-500">
@@ -726,9 +726,9 @@ export function CheckoutScreen() {
                             <label
                               key={addr.id}
                               className={`group relative flex items-start gap-3 p-4 rounded-2xl border ${selectedAddressId === addr.id
-                                ? 'border-primary-500 bg-primary-50 shadow-xs'
+                                ? 'border-hprimary-500 bg-hprimary-50 shadow-xs'
                                 : 'border-slate-200 bg-white'
-                                } cursor-pointer hover:border-primary-300 transition-colors`}
+                                } cursor-pointer hover:border-hprimary-300 transition-colors`}
                             >
                               <input
                                 type="radio"
@@ -763,14 +763,14 @@ export function CheckoutScreen() {
                                 )}
                                 <div className="mt-3 flex items-center gap-2">
                                   {addr.isDefault && (
-                                    <span className="inline-flex items-center gap-1 rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-semibold text-primary-700">
+                                    <span className="inline-flex items-center gap-1 rounded-full bg-hprimary-100 px-2.5 py-0.5 text-xs font-semibold text-hprimary-700">
                                       Default
                                     </span>
                                   )}
                                   <button
                                     type="button"
                                     onClick={(e) => { e.preventDefault(); setEditingAddress(addr); setIsAddressModalOpen(true); }}
-                                    className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-medium text-slate-600 hover:border-primary-300 hover:text-primary-600"
+                                    className="inline-flex items-center gap-1 rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-medium text-slate-600 hover:border-hprimary-300 hover:text-hprimary-600"
                                   >
                                     <Edit3 className="h-3.5 w-3.5" /> Edit
                                   </button>
@@ -828,12 +828,12 @@ export function CheckoutScreen() {
               <div className="bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]">
                 <div className="flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-8 border-b">
                   <Truck className="w-8 h-8 flex items-center justify-center text-[#2B4B7C]" />
-                  <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] text-2xl">Shipping Options</h2>
+                  <h2 className="font-semibold text-[#2B4B7C] text-2xl">Shipping Options</h2>
                 </div>
 
                 {shippingRatesLoading ? (
                   <div className="flex items-center justify-center py-12">
-                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent"></div>
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-haccent"></div>
                     <span className="ml-3 text-gray-600">Loading shipping options...</span>
                   </div>
                 ) : shippingRatesError ? (
@@ -861,7 +861,7 @@ export function CheckoutScreen() {
                             setShippingPrice(parseFloat(rate.amount));
                           }}
                           className={`relative p-5 border-2 rounded-xl cursor-pointer transition-all duration-200 hover:shadow-md ${isSelected
-                            ? 'border-primary-500 bg-primary-50 ring-2 ring-primary-200'
+                            ? 'border-hprimary-500 bg-hprimary-50 ring-2 ring-hprimary-200'
                             : 'border-gray-200 hover:border-gray-300'
                             }`}
                         >
@@ -889,7 +889,7 @@ export function CheckoutScreen() {
                                     {rate.provider} {rate.servicelevel?.name}
                                   </h3>
                                   {isTest && (
-                                    <span className="px-2 py-1 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">
+                                    <span className="px-2 py-1 text-xs font-medium bg-hprimary-100 text-hprimary-800 rounded-full">
                                       TEST
                                     </span>
                                   )}
@@ -947,7 +947,7 @@ export function CheckoutScreen() {
                           {/* Selection Indicator */}
                           {isSelected && (
                             <div className="absolute top-3 right-3">
-                              <div className="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center">
+                              <div className="w-6 h-6 bg-hprimary-500 rounded-full flex items-center justify-center">
                                 <CheckIcon className="w-4 h-4 text-white" />
                               </div>
                             </div>
@@ -979,8 +979,8 @@ export function CheckoutScreen() {
             className="space-y-10 lg:sticky lg:top-24 lg:col-span-1"
           >
             {/* Order Summary */}
-            <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 text-2xl">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-semibold text-hsecondary mb-6 text-2xl">Order Summary</h2>
 
 
               {/* Cart Summary */}
@@ -992,13 +992,13 @@ export function CheckoutScreen() {
                         <Image src={item.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
                       </div>
                       <div className="flex-1 min-w-0">
-                        <p className="font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1">
+                        <p className="font-medium text-[12px] text-[#2B4B7C] mb-1">
                           {item?.productVariantData?.name}
                         </p>
-                        <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
+                        <p className="text-[11px] text-[#676c80]">
                           {item?.productVariantData?.brand} • Qty: {item.quantity}
                         </p>
-                        <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mt-1">
+                        <p className="font-semibold text-[12px] text-hsecondary mt-1">
                           {formatPrice(item.productVariantData.finalPrice * item.quantity)}
                         </p>
                       </div>
@@ -1006,7 +1006,7 @@ export function CheckoutScreen() {
                   ))}
                 </div>
 
-                <div className="h-px bg-secondary/20 my-4" />
+                <div className="h-px bg-hsecondary/20 my-4" />
 
                 {/* Coupon Code Section */}
                 <div className="mb-6">
@@ -1042,11 +1042,11 @@ export function CheckoutScreen() {
                     <span>Estimated tax</span>
                     <span className="font-semibold">{formatPrice(tax)}</span>
                   </div>
-                  <div className="h-px bg-secondary/20 mt-6" />
+                  <div className="h-px bg-hsecondary/20 mt-6" />
 
                   <div className="flex items-center justify-between mb-6">
-                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary">Total</span>
-                    <span className="font-['Poppins',sans-serif] font-bold text-[24px] text-secondary">{formatPrice(total)}</span>
+                    <span className="font-semibold text-[16px] text-hsecondary">Total</span>
+                    <span className="font-bold text-[24px] text-hsecondary">{formatPrice(total)}</span>
                   </div>
                   {/* <p className="mt-1 text-xs text-slate-500">
                       Tax is estimated. Final amount confirmed after payment.
@@ -1054,8 +1054,8 @@ export function CheckoutScreen() {
                 </div>
 
                 <div className="bg-white/80 rounded-xl p-4">
-                  <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]">
-                    <strong className="text-secondary">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
+                  <p className="text-[11px] text-[#676c80] leading-[1.6]">
+                    <strong className="text-hsecondary">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
                   </p>
                 </div>
               </section>
@@ -1093,7 +1093,7 @@ export function CheckoutScreen() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-secondary hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-hsecondary hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}

package/src/screens/CurrentOrdersScreen.tsx

@@ -112,21 +112,21 @@ export function CurrentOrdersScreen() {
                 </h2>
                 <div className="mt-4 space-y-4 text-sm text-slate-600">
                   <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
-                    <Warehouse className="h-5 w-5 text-primary-500" />
+                    <Warehouse className="h-5 w-5 text-hprimary-500" />
                     <div>
                       <p className="font-semibold text-slate-800">Preparation</p>
                       <p>Our pharmacists verify ingredients and pack thermo-sensitive items.</p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
-                    <Truck className="h-5 w-5 text-primary-500" />
+                    <Truck className="h-5 w-5 text-hprimary-500" />
                     <div>
                       <p className="font-semibold text-slate-800">In transit</p>
                       <p>Track live courier location with ETA updates tailored to your delivery window.</p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3 rounded-2xl bg-slate-50 p-4">
-                    <BellRing className="h-5 w-5 text-primary-500" />
+                    <BellRing className="h-5 w-5 text-hprimary-500" />
                     <div>
                       <p className="font-semibold text-slate-800">Arrival alerts</p>
                       <p>Receive SMS and email notifications when parcels are out for delivery.</p>
@@ -135,7 +135,7 @@ export function CurrentOrdersScreen() {
                 </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 support?</p>
                 <p className="mt-3 leading-relaxed">
                   Our fulfillment team is online 7 days a week. Message us if you need to adjust

package/src/screens/EditProfileScreen.tsx

@@ -75,7 +75,7 @@ export function EditProfileScreen() {
           className="mx-auto max-w-3xl 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">
               <User className="h-5 w-5" />
             </span>
             <div>

package/src/screens/ForgotPasswordScreen.tsx

@@ -67,10 +67,10 @@ export function ForgotPasswordScreen() {
             <div className="space-y-2">
               <Mail
                 strokeWidth={2}
-                className="h-16 w-16 mx-auto text-white rounded-full bg-secondary m-2 mb-4 px-4"
+                className="h-16 w-16 mx-auto text-white rounded-full bg-hsecondary m-2 mb-4 px-4"
               />
-              <h2 className="text-4xl text-secondary">Forgot Password?</h2>
-              <p className="text-sm text-muted">
+              <h2 className="text-4xl text-hsecondary">Forgot Password?</h2>
+              <p className="text-sm text-hmuted">
                 No worries! Enter your email and we'll send you reset instructions.
               </p>
             </div>
@@ -95,23 +95,23 @@ export function ForgotPasswordScreen() {
                 </div>
               )}
 
-              <div className="text-start text-secondary">
-                <h2 className="text-sm text-secondary mb-3">
-                  Email Address <span className="text-primary-500">*</span>
+              <div className="text-start text-hsecondary">
+                <h2 className="text-sm text-hsecondary mb-3">
+                  Email Address <span className="text-hprimary-500">*</span>
                 </h2>
                 <Input
                   type="email"
                   placeholder="you@example.com"
                   {...register('email')}
                   error={errors.email?.message}
-                  className="text-secondary"
+                  className="text-hsecondary"
                 />
               </div>
 
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full bg-secondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                className="w-full bg-hsecondary hover:opacity-80 text-white font-medium py-3 px-4 rounded-lg transition-colors disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
               >
                 {isSubmitting ? (
                   'Sending...'
@@ -126,7 +126,7 @@ export function ForgotPasswordScreen() {
               <div className="pt-4 border-t border-slate-200">
                 <Link
                   href={buildPath('/login')}
-                  className="flex items-center justify-center gap-2 text-sm font-medium text-primary transition hover:opacity-80"
+                  className="flex items-center justify-center gap-2 text-sm font-medium text-hprimary transition hover:opacity-80"
                 >
                   <ArrowLeft className="h-4 w-4" />
                   Back to login
@@ -135,11 +135,11 @@ export function ForgotPasswordScreen() {
             </form>
 
             <div className="mt-4">
-              <p className="text-muted">
+              <p className="text-hmuted">
                 Don't have an account?{' '}
                 <Link
                   href={buildPath('/register')}
-                  className="font-medium text-primary transition hover:opacity-90"
+                  className="font-medium text-hprimary transition hover:opacity-90"
                 >
                   Sign up
                 </Link>