complete admin CSS refactor: delete utilities.css, add layout primitives

- Delete utilities.css (701 lines / 24 KB of Tailwind utility clones)
- Add layout.css with admin-stack, admin-row, admin-cluster, admin-grid
  primitives and gap variants (sm, md, lg, xl)
- Add transitions.css import and layout.css import to admin.css entry point
- Replace all Tailwind utility classes across 26 admin templates with
  semantic admin-*/theme-*/page-specific CSS classes
- Replace all non-dynamic inline styles with semantic classes
- Add ~100 new semantic classes to components.css (analytics, dashboard,
  order detail, settings, theme editor, generic utilities)
- Fix stray text-error → admin-text-error in media.ex
- Add missing .truncate definition to admin CSS
- Only remaining inline styles are dynamic data values (progress bars,
  chart dimensions) and one JS.toggle target

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

lib/berrypod_web/live/admin/newsletter.ex

@@ -194,12 +194,12 @@ defmodule BerrypodWeb.Admin.Newsletter do
 
   defp overview_tab(assigns) do
     ~H"""
-    <div class="admin-stack" style="--admin-stack-gap: 1.5rem;">
+    <div class="admin-stack admin-stack-lg">
       <div class="admin-card">
-        <div class="admin-card-body admin-row" style="--admin-row-gap: 1rem;">
-          <div style="flex: 1;">
-            <h3 style="font-weight: 500;">Newsletter signups</h3>
-            <p class="admin-section-desc" style="margin-top: 0.125rem;">
+        <div class="admin-card-body admin-row admin-row-xl">
+          <div class="admin-input-fill">
+            <h3 class="admin-text-medium">Newsletter signups</h3>
+            <p class="admin-section-desc">
               When enabled, the newsletter signup block on your shop pages will collect email addresses with double opt-in confirmation.
             </p>
           </div>
@@ -233,18 +233,16 @@ defmodule BerrypodWeb.Admin.Newsletter do
         </div>
       </div>
 
-      <div class="admin-row" style="--admin-row-gap: 0.75rem;">
+      <div class="admin-row admin-row-lg">
         <.link
           navigate={~p"/admin/newsletter?tab=subscribers"}
-          class="admin-link"
-          style="font-weight: 500;"
+          class="admin-link admin-text-medium"
         >
           View subscribers
         </.link>
         <.link
           navigate={~p"/admin/newsletter?tab=campaigns"}
-          class="admin-link"
-          style="font-weight: 500;"
+          class="admin-link admin-text-medium"
         >
           View campaigns
         </.link>
@@ -265,7 +263,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
   defp subscribers_tab(assigns) do
     ~H"""
     <div>
-      <div class="admin-row" style="justify-content: space-between; margin-bottom: 1rem;">
+      <div class="admin-filter-row admin-filter-row-between">
         <div class="admin-cluster">
           <.filter_pill
             status="all"
@@ -297,7 +295,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
         </.link>
       </div>
 
-      <form phx-change="search_subscribers" style="margin-bottom: 1rem;">
+      <form phx-change="search_subscribers" class="admin-filter-row">
         <.input
           name="search"
           value={@search}
@@ -356,7 +354,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
   defp campaigns_tab(assigns) do
     ~H"""
     <div>
-      <div style="display: flex; justify-content: flex-end; margin-bottom: 1rem;">
+      <div class="admin-tab-actions">
         <.link navigate={~p"/admin/newsletter/campaigns/new"} class="admin-btn admin-btn-primary">
           <.icon name="hero-plus" class="size-4" /> New campaign
         </.link>
@@ -426,7 +424,9 @@ defmodule BerrypodWeb.Admin.Newsletter do
       ]}
     >
       {@label}
-      <span :if={@count > 0} class="admin-badge admin-badge-sm ml-1">{@count}</span>
+      <span :if={@count > 0} class="admin-badge admin-badge-sm admin-badge-count">
+        {@count}
+      </span>
     </button>
     """
   end