feat: implement density-aware spacing system

- Move density-aware spacing variables from :root to .preview-frame in theme-layer2-attributes.css
  This ensures the variables can reference the correct --t-density value set by data attributes
- Remove density variables from theme-semantic.css to avoid CSS variable scoping issues
- Update home.html.heex to use var(--space-*) instead of Tailwind spacing classes
  Hero section, product grid, and cards now respond to density changes
- Verified all three density modes work correctly (compact: 0.85, balanced: 1, spacious: 1.25)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/css/theme-layer2-attributes.css

@@ -156,6 +156,16 @@
   --t-density: 0.85;
 }
 
+/* Density-aware spacing variables */
+.preview-frame {
+  --space-xs: calc(var(--p-space-2) * var(--t-density));
+  --space-sm: calc(var(--p-space-3) * var(--t-density));
+  --space-md: calc(var(--p-space-4) * var(--t-density));
+  --space-lg: calc(var(--p-space-6) * var(--t-density));
+  --space-xl: calc(var(--p-space-8) * var(--t-density));
+  --space-2xl: calc(var(--p-space-12) * var(--t-density));
+}
+
 /* Header Layout */
 .shop-nav {
   display: flex;

assets/css/theme-semantic.css

@@ -50,14 +50,6 @@
   --weight-heading: var(--t-heading-weight);
   --tracking-heading: var(--t-heading-tracking);
 
-  /* Responsive spacing (density-aware) */
-  --space-xs: calc(var(--p-space-2) * var(--t-density));
-  --space-sm: calc(var(--p-space-3) * var(--t-density));
-  --space-md: calc(var(--p-space-4) * var(--t-density));
-  --space-lg: calc(var(--p-space-6) * var(--t-density));
-  --space-xl: calc(var(--p-space-8) * var(--t-density));
-  --space-2xl: calc(var(--p-space-12) * var(--t-density));
-
   /* Border radius */
   --radius-button: var(--t-radius-button);
   --radius-card: var(--t-radius-card);