refactor: reduce Card component spacing for more compact design

Update Card padding and spacing values to create a tighter, more efficient layout:
- Reduce gap between card parts from 12px to 8px
- Update Card.Body internal gap from 12px to 8px
- Adjust default Card padding prop to var(--ai-spacing-8) (16px)

These changes create a more compact card design while maintaining readability.

Author: JakeLin

packages/ui/src/components/Card/Card.module.css

@@ -3,7 +3,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--ai-spacing-6); /* 12px - default spacing between compound components */
+  gap: var(--ai-spacing-4); /* 8px - default spacing between compound components */
   box-sizing: border-box;
   background: color-mix(
     in srgb,
@@ -13,7 +13,7 @@
   border-radius: var(--ai-radius-xl);
   border: 0.5px solid var(--card-border-color, var(--ai-color-border-heavy));
   box-shadow: var(--card-shadow-value, var(--ai-elevation-1-shadow));
-  padding: var(--ai-spacing-16);
+  padding: var(--ai-spacing-2);
   overflow: hidden;
   transition:
     transform 0.2s ease,

packages/ui/src/components/Card/Card.tsx

@@ -101,7 +101,7 @@ const CardBase = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     border = 'heavy',
     hoverElevationLevel,
     interactive = false,
-    padding = 'var(--ai-spacing-12)',
+    padding = 'var(--ai-spacing-8)',
     loading = false,
     skeleton,
     error = false,

packages/ui/src/components/Card/CardParts.module.css

@@ -9,7 +9,7 @@
 .cardBody {
   display: flex;
   flex-direction: column;
-  gap: var(--ai-spacing-6); /* 12px - comfortable spacing for main content */
+  gap: var(--ai-spacing-4); /* 8px - comfortable spacing for main content */
   flex: 1;
 }