hey-pharmacist-ecommerce 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "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",
@@ -31,17 +31,17 @@
     "zustand": "^4.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "autoprefixer": "^10.4.0",
     "eslint": "^8.0.0",
     "eslint-config-next": "^14.0.0",
     "next": "^16.0.10",
     "postcss": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.1.18",
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
   },

package/src/components/AccountOrdersTab.tsx

@@ -100,7 +100,7 @@ export function AccountOrdersTab() {
 
                                     return (
                                         <div key={item.productVariantId || index} className="flex items-center gap-3">
-                                            <div className="relative w-12 h-12 rounded-lg bg-slate-100 flex-shrink-0 overflow-hidden">
+                                            <div className="relative w-12 h-12 rounded-lg bg-slate-100 shrink-0 overflow-hidden">
                                                 <Image
                                                     src={item?.productVariantData?.productMedia?.[0]?.file || '/placeholder-product.jpg'}
                                                     alt={item?.productVariantData?.name || 'Product image'}

package/src/components/AccountSettingsTab.tsx

@@ -31,7 +31,7 @@ export function AccountSettingsTab() {
                             type="checkbox"
                             checked={emailNotifications}
                             onChange={(e) => setEmailNotifications(e.target.checked)}
-                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
                         />
                     </label>
                     <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
@@ -43,7 +43,7 @@ export function AccountSettingsTab() {
                             type="checkbox"
                             checked={orderUpdates}
                             onChange={(e) => setOrderUpdates(e.target.checked)}
-                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
                         />
                     </label>
                     <label className="flex items-center justify-between gap-4 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3">
@@ -55,7 +55,7 @@ export function AccountSettingsTab() {
                             type="checkbox"
                             checked={promotionalEmails}
                             onChange={(e) => setPromotionalEmails(e.target.checked)}
-                            className="h-4 w-4 rounded border-primary-300 text-secondary focus:ring-primary-500"
+                            className="h-4 w-4 rounded-sm border-primary-300 text-secondary focus:ring-primary-500"
                         />
                     </label>
                 </div>
@@ -74,7 +74,7 @@ export function AccountSettingsTab() {
                             <p className="text-xs text-muted">Update your account password</p>
                         </div>
                         <Button
-                            variant="outline"
+                            variant="outline-solid"
                             size="sm"
                             onClick={() => router.push(buildPath('/account/change-password'))}
                         >
@@ -86,7 +86,7 @@ export function AccountSettingsTab() {
                             <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>
                         </div>
-                        <Button variant="outline" size="sm">
+                        <Button variant="outline-solid" size="sm">
                             Enable
                         </Button>
                     </div> */}
@@ -96,7 +96,7 @@ export function AccountSettingsTab() {
                             <p className="text-xs text-red-600">Permanently delete your account and data</p>
                         </div>
                         <Button
-                            variant="outline"
+                            variant="outline-solid"
                             size="sm"
                             className="border-red-200 text-red-600 hover:bg-red-50"
                             onClick={() => {

package/src/components/FilterChips.tsx

@@ -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-sm'
-                    : 'border-secondary-500 bg-secondary-500 text-white shadow-sm'
+                    ? 'border-primary-500 bg-primary-500 text-white shadow-xs'
+                    : 'border-secondary-500 bg-secondary-500 text-white shadow-xs'
                   : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50'
               }`}
             >

package/src/components/Header.tsx

@@ -45,7 +45,7 @@ export function Header() {
   ];
 
   return (
-    <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-sm">
+    <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-xl border-b border-gray-200 shadow-xs">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-20">
           {/* Logo */}
@@ -106,7 +106,7 @@ export function Header() {
                           }
                         }}
                         placeholder="Search products..."
-                        className="w-full outline-none text-gray-700"
+                        className="w-full outline-hidden text-gray-700"
                         autoFocus
                       />
                       {searchQuery && (

package/src/components/Notification.tsx

@@ -81,7 +81,7 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
             className={`relative bg-white rounded-2xl border-2 ${config.borderColor} shadow-xl overflow-hidden min-w-[320px] max-w-[420px]`}
         >
             {/* Gradient accent bar */}
-            <div className={`h-1 bg-gradient-to-r ${config.gradient}`} />
+            <div className={`h-1 bg-linear-to-r ${config.gradient}`} />
 
             <div className="p-4 flex items-start gap-3">
                 {/* Icon */}
@@ -119,7 +119,7 @@ export function Notification({ notification, onDismiss }: NotificationProps) {
             {/* Progress bar */}
             <div className="h-1 bg-gray-100">
                 <motion.div
-                    className={`h-full bg-gradient-to-r ${config.gradient}`}
+                    className={`h-full bg-linear-to-r ${config.gradient}`}
                     style={{ width: `${progress}%` }}
                     transition={{ duration: 0.016, ease: 'linear' }}
                 />
@@ -135,7 +135,7 @@ interface NotificationContainerProps {
 
 export function NotificationContainer({ notifications, onDismiss }: NotificationContainerProps) {
     return (
-        <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3 pointer-events-none">
+        <div className="fixed top-4 right-4 z-9999 flex flex-col gap-3 pointer-events-none">
             <AnimatePresence mode="popLayout">
                 {notifications.map((notification) => (
                     <div key={notification.id} className="pointer-events-auto">

package/src/components/OrderCard.tsx

@@ -23,7 +23,7 @@ export function OrderCard({ order }: OrderCardProps) {
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      className="rounded-lg border border-slate-200 bg-white p-4 shadow-sm hover:shadow-md transition-shadow"
+      className="rounded-lg border border-slate-200 bg-white p-4 shadow-xs hover:shadow-md transition-shadow"
     >
       {/* Header - Compact */}
       <div className="flex items-center justify-between mb-4 pb-4 border-b border-gray-200">
@@ -53,7 +53,7 @@ export function OrderCard({ order }: OrderCardProps) {
 
             return (
               <div key={item.productVariantId || item._id} className="flex items-center gap-2 text-sm">
-                <div className="relative w-12 h-12 rounded bg-gray-100 flex-shrink-0 overflow-hidden">
+                <div className="relative w-12 h-12 rounded-sm bg-gray-100 shrink-0 overflow-hidden">
                   <Image
                     src={item?.productVariantData?.productMedia?.[0]?.file || '/placeholder-product.jpg'}
                     alt={item?.productVariantData?.name || 'Product image'}

package/src/components/ProductCard.tsx

@@ -191,7 +191,7 @@ export function ProductCard({
       >
         <div
           onClick={handleCardClick}
-          className="relative aspect-square overflow-hidden bg-gray-50 cursor-pointer flex-shrink-0"
+          className="relative aspect-square overflow-hidden bg-gray-50 cursor-pointer shrink-0"
         >
           <Image
             src={imageSource.src}
@@ -209,13 +209,13 @@ export function ProductCard({
               e.stopPropagation();
               setShowQuickView(true);
             }}
-            className="absolute top-2 left-2 p-2 rounded-full bg-white/90 backdrop-blur-sm hover:bg-white shadow-md opacity-0 group-hover:opacity-100 transition-all"
+            className="absolute top-2 left-2 p-2 rounded-full bg-white/90 backdrop-blur-xs hover:bg-white shadow-md opacity-0 group-hover:opacity-100 transition-all"
           >
             <Eye className="size-4 text-[#2B4B7C]" />
           </button>
 
           {displayInventoryCount === 0 && (
-            <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
+            <div className="absolute inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center">
               <div className="bg-white rounded-full px-4 py-2">
                 <span className="font-['Poppins',sans-serif] font-bold text-[11px] text-[#2B4B7C] uppercase">
                   Out of Stock
@@ -236,7 +236,7 @@ export function ProductCard({
                 </span>
               )}
               {/* {product.dealOfWeek && (
-              <span className="bg-gradient-to-r from-[#E67E50] to-[#d66f45] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
+              <span className="bg-linear-to-r from-[#E67E50] to-[#d66f45] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
                 <TrendingUp className="size-2.5" />
                 <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">Deal</span>
               </span>

package/src/components/QuickViewModal.tsx

@@ -63,7 +63,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
 
   return (
     <div 
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs"
       onClick={onClose}
     >
       <div 
@@ -111,7 +111,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {/* Product Image */}
             <div className="space-y-4">
-              <div className="relative aspect-[3/4] rounded-[24px] overflow-hidden bg-gray-50">
+              <div className="relative aspect-3/4 rounded-[24px] overflow-hidden bg-gray-50">
                 <img
                   src={selectedVariant.productMedia[selectedImageIndex]?.file || selectedVariant.productMedia[0]?.file}
                   alt={product.name}

package/src/components/ui/Button.tsx

@@ -8,7 +8,7 @@ const MotionDiv = dynamic(() => import('framer-motion').then((mod) => mod.motion
 });
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  variant?: 'primary' | 'secondary'| 'ghost' | 'outline-solid';
   size?: 'sm' | 'md' | 'lg';
   isLoading?: boolean;
   children: React.ReactNode;
@@ -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-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500';
+  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';
   
   const variants = {
     primary: 'bg-primary-600 text-white hover:bg-primary-700 shadow-lg shadow-primary-500/30 hover:shadow-xl hover:shadow-primary-500/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: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50',
+    'outline-solid': 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50',
     ghost: 'text-gray-700 hover:bg-gray-100',
   };
   

package/src/components/ui/Card.tsx

@@ -8,7 +8,7 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 export function Card({ className = '', ...props }: CardProps) {
   return (
     <div
-      className={`rounded-lg border bg-white shadow-sm ${className}`}
+      className={`rounded-lg border bg-white shadow-xs ${className}`}
       {...props}
     />
   );

package/src/components/ui/Input.tsx

@@ -23,7 +23,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               ? 'border-red-500 focus:border-red-600 focus:ring-red-500/20' 
               : 'border-gray-200 focus:border-primary-500 focus:ring-primary-500/20'
             }
-            focus:outline-none focus:ring-4
+            focus:outline-hidden focus:ring-4
             placeholder:text-gray-400
             disabled:bg-gray-50 disabled:cursor-not-allowed
             ${className}

package/src/components/ui/Modal.tsx

@@ -43,7 +43,7 @@ export function Modal({ isOpen, onClose, title, children, size = 'md' }: ModalPr
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             onClick={onClose}
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
+            className="fixed inset-0 bg-black/50 backdrop-blur-xs z-50"
           />
           
           {/* Modal */}

package/src/components/ui/Skeleton.tsx

@@ -6,13 +6,13 @@ interface SkeletonProps {
 
 export function Skeleton({ className = '' }: SkeletonProps) {
   return (
-    <div className={`animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] rounded ${className}`} />
+    <div className={`animate-pulse bg-linear-to-r from-gray-200 via-gray-300 to-gray-200 bg-size-[200%_100%] rounded-sm ${className}`} />
   );
 }
 
 export function ProductCardSkeleton() {
   return (
-    <div className="bg-white rounded-2xl overflow-hidden shadow-sm">
+    <div className="bg-white rounded-2xl overflow-hidden shadow-xs">
       <Skeleton className="h-64 w-full" />
       <div className="p-4 space-y-3">
         <Skeleton className="h-6 w-3/4" />
@@ -28,7 +28,7 @@ export function ProductCardSkeleton() {
 
 export function OrderCardSkeleton() {
   return (
-    <div className="bg-white rounded-2xl p-6 shadow-sm">
+    <div className="bg-white rounded-2xl p-6 shadow-xs">
       <div className="flex justify-between items-start mb-4">
         <div className="space-y-2 flex-1">
           <Skeleton className="h-6 w-32" />

package/src/screens/AddressesScreen.tsx

@@ -261,12 +261,12 @@ export function AddressesScreen() {
                       : 'border-red-200 bg-red-50 text-red-700'
                   }`}
                 >
-                  <span className="mt-[1px] text-base">{banner.type === 'success' ? '✔' : '!'}</span>
+                  <span className="mt-px text-base">{banner.type === 'success' ? '✔' : '!'}</span>
                   <span>{banner.message}</span>
                 </div>
               )}
               <Button
-                variant="outline"
+                variant="outline-solid"
                 size="md"
                 className="border-slate-300 text-slate-800 hover:bg-white"
                 onClick={openCreateModal}
@@ -310,7 +310,7 @@ export function AddressesScreen() {
               {error.message}
             </div>
           ) : addresses.length === 0 ? (
-            <div className="rounded-3xl border border-slate-100 bg-white p-12 shadow-sm">
+            <div className="rounded-3xl border border-slate-100 bg-white p-12 shadow-xs">
               <EmptyState
                 icon={MapPin}
                 title="No addresses yet"
@@ -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-sm 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-primary-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">
@@ -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-none 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-primary-400 focus:outline-hidden focus:ring-2 focus:ring-primary-500/20"
               >
                 <option value="Shipping">Shipping</option>
                 <option value="Billing">Billing</option>
@@ -475,13 +475,13 @@ export function AddressesScreen() {
               <input
                 type="checkbox"
                 {...register('isDefault')}
-                className="h-4 w-4 rounded border-primary-300 text-primary-600 focus:ring-primary-500"
+                className="h-4 w-4 rounded-sm border-primary-300 text-primary-600 focus:ring-primary-500"
               />
             </label>
           </div>
 
           <div className="flex items-center justify-end gap-3">
-            <Button type="button" variant="outline" onClick={closeModal}>
+            <Button type="button" variant="outline-solid" onClick={closeModal}>
               Cancel
             </Button>
             <Button type="submit" isLoading={isSubmitting}>

package/src/screens/CartScreen.tsx

@@ -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 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary 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 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary 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 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-secondary shrink-0 mt-0.5" />
                     <span>Secure checkout process</span>
                   </div>
                 </div>
@@ -150,7 +150,7 @@ 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-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
+              <div className="bg-linear-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
                 <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-6">Order Summary</h2>
 
                 <div className="space-y-4 mb-6">
@@ -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 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-muted 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 flex-shrink-0 mt-0.5" />
+                    <CheckCircle2 className="h-5 w-5 text-muted 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-sm">
+              {/* <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-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

@@ -134,7 +134,7 @@ export function ChangePasswordScreen() {
               </Button>
               <Button
                 type="button"
-                variant="outline"
+                variant="outline-solid"
                 size="lg"
                 className="border-slate-300 text-slate-800 hover:bg-slate-50"
                 onClick={() => router.push(buildPath('/account'))}

package/src/screens/CheckoutScreen.tsx

@@ -487,7 +487,7 @@ export function CheckoutScreen() {
                       <label className="block font-semibold">Select Address</label>
                       <Button
                         type="button"
-                        variant="outline"
+                        variant="outline-solid"
                         size="sm"
                         onClick={() => { setEditingAddress(null); setIsAddressModalOpen(true); }}
                       >
@@ -502,7 +502,7 @@ 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-sm'
+                              ? 'border-primary-500 bg-primary-50 shadow-xs'
                               : 'border-slate-200 bg-white'
                               } cursor-pointer hover:border-primary-300 transition-colors`}
                           >
@@ -587,7 +587,7 @@ export function CheckoutScreen() {
                   <div className="md:col-span-2">
                     <label className="block mb-2 font-semibold">Select Pickup Location</label>
                     <select
-                      className="w-full border rounded p-2"
+                      className="w-full border rounded-sm p-2"
                       value={selectedStoreAddressId || ''}
                       onChange={e => setSelectedStoreAddressId(e.target.value)}
                     >
@@ -647,7 +647,7 @@ export function CheckoutScreen() {
                           <div className="flex items-start justify-between">
                             <div className="flex items-start gap-4 flex-1">
                               {/* Provider Logo */}
-                              <div className="flex-shrink-0">
+                              <div className="shrink-0">
                                 <Image
                                   src={rate.providerImage75 || '/placeholder-product.jpg'}
                                   alt={rate.provider}
@@ -854,10 +854,10 @@ export function CheckoutScreen() {
                         className={`
                           group relative flex w-full items-center justify-between rounded-xl border-2 p-3
                           transition-all duration-200 ease-out
-                          focus:outline-none f
+                          focus:outline-hidden f
                           ${active
                             ? `${pm.activeClass} shadow-md scale-[1.02]`
-                            : `${pm.className} border-gray-200 bg-white hover:shadow-sm hover:-translate-y-0.5`
+                            : `${pm.className} border-gray-200 bg-white hover:shadow-xs hover:-translate-y-0.5`
                           }
                         `}
                       >
@@ -884,7 +884,7 @@ export function CheckoutScreen() {
                         </div>
 
                         {active && (
-                          <div className="flex h-6 w-6 items-center justify-center rounded-full shadow-sm">
+                          <div className="flex h-6 w-6 items-center justify-center rounded-full shadow-xs">
                             <Check className="h-3.5 w-3.5 text-white" />
                           </div>
                         )}
@@ -912,7 +912,7 @@ export function CheckoutScreen() {
             className="space-y-10 lg:sticky lg:top-24 lg:col-span-1"
           >
             {/* Order Summary */}
-            <div className="bg-gradient-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
+            <div className="bg-linear-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
               <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-6 text-2xl">Order Summary</h2>
 
 

package/src/screens/CurrentOrdersScreen.tsx

@@ -26,8 +26,8 @@ export function CurrentOrdersScreen() {
 
   return (
     <div className="min-h-screen bg-slate-50">
-      <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+      <section className="relative overflow-hidden bg-linear-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.35),transparent_60%)]" />
         <div className="relative container mx-auto px-4 py-16">
           <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
             <motion.div
@@ -35,7 +35,7 @@ export function CurrentOrdersScreen() {
               animate={{ opacity: 1, y: 0 }}
               className="space-y-4"
             >
-              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
+              <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur-sm">
                 <Truck className="h-4 w-4" />
                 Live order tracking
               </span>
@@ -49,7 +49,7 @@ export function CurrentOrdersScreen() {
               initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
-              className="rounded-3xl bg-white/15 p-6 backdrop-blur"
+              className="rounded-3xl bg-white/15 p-6 backdrop-blur-sm"
             >
               <p className="text-sm font-semibold uppercase tracking-[0.35em] text-white/70">
                 Quick actions
@@ -93,7 +93,7 @@ export function CurrentOrdersScreen() {
                   ))}
                 </div>
               ) : (
-                <div className="rounded-3xl border border-slate-100 bg-white p-10 shadow-sm">
+                <div className="rounded-3xl border border-slate-100 bg-white p-10 shadow-xs">
                   <EmptyState
                     icon={PackageCheck}
                     title="No active orders"
@@ -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-sm">
+              <div className="rounded-3xl border border-primary-100 bg-primary-50/70 p-6 text-sm text-primary-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

@@ -149,7 +149,7 @@ export function EditProfileScreen() {
               </Button>
               <Button
                 type="button"
-                variant="outline"
+                variant="outline-solid"
                 size="lg"
                 className="border-slate-300 text-slate-800 hover:bg-slate-50"
                 onClick={() => router.push(buildPath('/account'))}

package/src/screens/LoginScreen.tsx

@@ -71,7 +71,7 @@ export function LoginScreen() {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[#F8FAFC] to-[#EBF4FB]">
+    <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
       <div className="grid min-h-screen overflow-hidden pb-12">
         <motion.section
           initial={{ opacity: 0, x: 24 }}
@@ -137,7 +137,7 @@ export function LoginScreen() {
                 <label className="flex items-center gap-2 text-slate-600">
                   <input
                     type="checkbox"
-                    className="h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                    className="h-4 w-4 rounded-sm border-slate-300 text-primary-600 focus:ring-primary-500"
                   />
                   Remember me
                 </label>

package/src/screens/NewAddressScreen.tsx

@@ -91,8 +91,8 @@ export default function NewAddressPage() {
 
     return (
         <div className="min-h-screen bg-slate-50">
-            <div className="relative bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
-                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.35),_transparent_60%)]" />
+            <div className="relative bg-linear-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] text-white">
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.35),transparent_60%)]" />
                 <div className="relative container mx-auto px-4 py-8">
                     <button
                         onClick={() => router.back()}
@@ -175,7 +175,7 @@ export default function NewAddressPage() {
                             <div className="flex justify-end gap-4">
                                 <Button
                                     type="button"
-                                    variant="outline"
+                                    variant="outline-solid"
                                     onClick={() => router.back()}
                                 >
                                     Cancel

package/src/screens/OrdersScreen.tsx

@@ -112,7 +112,7 @@ export function OrdersScreen() {
           {!isLoading && pagination.totalPages > 1 && hasOrders && (
             <div className="mt-8 flex flex-wrap items-center justify-center gap-4 pt-6 border-t border-gray-200">
               <Button
-                variant="outline"
+                variant="outline-solid"
                 onClick={() => setPage((current) => Math.max(1, current - 1))}
                 disabled={page === 1}
                 className="rounded-full border-2 border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -124,7 +124,7 @@ export function OrdersScreen() {
                 Page {page} of {pagination.totalPages}
               </span>
               <Button
-                variant="outline"
+                variant="outline-solid"
                 onClick={() =>
                   setPage((current) => Math.min(pagination.totalPages, current + 1))
                 }