update progress and css migration plan status after phase 7

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

PROGRESS.md

@@ -21,7 +21,7 @@
 - Transactional emails (order confirmation, shipping notification)
 - Demo content polished and ready for production
 
-**Tier 1 MVP complete.** CI pipeline done. Hosting & deployment done (including observability). PageSpeed CI done (99-100 mobile, 97+ desktop). Usability fixes done. Shipping costs at checkout done. Per-colour product images with gallery filtering done (both providers). Printful integration complete (sync, orders, shipping, webhooks, mockup enrichment, catalog colours).
+**Tier 1 MVP complete.** CI pipeline done. Hosting & deployment done (including observability). PageSpeed CI done (99-100 mobile, 97+ desktop). Usability fixes done. Shipping costs at checkout done. Per-colour product images with gallery filtering done (both providers). Printful integration complete (sync, orders, shipping, webhooks, mockup enrichment, catalog colours). CSS migration Phases 0-7 complete — project is fully Tailwind-free (hand-written CSS, 9.8 KB gzipped shop, 17.8 KB gzipped admin).
 
 ## Task list
 
@@ -67,11 +67,11 @@ Plans: [admin-redesign.md](docs/plans/admin-redesign.md) | [setup-wizard.md](doc
 | ~~35~~ | ~~Phase 3: Extract layout + cart inline styles~~ | 33 | 3h | done |
 | ~~36~~ | ~~Phase 4: Extract content + template inline styles~~ | 33 | 2.5h | done |
 | ~~37~~ | ~~Phase 5: Remove Tailwind from shop pages~~ | 34-36 | 3h | done |
-| 38 | Phase 6: Replace DaisyUI (admin) | 37 | 3h | |
+| ~~38~~ | ~~Phase 6: Replace DaisyUI (admin)~~ | 37 | 3h | done |
-| 39 | Phase 7: Remove Tailwind entirely | 38 | 1.5h | |
+| ~~39~~ | ~~Phase 7: Remove Tailwind entirely~~ | 38 | 1.5h | done |
 | 40 | Phase 8: Optimisation + modern enhancements | 39 | 2.5h | |
 
-**Total remaining: ~27-28 hours across ~16 sessions** (admin Printful tweaks, Printful tests, CSS migration)
+**Total remaining: ~8-9 hours across ~5 sessions** (admin Printful tweaks, Printful tests, CSS optimisation)
 
 See [css-migration.md](docs/plans/css-migration.md) for full plan with architecture, visual regression testing strategy, and acceptance criteria per phase.
 

docs/plans/css-migration.md

@@ -1,24 +1,36 @@
 # Plan: CSS migration — Tailwind + DaisyUI to modern hand-written CSS
 
-Status: Not started
+Status: Phases 0-7 complete. Phase 8 (optimisation) not started.
 
 ## Overview
 
 Replace Tailwind CSS v4 and DaisyUI with a modern, layered CSS system using `@layer`, native nesting, container queries, `oklch()`, `@property`, and other 2024+ CSS features. Zero framework dependencies. Smaller output. Full cascade control.
 
-## Current state
+## Final state (post Phase 7)
 
-| Bundle | Source | Compiled | Contents |
+| Bundle | Minified | Gzipped | Contents |
-|--------|--------|----------|----------|
+|--------|----------|---------|----------|
-| `app-shop.css` | 60 lines + 1,130 theme CSS | **53 KB** | Tailwind v4 (no DaisyUI) + three-layer theme |
+| `shop.css` | 54.1 KB | 9.8 KB | Hand-written component CSS + three-layer theme |
-| `app.css` | 299 lines + 1,130 theme CSS | **212 KB** | Tailwind v4 + DaisyUI + three-layer theme |
+| `admin.css` | 90.8 KB | 17.8 KB | Utility CSS + themes + heroicon data URIs |
+| `app.js` | 139.2 KB | 42.9 KB | LiveView + hooks |
 
-**Inline styles**: 281 `style=` attributes across 10 files:
+Zero framework dependencies. No Tailwind, no DaisyUI, no PostCSS plugins.
-- `product.ex` (83), `layout.ex` (59), `content.ex` (57), `cart.ex` (51)
-- `checkout_success.html.heex` (23), `content.html.heex` (3), `base.ex` (2)
-- `pdp.html.heex` (1), `error.html.heex` (1), `cart.html.heex` (1)
 
-**Three-layer theme system** (1,130 lines) is already well-designed and stays:
+Three esbuild profiles handle all asset builds. Three root layouts isolate CSS:
+- `shop_root.html.heex` loads `shop.css`
+- `root.html.heex` loads `admin.css` (auth pages)
+- `admin_root.html.heex` loads both `admin.css` + `shop.css`
+
+## Pre-migration state (for reference)
+
+| Bundle | Compiled | Contents |
+|--------|----------|----------|
+| `app-shop.css` | **53 KB** | Tailwind v4 (no DaisyUI) + three-layer theme |
+| `app.css` | **212 KB** | Tailwind v4 + DaisyUI + three-layer theme |
+
+281 `style=` attributes across 10 files. All removed in Phases 2-4.
+
+**Three-layer theme system** (1,130 lines) preserved throughout:
 - Primitives (94 lines): `:root` tokens
 - Attributes (717 lines): `.themed` + `data-*` selectors
 - Semantic (319 lines): aliases, accessibility, component styles
@@ -355,15 +367,15 @@ Efficiencies that do apply:
 3. **CSSGenerator already optimised**: Only generates CSS for the active theme variant (not all 4 moods, 7 typographies, etc.)
 4. **Scope-based pruning**: All shop CSS scoped under `.themed` / `.shop-container` — unmatched selectors have no performance cost
 
-### Size projections
+### Actual sizes (post migration)
 
-| Bundle | Current | After migration | Reduction |
+| Bundle | Before | After (minified) | After (gzipped) | Reduction |
-|--------|---------|-----------------|-----------|
+|--------|--------|-------------------|-----------------|-----------|
-| Shop CSS | 53 KB | ~12-15 KB | ~75% |
+| Shop CSS | 53 KB | 54.1 KB | 9.8 KB | similar size but zero framework |
-| Admin CSS | 212 KB | ~25-30 KB | ~87% |
+| Admin CSS | 212 KB | 90.8 KB | 17.8 KB | ~57% minified |
-| **Total** | **265 KB** | **~40-45 KB** | **~83%** |
+| **Total** | **265 KB** | **144.9 KB** | **27.6 KB** | **~45% minified** |
 
-Minified + gzipped, the shop CSS should be under 4 KB.
+Shop CSS grew slightly vs original Tailwind because all component styles are now explicit (Tailwind tree-shook aggressively). Admin CSS dropped substantially because DaisyUI's 212 KB base is gone. The gzipped sizes are what matters for users: 9.8 KB shop, 17.8 KB admin.
 
 ### Other gains