replace Tailwind utilities in layout + page templates with CSS (Phase 5a)

Absorb ~100 Tailwind utility classes from layout.ex and all page
templates into semantic CSS rules in components.css. Uses theme font-size
vars (--t-text-small, --t-text-caption) instead of rem to respect the
theme's em-based scaling system.

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

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

@@ -1,20 +1,20 @@
 <.shop_layout {layout_assigns(assigns)} active_page="cart">
-  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <main id="main-content" class="page-container">
     <.page_title text="Your basket" />
 
     <%= if @cart_items == [] do %>
       <.cart_empty_state mode={@mode} />
     <% else %>
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <div class="lg:col-span-2">
+      <div class="cart-grid">
+        <div>
           <ul
             role="list"
             aria-label="Cart items"
-            class="cart-page-list flex flex-col gap-4"
+            class="cart-page-list"
           >
             <%= for item <- @cart_items do %>
               <li>
-                <.shop_card class="p-4">
+                <.shop_card class="cart-page-card">
                   <.cart_item_row item={item} size={:default} show_quantity_controls mode={@mode} />
                 </.shop_card>
               </li>

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

@@ -1,10 +1,11 @@
 <.shop_layout {layout_assigns(assigns)} active_page="checkout">
-  <main id="main-content" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+  <main id="main-content" class="page-container checkout-main">
     <%= if @order && @order.payment_status == "paid" do %>
-      <div class="text-center mb-12">
-        <div class="checkout-icon inline-flex items-center justify-center w-16 h-16 rounded-full mb-6">
+      <div class="checkout-header">
+        <div class="checkout-icon">
           <svg
-            class="w-8 h-8"
+            width="32"
+            height="32"
             fill="none"
             viewBox="0 0 24 24"
             stroke-width="2.5"
@@ -14,11 +15,11 @@
           </svg>
         </div>
 
-        <h1 class="checkout-heading text-3xl font-bold mb-3">
+        <h1 class="checkout-heading">
           Thank you for your order
         </h1>
 
-        <p class="checkout-meta text-lg mb-2">
+        <p class="checkout-meta">
           Order <strong>{@order.order_number}</strong>
         </p>
 
@@ -29,38 +30,38 @@
         <% end %>
       </div>
 
-      <.shop_card class="p-6 mb-8">
-        <h2 class="checkout-heading text-lg font-semibold mb-4">
+      <.shop_card class="checkout-card">
+        <h2 class="checkout-heading">
           Order details
         </h2>
 
-        <ul class="checkout-items flex flex-col gap-4 mb-6">
+        <ul class="checkout-items">
           <%= for item <- @order.items do %>
-            <li class="checkout-item flex justify-between items-start pb-4 border-b last:border-b-0 last:pb-0">
+            <li class="checkout-item">
               <div>
-                <p class="checkout-item-name font-medium">
+                <p class="checkout-item-name">
                   {item.product_name}
                 </p>
                 <%= if item.variant_title do %>
-                  <p class="checkout-item-detail text-sm">
+                  <p class="checkout-item-detail">
                     {item.variant_title}
                   </p>
                 <% end %>
-                <p class="checkout-item-detail text-sm">
+                <p class="checkout-item-detail">
                   Qty: {item.quantity}
                 </p>
               </div>
-              <span class="checkout-item-price font-medium">
+              <span class="checkout-item-price">
                 {SimpleshopTheme.Cart.format_price(item.unit_price * item.quantity)}
               </span>
             </li>
           <% end %>
         </ul>
 
-        <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">
+        <div class="checkout-total-border">
+          <div class="checkout-total">
+            <span class="checkout-total-label">Total</span>
+            <span class="checkout-total-amount">
               {SimpleshopTheme.Cart.format_price(@order.total)}
             </span>
           </div>
@@ -68,8 +69,8 @@
       </.shop_card>
 
       <%= if @order.shipping_address != %{} do %>
-        <.shop_card class="p-6 mb-8">
-          <h2 class="checkout-heading text-lg font-semibold mb-3">
+        <.shop_card class="checkout-card">
+          <h2 class="checkout-heading">
             Shipping to
           </h2>
           <div class="checkout-shipping-address">
@@ -86,18 +87,19 @@
         </.shop_card>
       <% end %>
 
-      <div class="text-center">
-        <.shop_link_button href="/collections/all" class="px-8 py-3">
+      <div class="checkout-actions">
+        <.shop_link_button href="/collections/all" class="checkout-cta">
           Continue shopping
         </.shop_link_button>
       </div>
     <% else %>
       <%!-- Payment pending or order not found --%>
-      <div class="text-center py-16">
-        <div class="checkout-pending-icon inline-flex items-center justify-center w-16 h-16 rounded-full mb-6 animate-pulse">
+      <div class="checkout-header">
+        <div class="checkout-pending-icon">
           <span class="checkout-pending-spinner">
             <svg
-              class="w-8 h-8"
+              width="32"
+              height="32"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
@@ -112,18 +114,18 @@
           </span>
         </div>
 
-        <h1 class="checkout-heading text-3xl font-bold mb-3">
+        <h1 class="checkout-heading">
           Processing your payment
         </h1>
 
-        <p class="checkout-pending-text text-lg mb-8">
+        <p class="checkout-pending-text">
           Please wait while we confirm your payment. This usually takes a few seconds.
         </p>
 
-        <p class="checkout-pending-hint text-sm">
+        <p class="checkout-pending-hint">
           If this page doesn't update, please <.link
             navigate="/contact"
-            class="checkout-contact-link underline"
+            class="checkout-contact-link"
           >contact us</.link>.
         </p>
       </div>

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

@@ -2,7 +2,7 @@
   <main id="main-content">
     <.collection_header title="All Products" product_count={length(assigns[:products] || [])} />
 
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="page-container">
       <.filter_bar categories={assigns[:categories] || []} />
 
       <.product_grid theme_settings={@theme_settings}>

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

@@ -1,15 +1,15 @@
 <.shop_layout {layout_assigns(assigns)} active_page="contact">
-  <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
+  <main id="main-content" class="page-container contact-main">
     <.hero_section
       variant={:page}
       title="Get in touch"
       description="Sample contact page for the demo store. Add your own message here – something friendly about how customers can reach you."
     />
 
-    <div class="grid gap-8 md:grid-cols-2 mb-12">
+    <div class="contact-grid">
       <.contact_form email="hello@example.com" />
 
-      <div class="flex flex-col gap-6">
+      <div class="contact-sidebar">
         <.order_tracking_card />
 
         <.info_card

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

@@ -22,7 +22,7 @@
             source_width={1200}
             alt={@image_alt}
             sizes="(max-width: 800px) 100vw, 800px"
-            class="w-full h-[300px] object-cover"
+            class="content-hero-image"
           />
         </div>
       <% end %>

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

@@ -1,9 +1,9 @@
 <.shop_layout {layout_assigns(assigns)} active_page="error" error_page>
   <main
     id="main-content"
-    class="error-main flex items-center justify-center"
+    class="error-main"
   >
-    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <div class="page-container error-container">
       <.hero_section
         variant={:error}
         pre_title={@error_code}

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

@@ -1,5 +1,5 @@
 <.shop_layout {layout_assigns(assigns)} active_page="pdp">
-  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <main id="main-content" class="page-container">
     <.breadcrumb
       items={
         if @product.category do
@@ -19,7 +19,7 @@
       mode={@mode}
     />
 
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
+    <div class="pdp-grid">
       <.product_gallery images={@gallery_images} product_name={@product.title} />
 
       <div>
@@ -38,7 +38,7 @@
         <%!-- Fallback for products with no variant options --%>
         <div
           :if={@option_types == []}
-          class="pdp-variant-fallback mb-6 text-sm"
+          class="pdp-variant-fallback"
         >
           One size
         </div>