feat(design-system): standardize color and typography tokens via Tailwind v4 @theme configuration

frontend/application/app/globals.css

@@ -84,7 +84,7 @@
   --color-canina-teal: #9BC8CC;
   --color-canina-dark: #060709;
   
-  /* Core UI color mappings (harmonies based on brand palette) */
+  /* Core UI Medical Gray Palette */
   --color-medical-gray-50: #FFFFFF;     /* pure white main background */
   --color-medical-gray-100: #F4F7F6;    /* light warm gray for alternate sections */
   --color-medical-gray-200: #E5ECE9;    /* light box background / border color */
@@ -95,6 +95,12 @@
   --color-medical-gray-700: #2C3E42;    /* deep text */
   --color-medical-gray-800: #19272B;    /* very dark text */
   --color-medical-gray-900: #060709;    /* primary font color / logo */
+
+  /* Standardized Typography Scale */
+  --text-3xs: 0.5rem;       /* 8px - micro badges */
+  --text-2xs: 0.5625rem;    /* 9px - super micro labels */
+  --text-xs-plus: 0.6875rem; /* 11px - fine print, timestamps, meta tags */
+  --text-sm-minus: 0.8125rem; /* 13px - compact body */
 }
 
 @layer base {

frontend/application/components/ArchivePage.tsx

@@ -115,13 +115,13 @@ const ArchiveProductCard: React.FC<{ product: Product }> = ({ product }) => {
         className="group bg-white rounded-[2.5rem] border border-medical-gray-200 overflow-hidden hover:shadow-2xl transition-all flex flex-col h-full relative"
       >
         {product.specialBadge && (
-          <div className="absolute top-4 right-4 z-10 bg-canina-blue text-white text-[9px] font-black uppercase tracking-widest px-3 py-1 rounded-full shadow-lg">
+          <div className="absolute top-4 right-4 z-10 bg-canina-blue text-white text-2xs font-black uppercase tracking-widest px-3 py-1 rounded-full shadow-lg">
             {product.specialBadge}
           </div>
         )}
 
         {compatibility && (
-          <div className={`absolute top-14 right-4 z-10 text-[8px] font-black uppercase tracking-widest px-3 py-1 rounded-full shadow-md flex items-center gap-1 ${compatibility.type === 'alert' ? 'bg-amber-100 text-amber-700' :
+          <div className={`absolute top-14 right-4 z-10 text-3xs font-black uppercase tracking-widest px-3 py-1 rounded-full shadow-md flex items-center gap-1 ${compatibility.type === 'alert' ? 'bg-amber-100 text-amber-700' :
               compatibility.type === 'success' ? 'bg-green-100 text-green-700' : 'bg-medical-gray-100 text-medical-gray-600'
             }`}>
             {compatibility.type === 'alert' ? <AlertCircle className="w-2.5 h-2.5" /> : compatibility.type === 'success' ? <Heart className="w-2.5 h-2.5" /> : <Sparkles className="w-2.5 h-2.5" />}
@@ -152,13 +152,13 @@ const ArchiveProductCard: React.FC<{ product: Product }> = ({ product }) => {
         </div>
 
         <div className="p-6 flex flex-col flex-1">
-          <div className="text-[10px] font-bold text-canina-blue uppercase tracking-widest mb-2">{product.category}</div>
+          <div className="text-2xs font-bold text-canina-blue uppercase tracking-widest mb-2">{product.category}</div>
           <div className="flex flex-col gap-1 mb-3">
             <h3 dir="rtl" className="text-base font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors leading-tight text-right font-vazir">
               {product.nameFa || product.name}
             </h3>
             {product.nameEn && (
-              <span dir="ltr" className="text-[11px] font-bold text-slate-400 font-sans text-left block">
+              <span dir="ltr" className="text-xs-plus font-bold text-slate-400 font-sans text-left block">
                 {product.nameEn}
               </span>
             )}
@@ -166,7 +166,7 @@ const ArchiveProductCard: React.FC<{ product: Product }> = ({ product }) => {
 
           <div className="flex flex-wrap gap-1">
             {product.symptoms.slice(0, 2).map((s, i) => (
-              <span key={i} className="text-[9px] font-bold bg-medical-gray-100 text-medical-gray-500 px-2 py-0.5 rounded-md">
+              <span key={i} className="text-2xs font-bold bg-medical-gray-100 text-medical-gray-500 px-2 py-0.5 rounded-md">
                 {s}
               </span>
             ))}
@@ -179,7 +179,7 @@ const ArchiveProductCard: React.FC<{ product: Product }> = ({ product }) => {
               <span className="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-md">تماس جهت استعلام قیمت</span>
             )}
             {(product.packageSize !== undefined && product.packageSize !== null ? Number(product.packageSize) : 100) <= 0 ? (
-              <span className="px-2.5 py-1.5 rounded-xl bg-rose-50 text-rose-600 border border-rose-100 text-[11px] font-bold font-vazir">
+              <span className="px-2.5 py-1.5 rounded-xl bg-rose-50 text-rose-600 border border-rose-100 text-xs-plus font-bold font-vazir">
                 ناموجود
               </span>
             ) : !useSettingsStore.getState().getText("catalog_disable_cart", "false").includes("true") && (

frontend/application/components/FeaturedProducts.tsx

@@ -52,13 +52,13 @@ function ProductCard({ product }: { product: Product }) {
       className="group bg-white/90 backdrop-blur-md rounded-2xl sm:rounded-3xl border border-medical-gray-200/80 overflow-hidden hover:shadow-xl hover:shadow-canina-blue/10 hover:border-canina-blue/30 transition-all duration-300 flex flex-col cursor-pointer relative"
     >
       {/* Category Badge */}
-      <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-30 px-2.5 py-1 bg-white/90 backdrop-blur-md rounded-full border border-medical-gray-200/80 text-[9px] sm:text-[10px] font-black text-medical-gray-700 uppercase tracking-wider shadow-xs group-hover:bg-canina-blue group-hover:text-white transition-all">
+      <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-30 px-2.5 py-1 bg-white/90 backdrop-blur-md rounded-full border border-medical-gray-200/80 text-2xs sm:text-xs font-black text-medical-gray-700 uppercase tracking-wider shadow-xs group-hover:bg-canina-blue group-hover:text-white transition-all">
         {product.category}
       </div>
 
       {/* Compatibility Tag */}
       {compatibility && (
-        <div className={`absolute top-[2.8rem] sm:top-[3.25rem] right-3 sm:right-4 z-10 text-[8px] font-black uppercase tracking-widest px-2.5 py-0.5 rounded-full shadow-xs flex items-center gap-1 ${
+        <div className={`absolute top-[2.8rem] sm:top-[3.25rem] right-3 sm:right-4 z-10 text-3xs font-black uppercase tracking-widest px-2.5 py-0.5 rounded-full shadow-xs flex items-center gap-1 ${
           compatibility.type === "alert" ? "bg-amber-100 text-amber-700" :
           compatibility.type === "success" ? "bg-green-100 text-green-700" : "bg-medical-gray-100 text-medical-gray-600"
         }`}>
@@ -119,18 +119,18 @@ function ProductCard({ product }: { product: Product }) {
       <div className="px-3.5 py-3 sm:px-5 sm:py-4 flex flex-col flex-1 gap-2 sm:gap-3">
         {/* Dual-language Name */}
         <div className="flex flex-col gap-0.5">
-          <h3 dir="rtl" className="text-xs sm:text-[14px] font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors leading-snug text-right line-clamp-1 sm:line-clamp-2 font-vazir">
+          <h3 dir="rtl" className="text-xs sm:text-sm font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors leading-snug text-right line-clamp-1 sm:line-clamp-2 font-vazir">
             {nameFa}
           </h3>
           {nameEn && (
-            <span dir="ltr" className="text-[10px] sm:text-[11px] font-semibold text-slate-400 font-sans text-left block line-clamp-1">
+            <span dir="ltr" className="text-2xs sm:text-xs-plus font-semibold text-slate-400 font-sans text-left block line-clamp-1">
               {nameEn}
             </span>
           )}
         </div>
 
         {/* Short description */}
-        <p className="text-[11px] sm:text-xs text-medical-gray-500 leading-relaxed line-clamp-1 sm:line-clamp-2 flex-1">
+        <p className="text-xs-plus sm:text-xs text-medical-gray-500 leading-relaxed line-clamp-1 sm:line-clamp-2 flex-1">
           {product.shortDescription || product.description || ''}
         </p>
 
@@ -140,11 +140,11 @@ function ProductCard({ product }: { product: Product }) {
             {showPrices ? (typeof product.price === 'string' || typeof product.price === 'number' ? String(product.price) : 'تماس بگیرید') : 'تماس بگیرید'}
           </div>
           {showPreorderBtn ? (
-            <span className="text-[10px] sm:text-[11px] font-black text-amber-600 bg-amber-50 px-2.5 py-1 rounded-full border border-amber-200">
+            <span className="text-2xs sm:text-xs-plus font-black text-amber-600 bg-amber-50 px-2.5 py-1 rounded-full border border-amber-200">
               ثبت پیش‌خرید
             </span>
           ) : (
-            <span className="text-[10px] sm:text-[11px] font-black text-canina-blue uppercase tracking-wider border-b border-canina-blue pb-0.5 group-hover:text-medical-gray-900 group-hover:border-medical-gray-900 transition-all whitespace-nowrap">
+            <span className="text-2xs sm:text-xs-plus font-black text-canina-blue uppercase tracking-wider border-b border-canina-blue pb-0.5 group-hover:text-medical-gray-900 group-hover:border-medical-gray-900 transition-all whitespace-nowrap">
               {getText("product_view_details", "مشاهده جزئیات")}
             </span>
           )}

frontend/application/components/ProductPage.tsx

@@ -447,13 +447,13 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
                   </div>
                   <h3 className="text-sm sm:text-base font-black text-medical-gray-900 font-vazir">علائم و موارد درمانی مرتبط</h3>
                 </div>
-                <p className="text-[11px] sm:text-[12px] text-medical-gray-400 font-vazir font-bold">این محصول برای رفع علائم زیر توسط دامپزشکان توصیه می‌شود:</p>
+                <p className="text-xs-plus sm:text-xs text-medical-gray-400 font-vazir font-bold">این محصول برای رفع علائم زیر توسط دامپزشکان توصیه می‌شود:</p>
                 <div className="flex flex-wrap gap-1.5 sm:gap-2">
                   {fullProduct.symptoms.map((symptom: string, idx: number) => (
                     <a
                       key={idx}
                       href={`/shop?symptom=${encodeURIComponent(symptom)}`}
-                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] sm:text-[11px] font-bold bg-white border border-canina-blue/20 text-canina-blue hover:bg-canina-blue hover:text-white hover:border-canina-blue transition-all shadow-2xs cursor-pointer font-vazir whitespace-nowrap"
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold bg-white border border-canina-blue/20 text-canina-blue hover:bg-canina-blue hover:text-white hover:border-canina-blue transition-all shadow-2xs cursor-pointer font-vazir whitespace-nowrap"
                     >
                       <span className="w-1.5 h-1.5 rounded-full bg-current opacity-60" />
                       {symptom}

frontend/application/components/Tooltip.tsx

@@ -97,7 +97,7 @@ export default function Tooltip({ termKey, children, onWikiNavigate }: TooltipPr
           >
             <div className="flex items-center gap-2 mb-2 text-canina-blue">
               <Info className="w-4 h-4 shrink-0 text-canina-blue" />
-              <span className="font-black text-[11px] uppercase tracking-widest text-canina-blue">دانشنامه علمی کنینا</span>
+              <span className="font-black text-xs-plus uppercase tracking-widest text-canina-blue">دانشنامه علمی کنینا</span>
             </div>
             <h5 className="font-black text-base text-medical-gray-900 mb-2 leading-snug">{termData.term}</h5>
             <p className="text-medical-gray-800 text-xs leading-relaxed mb-4 font-bold text-justify">