fix: add data attributes and Google Fonts to enable theme visual changes

- Add Google Fonts link to root layout for typography presets
- Add data-mood, data-typography, data-shape, data-density attributes to preview-frame
- Create theme-layer2-attributes.css with attribute-based CSS from demo
- Move theme CSS files from priv/static/css to assets/css for proper compilation
- Update CSS import order (primitives → layer2 → semantic)
- Add 'css' to static_paths to serve theme CSS files

This fixes the issue where theme controls updated the database but didn't
visually affect the preview. The demo's attribute-based CSS system is now
properly integrated with the Phoenix LiveView implementation.

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

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

test/simpleshop_theme_web/live/theme_live_test.exs

@@ -114,5 +114,102 @@ defmodule SimpleshopThemeWeb.ThemeLiveTest do
       assert html =~ "Contact"
       assert html =~ "404"
     end
+
+    test "mood customization buttons work", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/theme")
+
+      # Click the "dark" mood button
+      html =
+        view
+        |> element("button", "dark")
+        |> render_click()
+
+      # Verify the setting was updated
+      theme_settings = Settings.get_theme_settings()
+      assert theme_settings.mood == "dark"
+      assert html =~ "dark"
+    end
+
+    test "shape customization buttons work", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/theme")
+
+      # Click the "round" shape button
+      view
+      |> element("button", "round")
+      |> render_click()
+
+      # Verify the setting was updated
+      theme_settings = Settings.get_theme_settings()
+      assert theme_settings.shape == "round"
+    end
+
+    test "density customization buttons work", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/theme")
+
+      # Click the "compact" density button
+      view
+      |> element("button", "compact")
+      |> render_click()
+
+      # Verify the setting was updated
+      theme_settings = Settings.get_theme_settings()
+      assert theme_settings.density == "compact"
+    end
+
+    test "grid columns customization buttons work", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/theme")
+
+      # Click the "2" grid columns button
+      view
+      |> element("button", "2")
+      |> render_click()
+
+      # Verify the setting was updated
+      theme_settings = Settings.get_theme_settings()
+      assert theme_settings.grid_columns == "2"
+    end
+
+    test "typography customization select works", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/theme")
+
+      # Change typography via the form
+      view
+      |> element("form[phx-value-field='typography']")
+      |> render_change(%{"typography" => "modern"})
+
+      # Verify the setting was updated
+      theme_settings = Settings.get_theme_settings()
+      assert theme_settings.typography == "modern"
+    end
+
+    test "header layout customization buttons work", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/theme")
+
+      # Click the "centered" header layout button
+      view
+      |> element("button", "centered")
+      |> render_click()
+
+      # Verify the setting was updated
+      theme_settings = Settings.get_theme_settings()
+      assert theme_settings.header_layout == "centered"
+    end
+
+    test "CSS regenerates when settings change", %{conn: conn} do
+      {:ok, view, html} = live(conn, ~p"/admin/theme")
+
+      # Capture initial CSS
+      initial_css = html
+
+      # Change a setting
+      new_html =
+        view
+        |> element("button", "dark")
+        |> render_click()
+
+      # Verify CSS has changed (dark mode should have different surface colors)
+      refute initial_css == new_html
+      assert new_html =~ "--t-surface-base:"
+    end
   end
 end