migrate accent colours from HSL to oklch, inject theme into admin

Phase 1: Replace hex_to_hsl with hex_to_oklch in CSSGenerator, output
--t-accent-l/c/h instead of --t-accent-h/s/l. All 46 HSL accent
references across theme-semantic.css, theme-layer2-attributes.css, and
shop/components.css replaced with oklch/color-mix equivalents. Dead
style*= attribute selectors for button variants replaced with proper
class-based selectors. Added color-scheme: light/dark to mood output.

Phase 2: Add LoadTheme plug to admin pipeline, extend AdminLayoutHook
with theme_settings and generated_css assigns, add font preloads and
generated CSS injection to admin_root.html.heex. No visual changes to
admin yet — .themed wrapper added in next phase.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

test/berrypod/settings_test.exs

@@ -76,15 +76,15 @@ defmodule Berrypod.SettingsTest do
       # Cache should now contain new CSS with the red accent color
       {:ok, updated_css} = CSSCache.get()
       assert updated_css =~ ".themed {"
-      # Red = hue 0
-      assert updated_css =~ "--t-accent-h: 0"
+      # Red in oklch ≈ hue 29°
+      assert updated_css =~ "--t-accent-h: 29.23"
 
       # Change to blue
       {:ok, _settings} = Settings.update_theme_settings(%{accent_color: "#0000ff"})
 
       {:ok, blue_css} = CSSCache.get()
-      # Blue = hue 240
-      assert blue_css =~ "--t-accent-h: 240"
+      # Blue in oklch ≈ hue 264°
+      assert blue_css =~ "--t-accent-h: 264.05"
 
       # Restore default
       CSSCache.warm()

test/berrypod/theme/css_generator_test.exs

@@ -12,44 +12,54 @@ defmodule Berrypod.Theme.CSSGeneratorTest do
       assert is_binary(css)
       # CSS targets .themed (used by both shop and preview)
       assert css =~ ".themed {"
-      assert css =~ "--t-accent-h:"
-      assert css =~ "--t-accent-s:"
       assert css =~ "--t-accent-l:"
+      assert css =~ "--t-accent-c:"
+      assert css =~ "--t-accent-h:"
       # Should include all theme token categories
       assert css =~ "--t-surface-base:"
       assert css =~ "--t-font-heading:"
       assert css =~ "--t-radius-sm:"
       assert css =~ "--t-density:"
+      # Should include color-scheme
+      assert css =~ "color-scheme:"
     end
 
-    test "converts hex colors to HSL" do
+    test "converts hex colours to oklch" do
       settings = %ThemeSettings{accent_color: "#ff0000"}
       css = CSSGenerator.generate(settings)
 
-      # Red should be H=0, S=100%, L=50%
-      assert css =~ "--t-accent-h: 0"
-      assert css =~ "--t-accent-s: 100%"
-      assert css =~ "--t-accent-l: 50%"
+      # Red in oklch: L≈62.8%, C≈0.2577, H≈29.23°
+      assert css =~ "--t-accent-l: 62.8"
+      assert css =~ "--t-accent-c: 0.257"
+      assert css =~ "--t-accent-h: 29.2"
     end
 
-    test "handles blue accent color" do
+    test "handles blue accent colour" do
       settings = %ThemeSettings{accent_color: "#0000ff"}
       css = CSSGenerator.generate(settings)
 
-      # Blue should be H=240, S=100%, L=50%
-      assert css =~ "--t-accent-h: 240"
-      assert css =~ "--t-accent-s: 100%"
-      assert css =~ "--t-accent-l: 50%"
+      # Blue in oklch: L≈45.2%, C≈0.3132, H≈264.05°
+      assert css =~ "--t-accent-l: 45.2"
+      assert css =~ "--t-accent-c: 0.313"
+      assert css =~ "--t-accent-h: 264."
     end
 
-    test "handles green accent color" do
+    test "handles green accent colour" do
       settings = %ThemeSettings{accent_color: "#00ff00"}
       css = CSSGenerator.generate(settings)
 
-      # Green should be H=120, S=100%, L=50%
-      assert css =~ "--t-accent-h: 120"
-      assert css =~ "--t-accent-s: 100%"
-      assert css =~ "--t-accent-l: 50%"
+      # Green in oklch: L≈86.6%, C≈0.2948, H≈142.5°
+      assert css =~ "--t-accent-l: 86.6"
+      assert css =~ "--t-accent-c: 0.294"
+      assert css =~ "--t-accent-h: 142."
+    end
+
+    test "sets color-scheme based on mood" do
+      light = CSSGenerator.generate(%ThemeSettings{mood: "neutral"})
+      dark = CSSGenerator.generate(%ThemeSettings{mood: "dark"})
+
+      assert light =~ "color-scheme: light"
+      assert dark =~ "color-scheme: dark"
     end
 
     test "includes secondary colors" do