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);

lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex

@@ -19,7 +19,7 @@
 
   <!-- Hero Section -->
   <div class="relative" style="background-color: var(--t-surface-raised);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
+    <div class="max-w-7xl mx-auto" style="padding: var(--space-2xl) var(--space-md);">
       <div class="text-center">
         <h1 class="text-4xl md:text-6xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
           Welcome to Our Store
@@ -38,20 +38,20 @@
   </div>
 
   <!-- Featured Products -->
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+  <div class="max-w-7xl mx-auto" style="padding: var(--space-2xl) var(--space-md);">
     <h2 class="text-3xl font-bold mb-8" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight);">
       Featured Products
     </h2>
 
     <div class={[
-      "grid gap-6 grid-cols-1 sm:grid-cols-2",
+      "grid grid-cols-1 sm:grid-cols-2",
       case @theme_settings.grid_columns do
         "2" -> "lg:grid-cols-2"
         "3" -> "lg:grid-cols-3"
         "4" -> "lg:grid-cols-4"
         _ -> "lg:grid-cols-3"
       end
-    ]}>
+    ]} style="gap: var(--space-lg);">
       <%= for product <- Enum.take(@preview_data.products, 6) do %>
         <div
           class="group overflow-hidden transition-all"
@@ -64,8 +64,8 @@
               class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
             />
           </div>
-          <div class="p-4">
+          <div style="padding: var(--space-md);">
-            <h3 class="font-semibold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary);">
+            <h3 class="font-semibold" style="font-family: var(--t-font-heading); color: var(--t-text-primary); margin-bottom: var(--space-xs);">
               <%= product.name %>
             </h3>
             <p class="text-sm mb-3" style="color: var(--t-text-secondary);">