extract content + template inline styles to CSS classes (Phase 4)

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

lib/simpleshop_theme_web/components/page_templates/cart.html.heex

@@ -10,8 +10,7 @@
           <ul
             role="list"
             aria-label="Cart items"
-            class="flex flex-col gap-4"
-            style="list-style: none; margin: 0; padding: 0;"
+            class="cart-page-list flex flex-col gap-4"
           >
             <%= for item <- @cart_items do %>
               <li>

lib/simpleshop_theme_web/components/page_templates/checkout_success.html.heex

@@ -2,10 +2,7 @@
   <main id="main-content" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <%= if @order && @order.payment_status == "paid" do %>
       <div class="text-center mb-12">
-        <div
-          class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-6"
-          style="background-color: var(--t-accent); color: var(--t-accent-contrast);"
-        >
+        <div class="checkout-icon inline-flex items-center justify-center w-16 h-16 rounded-full mb-6">
           <svg
             class="w-8 h-8"
             fill="none"
@@ -17,62 +14,53 @@
           </svg>
         </div>
 
-        <h1
-          class="text-3xl font-bold mb-3"
-          style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-        >
+        <h1 class="checkout-heading text-3xl font-bold mb-3">
           Thank you for your order
         </h1>
 
-        <p class="text-lg mb-2" style="color: var(--t-text-secondary);">
-          Order <strong style="color: var(--t-text-primary);">{@order.order_number}</strong>
+        <p class="checkout-meta text-lg mb-2">
+          Order <strong>{@order.order_number}</strong>
         </p>
 
         <%= if @order.customer_email do %>
-          <p style="color: var(--t-text-secondary);">
+          <p class="checkout-meta">
             A confirmation will be sent to <strong>{@order.customer_email}</strong>
           </p>
         <% end %>
       </div>
 
       <.shop_card class="p-6 mb-8">
-        <h2
-          class="text-lg font-semibold mb-4"
-          style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-        >
+        <h2 class="checkout-heading text-lg font-semibold mb-4">
           Order details
         </h2>
 
-        <ul class="flex flex-col gap-4 mb-6" style="list-style: none; margin: 0; padding: 0;">
+        <ul class="checkout-items flex flex-col gap-4 mb-6">
           <%= for item <- @order.items do %>
-            <li
-              class="flex justify-between items-start pb-4 border-b last:border-b-0 last:pb-0"
-              style="border-color: var(--t-border-default);"
-            >
+            <li class="checkout-item flex justify-between items-start pb-4 border-b last:border-b-0 last:pb-0">
               <div>
-                <p class="font-medium" style="color: var(--t-text-primary);">
+                <p class="checkout-item-name font-medium">
                   {item.product_name}
                 </p>
                 <%= if item.variant_title do %>
-                  <p class="text-sm" style="color: var(--t-text-secondary);">
+                  <p class="checkout-item-detail text-sm">
                     {item.variant_title}
                   </p>
                 <% end %>
-                <p class="text-sm" style="color: var(--t-text-secondary);">
+                <p class="checkout-item-detail text-sm">
                   Qty: {item.quantity}
                 </p>
               </div>
-              <span class="font-medium" style="color: var(--t-text-primary);">
+              <span class="checkout-item-price font-medium">
                 {SimpleshopTheme.Cart.format_price(item.unit_price * item.quantity)}
               </span>
             </li>
           <% end %>
         </ul>
 
-        <div class="border-t pt-4" style="border-color: var(--t-border-default);">
-          <div class="flex justify-between text-lg">
-            <span class="font-semibold" style="color: var(--t-text-primary);">Total</span>
-            <span class="font-bold" style="color: var(--t-text-primary);">
+        <div class="checkout-total-border border-t pt-4">
+          <div class="checkout-total flex justify-between text-lg">
+            <span class="font-semibold">Total</span>
+            <span class="font-bold">
               {SimpleshopTheme.Cart.format_price(@order.total)}
             </span>
           </div>
@@ -81,13 +69,10 @@
 
       <%= if @order.shipping_address != %{} do %>
         <.shop_card class="p-6 mb-8">
-          <h2
-            class="text-lg font-semibold mb-3"
-            style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-          >
+          <h2 class="checkout-heading text-lg font-semibold mb-3">
             Shipping to
           </h2>
-          <div style="color: var(--t-text-secondary);">
+          <div class="checkout-shipping-address">
             <p>{@order.shipping_address["name"]}</p>
             <p>{@order.shipping_address["line1"]}</p>
             <%= if @order.shipping_address["line2"] do %>
@@ -109,11 +94,8 @@
     <% else %>
       <%!-- Payment pending or order not found --%>
       <div class="text-center py-16">
-        <div
-          class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-6 animate-pulse"
-          style="background-color: var(--t-surface-sunken);"
-        >
-          <span style="color: var(--t-text-secondary);">
+        <div class="checkout-pending-icon inline-flex items-center justify-center w-16 h-16 rounded-full mb-6 animate-pulse">
+          <span class="checkout-pending-spinner">
             <svg
               class="w-8 h-8"
               fill="none"
@@ -130,22 +112,18 @@
           </span>
         </div>
 
-        <h1
-          class="text-3xl font-bold mb-3"
-          style="font-family: var(--t-font-heading); color: var(--t-text-primary);"
-        >
+        <h1 class="checkout-heading text-3xl font-bold mb-3">
           Processing your payment
         </h1>
 
-        <p class="text-lg mb-8" style="color: var(--t-text-secondary);">
+        <p class="checkout-pending-text text-lg mb-8">
           Please wait while we confirm your payment. This usually takes a few seconds.
         </p>
 
-        <p class="text-sm" style="color: var(--t-text-tertiary);">
+        <p class="checkout-pending-hint text-sm">
           If this page doesn't update, please <.link
             navigate="/contact"
-            class="underline"
-            style="color: var(--t-accent);"
+            class="checkout-contact-link underline"
           >contact us</.link>.
         </p>
       </div>

lib/simpleshop_theme_web/components/page_templates/content.html.heex

@@ -1,5 +1,5 @@
 <.shop_layout {layout_assigns(assigns)}>
-  <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">
+  <main id="main-content" class="content-page">
     <%= if assigns[:hero_background] do %>
       <.hero_section
         title={@hero_title}
@@ -14,12 +14,9 @@
       />
     <% end %>
 
-    <div style="padding: var(--space-xl) var(--space-lg); max-width: 800px; margin: 0 auto;">
+    <div class="content-body">
       <%= if assigns[:image_src] do %>
-        <div
-          class="content-image"
-          style="margin-bottom: var(--space-lg); border-radius: var(--t-radius-image); overflow: hidden;"
-        >
+        <div class="content-image">
           <.responsive_image
             src={@image_src}
             source_width={1200}

lib/simpleshop_theme_web/components/page_templates/error.html.heex

@@ -1,8 +1,7 @@
 <.shop_layout {layout_assigns(assigns)} active_page="error" error_page>
   <main
     id="main-content"
-    class="flex items-center justify-center"
-    style="min-height: calc(100vh - 4rem);"
+    class="error-main flex items-center justify-center"
   >
     <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
       <.hero_section

lib/simpleshop_theme_web/components/page_templates/pdp.html.heex

@@ -38,8 +38,7 @@
         <%!-- Fallback for products with no variant options --%>
         <div
           :if={@option_types == []}
-          class="mb-6 text-sm"
-          style="color: var(--t-text-secondary);"
+          class="pdp-variant-fallback mb-6 text-sm"
         >
           One size
         </div>