feat: Add xSmall size and destructive variant to UiChip, refactor AttireItemCard to use these new chip features, and adjust body4r font size.

apps/mobile/packages/design_system/lib/src/ui_typography.dart

@@ -374,7 +374,7 @@ class UiTypography {
   /// Body 4 Regular - Font: Instrument Sans, Size: 14, Height: 1.5, Spacing: 0.05 (#121826)
   static final TextStyle body4r = _primaryBase.copyWith(
     fontWeight: FontWeight.w400,
-    fontSize: 12,
+    fontSize: 10,
     height: 1.5,
     letterSpacing: 0.05,
     color: UiColors.textPrimary,

apps/mobile/packages/design_system/lib/src/widgets/ui_chip.dart

@@ -5,6 +5,9 @@ import '../ui_typography.dart';
 
 /// Sizes for the [UiChip] widget.
 enum UiChipSize {
+  // X-Small size (e.g. for tags in tight spaces).
+  xSmall,
+
   /// Small size (e.g. for tags in tight spaces).
   small,
 
@@ -25,6 +28,9 @@ enum UiChipVariant {
 
   /// Accent style with highlight background.
   accent,
+
+  /// Desructive style with red background.
+  destructive,
 }
 
 /// A custom chip widget with supports for different sizes, themes, and icons.
@@ -119,6 +125,8 @@ class UiChip extends StatelessWidget {
         return UiColors.tagInProgress;
       case UiChipVariant.accent:
         return UiColors.accent;
+      case UiChipVariant.destructive:
+        return UiColors.iconError.withValues(alpha: 0.1);
     }
   }
 
@@ -134,11 +142,15 @@ class UiChip extends StatelessWidget {
         return UiColors.primary;
       case UiChipVariant.accent:
         return UiColors.accentForeground;
+      case UiChipVariant.destructive:
+        return UiColors.iconError;
     }
   }
 
   TextStyle _getTextStyle() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return UiTypography.body4r;
       case UiChipSize.small:
         return UiTypography.body3r;
       case UiChipSize.medium:
@@ -150,6 +162,8 @@ class UiChip extends StatelessWidget {
 
   EdgeInsets _getPadding() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return const EdgeInsets.symmetric(horizontal: 6, vertical: 4);
       case UiChipSize.small:
         return const EdgeInsets.symmetric(horizontal: 10, vertical: 6);
       case UiChipSize.medium:
@@ -161,6 +175,8 @@ class UiChip extends StatelessWidget {
 
   double _getIconSize() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return 10;
       case UiChipSize.small:
         return 12;
       case UiChipSize.medium:
@@ -172,6 +188,8 @@ class UiChip extends StatelessWidget {
 
   double _getGap() {
     switch (size) {
+      case UiChipSize.xSmall:
+        return UiConstants.space1;
       case UiChipSize.small:
         return UiConstants.space1;
       case UiChipSize.medium: