From 65ea11c3a20ecdfeb5d7a772b7a8f720356699a6 Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Sat, 21 Feb 2026 00:13:33 +0000
Subject: [PATCH] replace --color-* with --t-* tokens, delete bridge and
 .preview-frame

Phase 4: admin components and utilities now reference --t-* theme
tokens directly. Status colour tokens added to theme-semantic.css.
Bridge file (admin/themes.css) deleted.

Phase 5: removed duplicated .preview-frame CSS block (~160 lines).
Admin components and icons wrapped in @layer admin. Layer order
updated in admin_root to include admin layer.

Phase 6: added prefers-reduced-motion support (zeroes all durations
and disables animations). Migrated physical properties to logical
equivalents (text-align start/end, margin-inline, padding-inline,
inset-inline-end) across shop and admin CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/css/admin.css                          | 167 +-------------
 assets/css/admin/components.css               | 217 +++++++++---------
 assets/css/admin/icons.css                    |   4 +
 assets/css/admin/themes.css                   |  37 ---
 assets/css/admin/utilities.css                | 112 ++++-----
 assets/css/shop/components.css                |  27 ++-
 assets/css/theme-semantic.css                 |  37 ++-
 .../components/layouts/admin_root.html.heex   |   2 +-
 .../live/admin/theme/index.html.heex          |   2 +-
 .../live/theme_css_consistency_test.exs       |  14 +-
 10 files changed, 225 insertions(+), 394 deletions(-)
 delete mode 100644 assets/css/admin/themes.css

diff --git a/assets/css/admin.css b/assets/css/admin.css
index cda5d02..b0da78a 100644
--- a/assets/css/admin.css
+++ b/assets/css/admin.css
@@ -1,8 +1,7 @@
 /* Admin CSS — bundled by esbuild */
 
-/* Reset and colour themes */
+/* Reset */
 @import "./admin/reset.css";
-@import "./admin/themes.css";
 
 /* Theme CSS layers (used by theme editor preview) */
 @import "./theme-primitives.css";
@@ -18,167 +17,3 @@
 .phx-click-loading, .phx-submit-loading, .phx-change-loading {
   /* Available for component styling */
 }
-
-/* =============================================
-   THEME EDITOR ONLY: .preview-frame CSS variable switching
-   These rules enable live theme switching in the editor.
-   Shop pages get CSS variables inline from CSSGenerator.
-   ============================================= */
-
-.preview-frame {
-  /* Mood - Default (Neutral) */
-  --t-surface-base: #ffffff;
-  --t-surface-raised: #ffffff;
-  --t-surface-sunken: #f5f5f5;
-  --t-surface-overlay: rgba(255, 255, 255, 0.95);
-  --t-text-primary: #171717;
-  --t-text-secondary: #525252;
-  --t-text-tertiary: #a3a3a3;
-  --t-text-inverse: #ffffff;
-  --t-border-default: #e5e5e5;
-  --t-border-subtle: #f0f0f0;
-
-  /* Typography - Default (Clean) */
-  --t-font-heading: var(--p-font-manrope);
-  --t-font-body: var(--p-font-inter);
-  --t-heading-weight: 600;
-  --t-heading-tracking: -0.02em;
-
-  /* Shape - Default (Soft) */
-  --t-radius-sm: var(--p-radius-sm);
-  --t-radius-md: var(--p-radius-md);
-  --t-radius-lg: var(--p-radius-lg);
-  --t-radius-button: var(--p-radius-md);
-  --t-radius-card: var(--p-radius-lg);
-  --t-radius-input: var(--p-radius-md);
-  --t-radius-image: var(--p-radius-md);
-
-  /* Density - Default (Balanced) */
-  --t-density: 1;
-  --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));
-
-  /* Mood Variants */
-  &[data-mood="warm"] {
-    --t-surface-base: #fdf8f3;
-    --t-surface-raised: #fffcf8;
-    --t-surface-sunken: #f5ebe0;
-    --t-text-primary: #1c1917;
-    --t-text-secondary: #57534e;
-    --t-text-tertiary: #a8a29e;
-    --t-border-default: #e7e0d8;
-    --t-border-subtle: #f0ebe4;
-  }
-
-  &[data-mood="cool"] {
-    --t-surface-base: #f4f7fb;
-    --t-surface-raised: #f8fafc;
-    --t-surface-sunken: #e8eff7;
-    --t-text-primary: #0f172a;
-    --t-text-secondary: #475569;
-    --t-text-tertiary: #94a3b8;
-    --t-border-default: #d4dce8;
-    --t-border-subtle: #e8eff5;
-  }
-
-  &[data-mood="dark"] {
-    --t-surface-base: #0a0a0a;
-    --t-surface-raised: #171717;
-    --t-surface-sunken: #000000;
-    --t-surface-overlay: rgba(23, 23, 23, 0.95);
-    --t-text-primary: #fafafa;
-    --t-text-secondary: #a3a3a3;
-    --t-text-tertiary: #737373;
-    --t-text-inverse: #171717;
-    --t-border-default: #262626;
-    --t-border-subtle: #1c1c1c;
-    --p-shadow-strength: 0.25;
-  }
-
-  /* Typography Variants */
-  &[data-typography="editorial"] {
-    --t-font-heading: var(--p-font-playfair);
-    --t-font-body: var(--p-font-raleway);
-    --t-heading-weight: 500;
-    --t-heading-tracking: -0.01em;
-  }
-
-  &[data-typography="modern"] {
-    --t-font-heading: var(--p-font-space);
-    --t-font-body: var(--p-font-inter);
-    --t-heading-weight: 500;
-    --t-heading-tracking: -0.03em;
-  }
-
-  &[data-typography="classic"] {
-    --t-font-heading: var(--p-font-cormorant);
-    --t-font-body: var(--p-font-source-serif);
-    --t-heading-weight: 500;
-    --t-heading-tracking: 0;
-  }
-
-  &[data-typography="friendly"] {
-    --t-font-heading: var(--p-font-fraunces);
-    --t-font-body: var(--p-font-work-sans);
-    --t-heading-weight: 600;
-    --t-heading-tracking: -0.01em;
-  }
-
-  &[data-typography="minimal"] {
-    --t-font-heading: var(--p-font-dm-sans);
-    --t-font-body: var(--p-font-source-serif);
-    --t-heading-weight: 500;
-    --t-heading-tracking: 0;
-  }
-
-  &[data-typography="impulse"] {
-    --t-font-heading: var(--p-font-raleway);
-    --t-font-body: var(--p-font-inter);
-    --t-heading-weight: 300;
-    --t-heading-tracking: 0.02em;
-  }
-
-  /* Shape Variants */
-  &[data-shape="sharp"] {
-    --t-radius-sm: 0;
-    --t-radius-md: 0;
-    --t-radius-lg: 0;
-    --t-radius-button: 0;
-    --t-radius-card: 0;
-    --t-radius-input: 0;
-    --t-radius-image: 0;
-  }
-
-  &[data-shape="round"] {
-    --t-radius-sm: var(--p-radius-md);
-    --t-radius-md: var(--p-radius-lg);
-    --t-radius-lg: var(--p-radius-xl);
-    --t-radius-button: var(--p-radius-lg);
-    --t-radius-card: var(--p-radius-xl);
-    --t-radius-input: var(--p-radius-lg);
-    --t-radius-image: var(--p-radius-lg);
-  }
-
-  &[data-shape="pill"] {
-    --t-radius-sm: var(--p-radius-full);
-    --t-radius-md: var(--p-radius-full);
-    --t-radius-lg: var(--p-radius-xl);
-    --t-radius-button: var(--p-radius-full);
-    --t-radius-card: var(--p-radius-xl);
-    --t-radius-input: var(--p-radius-full);
-    --t-radius-image: var(--p-radius-lg);
-  }
-
-  /* Density Variants */
-  &[data-density="spacious"] {
-    --t-density: 1.25;
-  }
-
-  &[data-density="compact"] {
-    --t-density: 0.85;
-  }
-}
diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css
index 9adbc42..78dab48 100644
--- a/assets/css/admin/components.css
+++ b/assets/css/admin/components.css
@@ -1,5 +1,6 @@
-/* Admin component styles — replaces DaisyUI components.
-   Uses DaisyUI theme variables (--color-*) which stay until Phase 7. */
+/* Admin component styles — uses --t-* theme tokens directly. */
+
+@layer admin {
 
 /* ── Layout ── */
 
@@ -52,7 +53,7 @@
   min-height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: var(--color-base-200);
+  background-color: var(--t-surface-sunken);
 }
 
 @media (min-width: 64em) {
@@ -81,8 +82,8 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem;
-  background-color: var(--color-base-100);
-  border-bottom: 1px solid var(--color-base-200);
+  background-color: var(--t-surface-base);
+  border-bottom: 1px solid var(--t-surface-sunken);
 }
 
 .admin-topbar-title {
@@ -116,14 +117,14 @@
     background: none;
     border: none;
     width: 100%;
-    text-align: left;
+    text-align: start;
 
     &:hover {
-      background-color: var(--color-base-300);
+      background-color: var(--t-border-default);
     }
 
     &.active {
-      background-color: var(--color-base-300);
+      background-color: var(--t-border-default);
       font-weight: 600;
     }
   }
@@ -146,35 +147,35 @@
   text-decoration: none;
   white-space: nowrap;
   transition: background-color 0.1s, opacity 0.1s;
-  background-color: var(--color-primary);
-  color: var(--color-primary-content);
+  background-color: var(--t-accent);
+  color: var(--t-text-inverse);
 
   &:hover { opacity: 0.85; }
   &:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 
 .admin-btn-primary {
-  background-color: var(--color-primary);
-  color: var(--color-primary-content);
+  background-color: var(--t-accent);
+  color: var(--t-text-inverse);
 }
 
 .admin-btn-soft {
-  background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
-  color: var(--color-primary);
-  &:hover { background-color: color-mix(in oklch, var(--color-primary) 20%, transparent); opacity: 1; }
+  background-color: color-mix(in oklch, var(--t-accent) 12%, transparent);
+  color: var(--t-accent);
+  &:hover { background-color: color-mix(in oklch, var(--t-accent) 20%, transparent); opacity: 1; }
 }
 
 .admin-btn-ghost {
   background: none;
   color: inherit;
-  &:hover { background-color: var(--color-base-200); opacity: 1; }
+  &:hover { background-color: var(--t-surface-sunken); opacity: 1; }
 }
 
 .admin-btn-outline {
   background: none;
   color: inherit;
-  border-color: var(--color-base-300);
-  &:hover { background-color: var(--color-base-200); opacity: 1; }
+  border-color: var(--t-border-default);
+  &:hover { background-color: var(--t-surface-sunken); opacity: 1; }
 }
 
 .admin-btn-sm {
@@ -197,8 +198,8 @@
 /* ── Cards ── */
 
 .admin-card {
-  background-color: var(--color-base-100);
-  border: 1px solid var(--color-base-200);
+  background-color: var(--t-surface-base);
+  border: 1px solid var(--t-surface-sunken);
   border-radius: 0.5rem;
   overflow: hidden;
 }
@@ -217,7 +218,7 @@
   gap: 0.5rem;
   justify-content: flex-end;
   padding-top: 0.75rem;
-  border-top: 1px solid var(--color-base-200);
+  border-top: 1px solid var(--t-surface-sunken);
   margin-top: 0.75rem;
 }
 
@@ -229,19 +230,19 @@
   font-size: 0.875rem;
 
   & th {
-    text-align: left;
+    text-align: start;
     padding: 0.5rem 0.75rem;
     font-weight: 600;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
-    border-bottom: 1px solid var(--color-base-200);
+    color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+    border-bottom: 1px solid var(--t-surface-sunken);
   }
 
   & td {
     padding: 0.5rem 0.75rem;
-    border-bottom: 1px solid color-mix(in oklch, var(--color-base-200) 50%, transparent);
+    border-bottom: 1px solid color-mix(in oklch, var(--t-surface-sunken) 50%, transparent);
     vertical-align: middle;
   }
 
@@ -251,7 +252,7 @@
 }
 
 .admin-table-zebra tbody tr:nth-child(even) {
-  background-color: color-mix(in oklch, var(--color-base-200) 30%, transparent);
+  background-color: color-mix(in oklch, var(--t-surface-sunken) 30%, transparent);
 }
 
 /* ── Forms ── */
@@ -275,16 +276,16 @@
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: var(--color-base-content);
-  background-color: var(--color-base-100);
-  border: 1px solid var(--color-base-300);
+  color: var(--t-text-primary);
+  background-color: var(--t-surface-base);
+  border: 1px solid var(--t-border-default);
   border-radius: 0.375rem;
   transition: border-color 0.15s;
 
   &:focus {
     outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary) 20%, transparent);
+    border-color: var(--t-accent);
+    box-shadow: 0 0 0 1px color-mix(in oklch, var(--t-accent) 20%, transparent);
   }
 }
 
@@ -293,18 +294,18 @@
 }
 
 .admin-input-error {
-  border-color: var(--color-error);
+  border-color: var(--t-status-error);
 
   &:focus {
-    border-color: var(--color-error);
-    box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-error) 20%, transparent);
+    border-color: var(--t-status-error);
+    box-shadow: 0 0 0 1px color-mix(in oklch, var(--t-status-error) 20%, transparent);
   }
 }
 
 .admin-checkbox {
   width: 1rem;
   height: 1rem;
-  accent-color: var(--color-primary);
+  accent-color: var(--t-accent);
   vertical-align: middle;
   cursor: pointer;
 }
@@ -326,7 +327,7 @@
   appearance: none;
   width: 2.5rem;
   height: 1.25rem;
-  background-color: var(--color-base-300);
+  background-color: var(--t-border-default);
   border-radius: 9999px;
   position: relative;
   cursor: pointer;
@@ -338,7 +339,7 @@
     content: "";
     position: absolute;
     top: 0.125rem;
-    left: 0.125rem;
+    inset-inline-start: 0.125rem;
     width: 1rem;
     height: 1rem;
     background: white;
@@ -347,7 +348,7 @@
   }
 
   &:checked {
-    background-color: var(--color-primary);
+    background-color: var(--t-accent);
   }
 
   &:checked::after {
@@ -374,7 +375,7 @@
 .admin-toast {
   position: fixed;
   top: 1rem;
-  right: 1rem;
+  inset-inline-end: 1rem;
   z-index: 100;
 }
 
@@ -389,15 +390,15 @@
 }
 
 .admin-alert-info {
-  background-color: color-mix(in oklch, var(--color-info) 12%, var(--color-base-100));
-  color: var(--color-info);
-  border: 1px solid color-mix(in oklch, var(--color-info) 25%, var(--color-base-100));
+  background-color: color-mix(in oklch, var(--t-status-info) 12%, var(--t-surface-base));
+  color: var(--t-status-info);
+  border: 1px solid color-mix(in oklch, var(--t-status-info) 25%, var(--t-surface-base));
 }
 
 .admin-alert-error {
-  background-color: color-mix(in oklch, var(--color-error) 12%, var(--color-base-100));
-  color: var(--color-error);
-  border: 1px solid color-mix(in oklch, var(--color-error) 25%, var(--color-base-100));
+  background-color: color-mix(in oklch, var(--t-status-error) 12%, var(--t-surface-base));
+  color: var(--t-status-error);
+  border: 1px solid color-mix(in oklch, var(--t-status-error) 25%, var(--t-surface-base));
 }
 
 /* ── Modal ── */
@@ -408,8 +409,8 @@
   padding: 0;
   max-width: 32rem;
   width: calc(100% - 2rem);
-  background-color: var(--color-base-100);
-  color: var(--color-base-content);
+  background-color: var(--t-surface-base);
+  color: var(--t-text-primary);
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 
   &::backdrop {
@@ -424,7 +425,7 @@
 
 .admin-modal-close {
   position: absolute;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   top: 0.5rem;
 }
 
@@ -444,8 +445,8 @@
   font-size: 0.75rem;
   font-weight: 500;
   border-radius: 9999px;
-  background-color: var(--color-base-200);
-  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+  background-color: var(--t-surface-sunken);
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
 }
 
 .admin-badge-sm {
@@ -462,12 +463,12 @@
   & .admin-dropdown-content {
     display: none;
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     top: 100%;
     margin-top: 0.25rem;
     min-width: 12rem;
-    background-color: var(--color-base-100);
-    border: 1px solid var(--color-base-200);
+    background-color: var(--t-surface-base);
+    border: 1px solid var(--t-surface-sunken);
     border-radius: 0.5rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     z-index: 50;
@@ -489,7 +490,7 @@
   padding: 0.5rem 0.75rem;
   border-radius: 0.375rem;
   font-size: 0.875rem;
-  color: var(--color-base-content);
+  color: var(--t-text-primary);
   text-decoration: none;
   cursor: pointer;
   background: none;
@@ -498,7 +499,7 @@
   text-align: left;
 
   &:hover {
-    background-color: var(--color-base-200);
+    background-color: var(--t-surface-sunken);
   }
 }
 
@@ -512,8 +513,8 @@
   display: inline-block;
   width: 1.25rem;
   height: 1.25rem;
-  border: 2px solid var(--color-base-300);
-  border-top-color: var(--color-primary);
+  border: 2px solid var(--t-border-default);
+  border-top-color: var(--t-accent);
   border-radius: 9999px;
   animation: admin-spin 0.6s linear infinite;
 }
@@ -524,7 +525,7 @@
   display: flex;
   align-items: center;
   gap: 1rem;
-  color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
   font-size: 0.75rem;
 
   &::before,
@@ -532,7 +533,7 @@
     content: "";
     flex: 1;
     height: 1px;
-    background-color: var(--color-base-300);
+    background-color: var(--t-border-default);
   }
 }
 
@@ -548,7 +549,7 @@
   display: flex;
   gap: 1rem;
   padding: 0.75rem 0;
-  border-bottom: 1px solid var(--color-base-200);
+  border-bottom: 1px solid var(--t-surface-sunken);
 
   &:last-child { border-bottom: none; }
 }
@@ -560,13 +561,13 @@
 /* ── Form error text ── */
 
 .admin-error {
-  color: var(--color-error);
+  color: var(--t-status-error);
 }
 
 /* ── Link ── */
 
 .admin-link {
-  color: var(--color-primary);
+  color: var(--t-accent);
   text-decoration: underline;
   text-underline-offset: 0.125em;
 
@@ -581,7 +582,7 @@
   appearance: none;
   width: 100%;
   height: 0.375rem;
-  background-color: var(--color-base-300);
+  background-color: var(--t-border-default);
   border-radius: 9999px;
   cursor: pointer;
   vertical-align: middle;
@@ -590,18 +591,18 @@
     appearance: none;
     width: 1rem;
     height: 1rem;
-    background: var(--color-primary);
+    background: var(--t-accent);
     border-radius: 9999px;
-    border: 2px solid var(--color-base-100);
+    border: 2px solid var(--t-surface-base);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   }
 
   &::-moz-range-thumb {
     width: 1rem;
     height: 1rem;
-    background: var(--color-primary);
+    background: var(--t-accent);
     border-radius: 9999px;
-    border: 2px solid var(--color-base-100);
+    border: 2px solid var(--t-surface-base);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   }
 }
@@ -610,8 +611,8 @@
 
 .admin-alert-outline {
   background: none;
-  color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
-  border: 1px solid var(--color-base-300);
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+  border: 1px solid var(--t-border-default);
 }
 
 /* ── Swap (visibility toggle) ── */
@@ -675,7 +676,7 @@
 }
 
 .setup-subtitle {
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
   margin-top: 0.25rem;
   font-size: 0.875rem;
 }
@@ -687,15 +688,15 @@
 }
 
 .setup-card {
-  border: 1px solid var(--color-base-300, #d4d4d4);
+  border: 1px solid var(--t-border-default, #d4d4d4);
   border-radius: 0.5rem;
   padding: 1.25rem;
   transition: border-color 150ms;
 }
 
 .setup-card-done {
-  border-color: var(--color-success, #22c55e);
-  background: color-mix(in oklab, var(--color-success, #22c55e) 5%, transparent);
+  border-color: var(--t-status-success, #22c55e);
+  background: color-mix(in oklab, var(--t-status-success, #22c55e) 5%, transparent);
 }
 
 .setup-card-header {
@@ -714,12 +715,12 @@
   font-size: 0.75rem;
   font-weight: 600;
   flex-shrink: 0;
-  background: var(--color-base-200, #e5e5e5);
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  background: var(--t-surface-sunken, #e5e5e5);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
 }
 
 .setup-card-number-done {
-  background: var(--color-success, #22c55e);
+  background: var(--t-status-success, #22c55e);
   color: white;
 }
 
@@ -730,14 +731,14 @@
 
 .setup-card-summary {
   margin-top: 0.25rem;
-  padding-left: 2.5rem;
+  padding-inline-start: 2.5rem;
   font-size: 0.8125rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
 }
 
 .setup-card-body {
   margin-top: 1rem;
-  padding-left: 2.5rem;
+  padding-inline-start: 2.5rem;
 }
 
 /* Setup: check inbox phase */
@@ -747,7 +748,7 @@
 }
 
 .setup-inbox-icon {
-  color: var(--color-base-content, #171717);
+  color: var(--t-text-primary, #171717);
   margin: 0 auto 0.75rem;
 }
 
@@ -759,30 +760,30 @@
 
 .setup-inbox-detail {
   font-size: 0.875rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
   margin-bottom: 1rem;
 }
 
 .setup-start-over {
   font-size: 0.8125rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
   margin-top: 1rem;
 }
 
 .setup-hint {
   font-size: 0.8125rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
   margin-bottom: 0.75rem;
 }
 
 .setup-link {
-  color: var(--color-base-content, #171717);
+  color: var(--t-text-primary, #171717);
   text-decoration: underline;
 }
 
 .setup-key-hint {
   font-size: 0.75rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
   margin-top: 0.25rem;
 }
 
@@ -798,14 +799,14 @@
 }
 
 .setup-test-ok {
-  color: var(--color-success, #22c55e);
+  color: var(--t-status-success, #22c55e);
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
 
 .setup-test-error {
-  color: var(--color-error, #dc2626);
+  color: var(--t-status-error, #dc2626);
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -825,20 +826,20 @@
   align-items: flex-start;
   gap: 0.125rem;
   padding: 0.75rem;
-  border: 1px solid var(--color-base-300, #d4d4d4);
+  border: 1px solid var(--t-border-default, #d4d4d4);
   border-radius: 0.375rem;
   text-align: left;
   cursor: pointer;
   transition: border-color 150ms, background 150ms;
 
   &:hover:not(:disabled) {
-    border-color: var(--color-base-content, #171717);
+    border-color: var(--t-text-primary, #171717);
   }
 }
 
 .setup-provider-card-selected {
-  border-color: var(--color-base-content, #171717);
-  background: var(--color-base-200, #e5e5e5);
+  border-color: var(--t-text-primary, #171717);
+  background: var(--t-surface-sunken, #e5e5e5);
 }
 
 .setup-provider-card-disabled {
@@ -853,15 +854,15 @@
 
 .setup-provider-tagline {
   font-size: 0.75rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
 }
 
 .setup-provider-badge {
   font-size: 0.6875rem;
   padding: 0.125rem 0.375rem;
   border-radius: 9999px;
-  background: var(--color-base-200, #e5e5e5);
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  background: var(--t-surface-sunken, #e5e5e5);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
 }
 
 .setup-provider-form {
@@ -873,15 +874,15 @@
   text-align: center;
   margin-top: 2rem;
   padding: 2rem;
-  border: 1px solid var(--color-success, #22c55e);
+  border: 1px solid var(--t-status-success, #22c55e);
   border-radius: 0.5rem;
-  background: color-mix(in oklab, var(--color-success, #22c55e) 5%, transparent);
+  background: color-mix(in oklab, var(--t-status-success, #22c55e) 5%, transparent);
 }
 
 .setup-complete-icon {
   width: 3rem;
   height: 3rem;
-  color: var(--color-success, #22c55e);
+  color: var(--t-status-success, #22c55e);
   margin: 0 auto 0.75rem;
 }
 
@@ -892,14 +893,14 @@
 
 .setup-complete p {
   font-size: 0.875rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
   margin: 0.25rem 0 1rem;
 }
 
 /* ── Dashboard launch checklist ── */
 
 .admin-checklist {
-  border: 1px solid var(--color-base-300, #d4d4d4);
+  border: 1px solid var(--t-border-default, #d4d4d4);
   border-radius: 0.5rem;
   padding: 1.25rem;
   margin-bottom: 1.5rem;
@@ -922,21 +923,21 @@
   align-items: center;
   gap: 0.5rem;
   font-size: 0.8125rem;
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
 }
 
 .admin-checklist-bar {
   width: 6rem;
   height: 0.375rem;
   border-radius: 9999px;
-  background: var(--color-base-200, #e5e5e5);
+  background: var(--t-surface-sunken, #e5e5e5);
   overflow: hidden;
 }
 
 .admin-checklist-bar-fill {
   height: 100%;
   border-radius: 9999px;
-  background: var(--color-success, #22c55e);
+  background: var(--t-status-success, #22c55e);
   transition: width 300ms;
 }
 
@@ -964,13 +965,13 @@
   height: 1.25rem;
   border-radius: 50%;
   flex-shrink: 0;
-  border: 1.5px solid var(--color-base-300, #d4d4d4);
+  border: 1.5px solid var(--t-border-default, #d4d4d4);
   color: transparent;
 }
 
 .admin-checklist-check-done {
-  background: var(--color-success, #22c55e);
-  border-color: var(--color-success, #22c55e);
+  background: var(--t-status-success, #22c55e);
+  border-color: var(--t-status-success, #22c55e);
   color: white;
 }
 
@@ -980,7 +981,7 @@
 }
 
 .admin-checklist-label-done {
-  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
 }
 
 .admin-checklist-action {
@@ -993,5 +994,7 @@
   justify-content: space-between;
   margin-top: 1rem;
   padding-top: 0.75rem;
-  border-top: 1px solid var(--color-base-200, #e5e5e5);
+  border-top: 1px solid var(--t-surface-sunken, #e5e5e5);
 }
+
+} /* @layer admin */
diff --git a/assets/css/admin/icons.css b/assets/css/admin/icons.css
index 566795a..9651e17 100644
--- a/assets/css/admin/icons.css
+++ b/assets/css/admin/icons.css
@@ -1,5 +1,7 @@
 /* Generated by mix generate_admin_icons — do not edit by hand */
 
+@layer admin {
+
 .hero-arrow-left-mini {
   --hero-arrow-left-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M17%2010a.75.75%200%200%201-.75.75H5.612l4.158%203.96a.75.75%200%201%201-1.04%201.08l-5.5-5.25a.75.75%200%200%201%200-1.08l5.5-5.25a.75.75%200%201%201%201.04%201.08L5.612%209.25H16.25A.75.75%200%200%201%2017%2010Z"%20clip-rule="evenodd"/></svg>');
   -webkit-mask: var(--hero-arrow-left-mini);
@@ -623,3 +625,5 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+
+} /* @layer admin */
diff --git a/assets/css/admin/themes.css b/assets/css/admin/themes.css
deleted file mode 100644
index 0976259..0000000
--- a/assets/css/admin/themes.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/* Admin theme bridge — maps DaisyUI --color-* variables to --t-* theme tokens.
-   Admin components still reference --color-*, which resolve through this bridge
-   to the merchant's chosen theme. Phase 4 replaces --color-* with --t-* directly,
-   then this file gets deleted. */
-
-.themed {
-  /* Surface colours */
-  --color-base-100: var(--t-surface-base);
-  --color-base-200: var(--t-surface-sunken);
-  --color-base-300: var(--t-border-default);
-  --color-base-content: var(--t-text-primary);
-
-  /* Brand colours */
-  --color-primary: var(--t-accent);
-  --color-primary-content: var(--t-text-inverse);
-  --color-secondary: var(--t-text-secondary);
-  --color-secondary-content: var(--t-text-inverse);
-  --color-accent: var(--t-text-primary);
-  --color-accent-content: var(--t-text-inverse);
-  --color-neutral: var(--t-text-tertiary);
-  --color-neutral-content: var(--t-text-inverse);
-
-  /* Status colours — fixed, not themed */
-  --color-info: oklch(62% 0.214 259.815);
-  --color-info-content: oklch(97% 0.014 254.604);
-  --color-success: oklch(70% 0.14 182.503);
-  --color-success-content: oklch(98% 0.014 180.72);
-  --color-warning: oklch(66% 0.179 58.318);
-  --color-warning-content: oklch(98% 0.022 95.277);
-  --color-error: oklch(58% 0.253 17.585);
-  --color-error-content: oklch(96% 0.015 12.422);
-
-  /* Shape — mapped to theme shape tokens */
-  --radius-box: var(--t-radius-card);
-  --radius-selector: var(--t-radius-button);
-  --radius-field: var(--t-radius-input);
-}
diff --git a/assets/css/admin/utilities.css b/assets/css/admin/utilities.css
index c31d5d3..7490825 100644
--- a/assets/css/admin/utilities.css
+++ b/assets/css/admin/utilities.css
@@ -113,7 +113,7 @@
 .pb-6 { padding-bottom: 1.5rem; }
 .pb-8 { padding-bottom: 2rem; }
 .pb-10 { padding-bottom: 2.5rem; }
-.pl-10 { padding-left: 2.5rem; }
+.pl-10 { padding-inline-start: 2.5rem; }
 .pt-3 { padding-top: 0.75rem; }
 .pt-4 { padding-top: 1rem; }
 .pt-6 { padding-top: 1.5rem; }
@@ -137,10 +137,10 @@
 .mb-3 { margin-bottom: 0.75rem; }
 .mb-4 { margin-bottom: 1rem; }
 .mb-6 { margin-bottom: 1.5rem; }
-.ml-1 { margin-left: 0.25rem; }
-.ml-3 { margin-left: 0.75rem; }
-.mr-1 { margin-right: 0.25rem; }
-.-mr-2 { margin-right: -0.5rem; }
+.ml-1 { margin-inline-start: 0.25rem; }
+.ml-3 { margin-inline-start: 0.75rem; }
+.mr-1 { margin-inline-end: 0.25rem; }
+.-mr-2 { margin-inline-end: -0.5rem; }
 .mx-auto { margin-inline: auto; }
 .-mx-2 { margin-inline: -0.5rem; }
 .-my-0\.5 { margin-block: -0.125rem; }
@@ -234,9 +234,9 @@
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.text-left { text-align: left; }
+.text-left { text-align: start; }
 .text-center { text-align: center; }
-.text-right { text-align: right; }
+.text-right { text-align: end; }
 .text-balance { text-wrap: balance; }
 
 .text-wrap { text-wrap: wrap; }
@@ -270,30 +270,30 @@
 }
 
 /* ========================================
-   Colours — DaisyUI semantic
+   Colours — theme tokens
    ======================================== */
 
-.bg-base-100 { background-color: var(--color-base-100); }
-.bg-base-200 { background-color: var(--color-base-200); }
-.bg-base-300 { background-color: var(--color-base-300); }
-.bg-base-content { background-color: var(--color-base-content); }
-.bg-primary { background-color: var(--color-primary); }
+.bg-base-100 { background-color: var(--t-surface-base); }
+.bg-base-200 { background-color: var(--t-surface-sunken); }
+.bg-base-300 { background-color: var(--t-border-default); }
+.bg-base-content { background-color: var(--t-text-primary); }
+.bg-primary { background-color: var(--t-accent); }
 .bg-white { background-color: #fff; }
 
-.text-base-100 { color: var(--color-base-100); }
-.text-base-content { color: var(--color-base-content); }
-.text-base-content\/30 { color: color-mix(in oklch, var(--color-base-content) 30%, transparent); }
-.text-base-content\/40 { color: color-mix(in oklch, var(--color-base-content) 40%, transparent); }
-.text-base-content\/50 { color: color-mix(in oklch, var(--color-base-content) 50%, transparent); }
-.text-base-content\/60 { color: color-mix(in oklch, var(--color-base-content) 60%, transparent); }
-.text-base-content\/70 { color: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
-.text-base-content\/80 { color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }
-.text-error { color: var(--color-error); }
-.text-success { color: var(--color-success); }
+.text-base-100 { color: var(--t-surface-base); }
+.text-base-content { color: var(--t-text-primary); }
+.text-base-content\/30 { color: color-mix(in oklch, var(--t-text-primary) 30%, transparent); }
+.text-base-content\/40 { color: color-mix(in oklch, var(--t-text-primary) 40%, transparent); }
+.text-base-content\/50 { color: color-mix(in oklch, var(--t-text-primary) 50%, transparent); }
+.text-base-content\/60 { color: color-mix(in oklch, var(--t-text-primary) 60%, transparent); }
+.text-base-content\/70 { color: color-mix(in oklch, var(--t-text-primary) 70%, transparent); }
+.text-base-content\/80 { color: color-mix(in oklch, var(--t-text-primary) 80%, transparent); }
+.text-error { color: var(--t-status-error); }
+.text-success { color: var(--t-status-success); }
 .text-white { color: #fff; }
-.text-brand { color: var(--color-primary); }
+.text-brand { color: var(--t-accent); }
 
-.fill-base-content\/40 { fill: color-mix(in oklch, var(--color-base-content) 40%, transparent); }
+.fill-base-content\/40 { fill: color-mix(in oklch, var(--t-text-primary) 40%, transparent); }
 
 /* ========================================
    Colours — status palette
@@ -342,10 +342,10 @@
 .border-t-0 { border-top-width: 0; }
 .border-dashed { border-style: dashed; }
 
-.border-base-200 { border-color: var(--color-base-200); }
-.border-base-300 { border-color: var(--color-base-300); }
-.border-base-content\/20 { border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent); }
-.border-b-base-content\/30 { border-bottom-color: color-mix(in oklch, var(--color-base-content) 30%, transparent); }
+.border-base-200 { border-color: var(--t-surface-sunken); }
+.border-base-300 { border-color: var(--t-border-default); }
+.border-base-content\/20 { border-color: color-mix(in oklch, var(--t-text-primary) 20%, transparent); }
+.border-b-base-content\/30 { border-bottom-color: color-mix(in oklch, var(--t-text-primary) 30%, transparent); }
 
 /* Arbitrary border colours (macOS traffic lights) */
 .border-\[\#e14640\] { border-color: #e14640; }
@@ -369,7 +369,7 @@
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 }
-.rounded-box { border-radius: var(--radius-box, 0.5rem); }
+.rounded-box { border-radius: var(--t-radius-card, 0.5rem); }
 
 /* ========================================
    Ring (outline via box-shadow)
@@ -380,7 +380,7 @@
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .ring-inset { --tw-ring-inset: inset; }
-.ring-base-300 { --tw-ring-color: var(--color-base-300); }
+.ring-base-300 { --tw-ring-color: var(--t-border-default); }
 .ring-green-600\/20 { --tw-ring-color: rgb(22 163 74 / 0.2); }
 .ring-red-600\/20 { --tw-ring-color: rgb(220 38 38 / 0.2); }
 .ring-amber-600\/10 { --tw-ring-color: rgb(217 119 6 / 0.1); }
@@ -437,8 +437,8 @@
   --tw-gradient-to: transparent;
   background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-to));
 }
-.from-base-300 { --tw-gradient-from: var(--color-base-300); }
-.to-base-300\/80 { --tw-gradient-to: color-mix(in oklch, var(--color-base-300) 80%, transparent); }
+.from-base-300 { --tw-gradient-from: var(--t-border-default); }
+.to-base-300\/80 { --tw-gradient-to: color-mix(in oklch, var(--t-border-default) 80%, transparent); }
 
 /* ========================================
    Filter
@@ -488,17 +488,17 @@
    Hover states
    ======================================== */
 
-.hover\:bg-base-200:hover { background-color: var(--color-base-200); }
-.hover\:bg-base-200\/50:hover { background-color: color-mix(in oklch, var(--color-base-200) 50%, transparent); }
-.hover\:bg-base-300:hover { background-color: var(--color-base-300); }
-.hover\:bg-base-content\/80:hover { background-color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }
+.hover\:bg-base-200:hover { background-color: var(--t-surface-sunken); }
+.hover\:bg-base-200\/50:hover { background-color: color-mix(in oklch, var(--t-surface-sunken) 50%, transparent); }
+.hover\:bg-base-300:hover { background-color: var(--t-border-default); }
+.hover\:bg-base-content\/80:hover { background-color: color-mix(in oklch, var(--t-text-primary) 80%, transparent); }
 .hover\:bg-green-500:hover { background-color: #22c55e; }
-.hover\:border-base-300:hover { border-color: var(--color-base-300); }
-.hover\:border-base-content\/40:hover { border-color: color-mix(in oklch, var(--color-base-content) 40%, transparent); }
+.hover\:border-base-300:hover { border-color: var(--t-border-default); }
+.hover\:border-base-content\/40:hover { border-color: color-mix(in oklch, var(--t-text-primary) 40%, transparent); }
 .hover\:opacity-100:hover { opacity: 1; }
-.hover\:text-base-content:hover { color: var(--color-base-content); }
-.hover\:text-base-content\/70:hover { color: color-mix(in oklch, var(--color-base-content) 70%, transparent); }
-.hover\:text-base-content\/80:hover { color: color-mix(in oklch, var(--color-base-content) 80%, transparent); }
+.hover\:text-base-content:hover { color: var(--t-text-primary); }
+.hover\:text-base-content\/70:hover { color: color-mix(in oklch, var(--t-text-primary) 70%, transparent); }
+.hover\:text-base-content\/80:hover { color: color-mix(in oklch, var(--t-text-primary) 80%, transparent); }
 .hover\:text-red-800:hover { color: #991b1b; }
 .hover\:underline:hover { text-decoration-line: underline; }
 .hover\:cursor-pointer:hover { cursor: pointer; }
@@ -507,13 +507,13 @@
    Focus states
    ======================================== */
 
-.focus\:border-primary:focus { border-color: var(--color-primary); }
+.focus\:border-primary:focus { border-color: var(--t-accent); }
 .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
 .focus\:ring-1:focus {
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 1px var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
-.focus\:ring-primary\/20:focus { --tw-ring-color: color-mix(in oklch, var(--color-primary) 20%, transparent); }
+.focus\:ring-primary\/20:focus { --tw-ring-color: color-mix(in oklch, var(--t-accent) 20%, transparent); }
 
 /* ========================================
    Disabled states
@@ -527,10 +527,10 @@
    ======================================== */
 
 .group { /* marker class — no styles */ }
-.group:hover .group-hover\:bg-base-300 { background-color: var(--color-base-300); }
-.group:hover .group-hover\:fill-base-content { fill: var(--color-base-content); }
+.group:hover .group-hover\:bg-base-300 { background-color: var(--t-border-default); }
+.group:hover .group-hover\:fill-base-content { fill: var(--t-text-primary); }
 .group:hover .group-hover\:opacity-70 { opacity: 0.7; }
-.group:hover .group-hover\:text-base-content { color: var(--color-base-content); }
+.group:hover .group-hover\:text-base-content { color: var(--t-text-primary); }
 .group[open] .group-open\:rotate-180 { transform: rotate(180deg); }
 
 /* ========================================
@@ -619,14 +619,14 @@
    ======================================== */
 
 .card {
-  border-radius: var(--radius-box, 0.5rem);
+  border-radius: var(--t-radius-card, 0.5rem);
   overflow: hidden;
 }
 
 .badge {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--radius-selector, 0.25rem);
+  border-radius: var(--t-radius-button, 0.25rem);
   padding-inline: 0.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -635,9 +635,9 @@
 }
 .badge-sm { font-size: 0.75rem; line-height: 1rem; padding-inline: 0.375rem; }
 .badge-warning {
-  border-color: var(--color-warning);
-  color: var(--color-warning-content);
-  background-color: var(--color-warning);
+  border-color: var(--t-status-warning);
+  color: var(--t-status-warning-content);
+  background-color: var(--t-status-warning);
 }
 
 .btn {
@@ -648,14 +648,14 @@
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 600;
-  border-radius: var(--radius-field, 0.25rem);
+  border-radius: var(--t-radius-input, 0.25rem);
   border: 1px solid transparent;
   cursor: pointer;
   transition: background-color 150ms, border-color 150ms;
 }
 .btn-primary {
-  background-color: var(--color-primary);
-  color: var(--color-primary-content);
+  background-color: var(--t-accent);
+  color: var(--t-text-inverse);
 }
 .btn-primary:hover {
   filter: brightness(0.9);
@@ -671,7 +671,7 @@
 .prose p { margin-top: 1em; margin-bottom: 1em; }
 .prose :first-child { margin-top: 0; }
 .prose :last-child { margin-bottom: 0; }
-.prose a { color: var(--color-primary); text-decoration: underline; }
+.prose a { color: var(--t-accent); text-decoration: underline; }
 .prose strong { font-weight: 600; }
 .prose-sm { font-size: 0.875rem; line-height: 1.5; }
 
diff --git a/assets/css/shop/components.css b/assets/css/shop/components.css
index 805447c..079c044 100644
--- a/assets/css/shop/components.css
+++ b/assets/css/shop/components.css
@@ -156,7 +156,7 @@
 
   .product-card[data-variant="default"] .product-price--compare {
     font-size: var(--t-text-small);
-    margin-left: 0.5rem;
+    margin-inline-start: 0.5rem;
   }
 
   .product-card[data-variant="featured"] .product-price--secondary {
@@ -164,7 +164,7 @@
   }
 
   .product-card[data-variant="featured"] .product-price--compare {
-    margin-right: 0.25rem;
+    margin-inline-end: 0.25rem;
   }
 
   .product-card[data-variant="compact"] .product-price--regular {
@@ -734,7 +734,7 @@
 
   .details-th {
     color: var(--t-text-primary);
-    text-align: left;
+    text-align: start;
     padding-block: 0.5rem;
     font-weight: 600;
   }
@@ -866,7 +866,7 @@
   .cart-badge {
     position: absolute;
     top: -4px;
-    right: -4px;
+    inset-inline-end: -4px;
     background: var(--t-accent);
     color: var(--t-text-inverse);
     font-size: var(--t-text-caption);
@@ -898,8 +898,7 @@
   .mobile-bottom-nav {
     position: fixed;
     bottom: 0;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     z-index: 100;
     background-color: var(--t-surface-raised);
     border-top: 1px solid var(--t-border-default);
@@ -1090,7 +1089,7 @@
     color: var(--t-text-tertiary);
 
     & span {
-      margin-left: 0.5rem;
+      margin-inline-start: 0.5rem;
     }
   }
 
@@ -1190,7 +1189,7 @@
   .cart-drawer {
     position: fixed;
     top: 0;
-    right: -400px;
+    inset-inline-end: -400px;
     width: 400px;
     max-width: 90vw;
     height: 100vh;
@@ -1199,11 +1198,11 @@
     z-index: 1001;
     display: flex;
     flex-direction: column;
-    transition: right 0.3s ease;
+    transition: inset-inline-end 0.3s ease;
     box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
 
     &.open {
-      right: 0;
+      inset-inline-end: 0;
     }
   }
 
@@ -1389,7 +1388,7 @@
 
   .cart-item-price-col {
     flex-shrink: 0;
-    text-align: right;
+    text-align: end;
   }
 
   .cart-item-price {
@@ -1500,7 +1499,7 @@
   }
 
   .cart-page-item-price-col {
-    text-align: right;
+    text-align: end;
   }
 
   .cart-page-item-price {
@@ -2066,7 +2065,7 @@
 
   .rich-text-list {
     margin-bottom: 1rem;
-    margin-left: 1.5rem;
+    margin-inline-start: 1.5rem;
     list-style: disc;
     color: var(--t-text-secondary);
 
@@ -2080,7 +2079,7 @@
   .shop-flash-group {
     position: fixed;
     top: 1rem;
-    right: 1rem;
+    inset-inline-end: 1rem;
     z-index: 200;
     display: flex;
     flex-direction: column;
diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css
index a50c751..603f772 100644
--- a/assets/css/theme-semantic.css
+++ b/assets/css/theme-semantic.css
@@ -27,6 +27,16 @@
   --t-accent-text: color-mix(in oklch, var(--t-accent) 80%, black);
   --t-accent-button: color-mix(in oklch, var(--t-accent) 85%, black);
 
+  /* Status colours — fixed, not themed */
+  --t-status-error: oklch(58% 0.253 17.585);
+  --t-status-error-content: oklch(96% 0.015 12.422);
+  --t-status-success: oklch(70% 0.14 182.503);
+  --t-status-success-content: oklch(98% 0.014 180.72);
+  --t-status-warning: oklch(66% 0.179 58.318);
+  --t-status-warning-content: oklch(98% 0.022 95.277);
+  --t-status-info: oklch(62% 0.214 259.815);
+  --t-status-info-content: oklch(97% 0.014 254.604);
+
   /* Secondary colors */
   --t-secondary-accent: #ea580c;
   --t-sale-color: #dc2626;
@@ -59,7 +69,7 @@
   --t-layout-max-width: 1400px;
   --t-button-style: filled;
   --t-card-shadow: none;
-  --t-product-text-align: left;
+  --t-product-text-align: start;
 
   /* Page colors */
   --color-page: var(--t-surface-base);
@@ -119,6 +129,28 @@
   }
 }
 
+/* ========================================
+   ACCESSIBILITY - Reduced Motion
+   Disable animations/transitions for users who prefer reduced motion
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .themed {
+    --p-duration-fast: 0s;
+    --p-duration-normal: 0s;
+    --p-duration-slow: 0s;
+  }
+
+  .themed *,
+  .themed *::before,
+  .themed *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* ========================================
    ACCESSIBILITY - Focus Rings
    Visible focus indicators for all interactive elements
@@ -156,8 +188,7 @@
 
   & .filter-pill {
     min-height: 44px;
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding-inline: 1rem;
   }
 
   /* Heading line-heights - tighter for large text */
diff --git a/lib/berrypod_web/components/layouts/admin_root.html.heex b/lib/berrypod_web/components/layouts/admin_root.html.heex
index a00e527..2678ecd 100644
--- a/lib/berrypod_web/components/layouts/admin_root.html.heex
+++ b/lib/berrypod_web/components/layouts/admin_root.html.heex
@@ -16,7 +16,7 @@
     <% end %>
     <!-- Pre-declare layer order so shop reset < Tailwind base regardless of load order -->
     <style>
-      @layer properties, reset, primitives, tokens, theme, base, components, layout, utilities, overrides;
+      @layer properties, reset, primitives, tokens, theme, base, components, layout, admin, utilities, overrides;
     </style>
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
     <link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
diff --git a/lib/berrypod_web/live/admin/theme/index.html.heex b/lib/berrypod_web/live/admin/theme/index.html.heex
index ab986b5..ba76524 100644
--- a/lib/berrypod_web/live/admin/theme/index.html.heex
+++ b/lib/berrypod_web/live/admin/theme/index.html.heex
@@ -1147,7 +1147,7 @@
         
 <!-- Preview Frame -->
         <div
-          class="themed preview-frame bg-white overflow-auto flex-1 rounded-b-lg border border-t-0 border-base-content/20"
+          class="themed overflow-auto flex-1 rounded-b-lg border border-t-0 border-base-content/20"
           data-mood={@theme_settings.mood}
           data-typography={@theme_settings.typography}
           data-shape={@theme_settings.shape}
diff --git a/test/berrypod_web/live/theme_css_consistency_test.exs b/test/berrypod_web/live/theme_css_consistency_test.exs
index 6df57f5..f677b7b 100644
--- a/test/berrypod_web/live/theme_css_consistency_test.exs
+++ b/test/berrypod_web/live/theme_css_consistency_test.exs
@@ -90,18 +90,14 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
   end
 
   describe "CSS file structure" do
-    test "admin.css has .preview-frame variant selectors for theme editor" do
+    test "admin.css imports shared theme layers" do
       css_path = Path.join([File.cwd!(), "assets", "css", "admin.css"])
       css_content = File.read!(css_path)
 
-      # Variant selectors are editor-only (.preview-frame) using CSS nesting
-      # The file uses &[data-*] syntax inside .preview-frame { }
-      # These rules are in admin.css (admin only), not shop.css
-      assert css_content =~ ".preview-frame"
-      assert css_content =~ "&[data-mood=\"dark\"]"
-      assert css_content =~ "&[data-mood=\"warm\"]"
-      assert css_content =~ "&[data-typography=\"modern\"]"
-      assert css_content =~ "&[data-shape=\"sharp\"]"
+      # Admin imports the shared theme layers so .themed resolves all tokens
+      assert css_content =~ "theme-primitives.css"
+      assert css_content =~ "theme-layer2-attributes.css"
+      assert css_content =~ "theme-semantic.css"
     end
 
     test "theme-layer2-attributes.css has shared .themed component styles" do