feat(admin): apply design system to Orders list/detail/edit/table

- Add PageHeader + Operations eyebrow on list page
- Detail page: PageHeader with order-id/date eyebrow, customer title,
  total/status subtitle, AdminBadge tone for pickup + payment processor
- AdminOrdersPanel: KPIStat for stat cards, EmptyState with Create your
  first order CTA, AdminBadge tone for status pills, lucide-react icons,
  all hardcoded Tailwind colors replaced with var(--admin-*) tokens
- OrderTableBody: AdminBadge tone for status + pickup pills, all hardcoded
  colors replaced with tokens
- OrderEditForm: ha-field-label + ha-field-input / ha-field-textarea classes
  for form fields, ha-segment control for status buttons, semantic pickup
  toggle with primary/warning tokens, all hardcoded colors replaced

Behavior preserved end-to-end. Type-check clean.

src/app/admin/orders/[id]/page.tsx

@@ -4,6 +4,8 @@ import OrderEditForm from "@/components/admin/OrderEditForm";
 import OrderPaymentSection from "@/components/admin/OrderPaymentSection";
 import OrderPickupAction from "@/components/admin/OrderPickupAction";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
+import AdminBadge from "@/components/admin/design-system/AdminBadge";
+import { PageHeader } from "@/components/admin/design-system";
 import { formatDate } from "@/lib/format-date";
 import { redirect } from "next/navigation";
 import Link from "next/link";
@@ -34,16 +36,31 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
 
   if (!order) {
     return (
-      <main className="min-h-screen px-6 py-10">
+      <main
+        className="min-h-screen px-6 py-10"
+        style={{ backgroundColor: "var(--admin-bg)" }}
+      >
         <div className="mx-auto max-w-4xl">
           <Link
             href="/admin/orders"
-            className="inline-flex items-center gap-2 text-sm text-stone-500 hover:text-stone-700"
+            className="inline-flex items-center gap-2 text-sm transition-colors"
+            style={{ color: "var(--admin-text-muted)" }}
           >
             ← Back to Orders
           </Link>
-          <div className="mt-8 rounded-2xl border border-red-200 bg-red-50 p-8 text-center">
-            <p className="text-lg font-semibold text-red-700">Order not found</p>
+          <div
+            className="mt-8 rounded-2xl border p-8 text-center"
+            style={{
+              borderColor: "var(--admin-danger-soft)",
+              backgroundColor: "var(--admin-danger-soft)",
+            }}
+          >
+            <p
+              className="text-lg font-semibold"
+              style={{ color: "var(--admin-danger)" }}
+            >
+              Order not found
+            </p>
           </div>
         </div>
       </main>
@@ -67,46 +84,66 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
   const total = subtotal + taxAmount - discount_amount;
 
   return (
-    <main className="min-h-screen px-6 py-8">
+    <main
+      className="min-h-screen px-6 py-8"
+      style={{ backgroundColor: "var(--admin-bg)" }}
+    >
       <div className="mx-auto max-w-4xl space-y-6">
+        {/* Back link */}
+        <Link
+          href="/admin/orders"
+          className="inline-flex items-center gap-2 text-xs font-semibold transition-colors"
+          style={{ color: "var(--admin-text-muted)" }}
+        >
+          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+          </svg>
+          Back to Orders
+        </Link>
+
         {/* Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-4">
-            <Link
-              href="/admin/orders"
-              className="flex h-9 w-9 items-center justify-center rounded-xl border border-stone-200 bg-white text-stone-500 hover:bg-stone-50 transition-colors"
-            >
-              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-              </svg>
-            </Link>
-            <div>
-              <h1 className="text-2xl font-bold text-stone-950 tracking-tight">Order Details</h1>
-              <p className="text-sm text-stone-500">{formatDate(order.created_at)}</p>
-            </div>
-          </div>
-          <div className="flex items-center gap-3">
-            <span className={`rounded-full px-3 py-1 text-xs font-bold ${
-              order.pickup_complete
-                ? "bg-green-50 text-green-700 border border-green-200"
-                : "bg-amber-50 text-amber-700 border border-amber-200"
-            }`}>
-              {order.pickup_complete ? "✓ Picked Up" : "⏳ Pending"}
-            </span>
-            {order.payment_processor && (
-              <span className="rounded-full bg-violet-50 px-2.5 py-0.5 text-xs font-semibold text-violet-700 border border-violet-200">
-                {order.payment_processor}
-              </span>
-            )}
-          </div>
+        <div>
+          <p className="ha-eyebrow mb-2">
+            Order #{order.id.slice(0, 8).toUpperCase()} · {formatDate(order.created_at)}
+          </p>
+          <PageHeader
+            title={order.customer_name}
+            subtitle={`${formatCurrency(total)} · ${order.pickup_complete ? "Picked Up" : "Awaiting Pickup"}${order.stops ? ` · ${order.stops.city}, ${order.stops.state}` : ""}`}
+            actions={
+              <div className="flex items-center gap-2">
+                <AdminBadge tone={order.pickup_complete ? "success" : "warning"} dot>
+                  {order.pickup_complete ? "Picked Up" : "Pending"}
+                </AdminBadge>
+                {order.payment_processor && (
+                  <AdminBadge tone="info">{order.payment_processor}</AdminBadge>
+                )}
+              </div>
+            }
+          />
         </div>
 
         {/* Customer info */}
-        <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
+        <div
+          className="rounded-2xl border p-6 shadow-sm"
+          style={{
+            borderColor: "var(--admin-border)",
+            backgroundColor: "var(--admin-card-bg)",
+          }}
+        >
           <div className="flex items-start justify-between gap-4">
             <div>
-              <p className="text-xs font-semibold uppercase tracking-wider text-stone-400">Customer</p>
-              <h2 className="mt-1 text-2xl font-bold text-stone-950">{order.customer_name}</h2>
+              <p
+                className="text-xs font-semibold uppercase tracking-wider"
+                style={{ color: "var(--admin-text-muted)" }}
+              >
+                Customer
+              </p>
+              <h2
+                className="mt-1 text-2xl font-bold"
+                style={{ color: "var(--admin-text-primary)" }}
+              >
+                {order.customer_name}
+              </h2>
             </div>
             <OrderPickupAction
               orderId={order.id}
@@ -118,14 +155,34 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
           <div className="mt-5 grid grid-cols-2 gap-4">
             {order.customer_phone && (
               <div>
-                <p className="text-xs font-semibold text-stone-400">Phone</p>
-                <p className="mt-0.5 text-sm font-medium text-stone-700">{order.customer_phone}</p>
+                <p
+                  className="text-xs font-semibold"
+                  style={{ color: "var(--admin-text-muted)" }}
+                >
+                  Phone
+                </p>
+                <p
+                  className="mt-0.5 text-sm font-medium"
+                  style={{ color: "var(--admin-text-primary)" }}
+                >
+                  {order.customer_phone}
+                </p>
               </div>
             )}
             {order.customer_email && (
               <div>
-                <p className="text-xs font-semibold text-stone-400">Email</p>
-                <p className="mt-0.5 text-sm font-medium text-stone-700">{order.customer_email}</p>
+                <p
+                  className="text-xs font-semibold"
+                  style={{ color: "var(--admin-text-muted)" }}
+                >
+                  Email
+                </p>
+                <p
+                  className="mt-0.5 text-sm font-medium"
+                  style={{ color: "var(--admin-text-primary)" }}
+                >
+                  {order.customer_email}
+                </p>
               </div>
             )}
           </div>
@@ -133,64 +190,133 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
 
         {/* Stop info */}
         {order.stops && (
-          <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
-            <p className="text-xs font-semibold uppercase tracking-wider text-stone-400">Pickup Location</p>
-            <p className="mt-1 text-lg font-bold text-stone-950">
+          <div
+            className="rounded-2xl border p-6 shadow-sm"
+            style={{
+              borderColor: "var(--admin-border)",
+              backgroundColor: "var(--admin-card-bg)",
+            }}
+          >
+            <p
+              className="text-xs font-semibold uppercase tracking-wider"
+              style={{ color: "var(--admin-text-muted)" }}
+            >
+              Pickup Location
+            </p>
+            <p
+              className="mt-1 text-lg font-bold"
+              style={{ color: "var(--admin-text-primary)" }}
+            >
               {order.stops.city}, {order.stops.state}
             </p>
-            <p className="mt-0.5 text-sm text-stone-500">{formatDate(order.stops.date)}</p>
+            <p
+              className="mt-0.5 text-sm"
+              style={{ color: "var(--admin-text-muted)" }}
+            >
+              {formatDate(order.stops.date)}
+            </p>
           </div>
         )}
 
         {/* Order items */}
-        <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
-          <h3 className="text-lg font-bold text-stone-950">Order Items</h3>
+        <div
+          className="rounded-2xl border p-6 shadow-sm"
+          style={{
+            borderColor: "var(--admin-border)",
+            backgroundColor: "var(--admin-card-bg)",
+          }}
+        >
+          <h3
+            className="text-lg font-bold"
+            style={{ color: "var(--admin-text-primary)" }}
+          >
+            Order Items
+          </h3>
 
           {order.order_items && order.order_items.length > 0 ? (
-            <div className="mt-4 divide-y divide-stone-100">
+            <div
+              className="mt-4 divide-y"
+              style={{ borderColor: "var(--admin-border-light)" }}
+            >
               {order.order_items.map((item: OrderItem) => (
                 <div
                   key={item.id}
                   className="flex items-center justify-between py-3"
                 >
                   <div>
-                    <p className="font-medium text-stone-900">
+                    <p
+                      className="font-medium"
+                      style={{ color: "var(--admin-text-primary)" }}
+                    >
                       {item.products?.name ?? "Unknown Product"}
                     </p>
-                    <p className="text-xs text-stone-400">Qty: {item.quantity} × {formatCurrency(Number(item.price))}</p>
+                    <p
+                      className="text-xs"
+                      style={{ color: "var(--admin-text-muted)" }}
+                    >
+                      Qty: {item.quantity} × {formatCurrency(Number(item.price))}
+                    </p>
                   </div>
-                  <p className="font-semibold text-stone-900">
+                  <p
+                    className="font-semibold"
+                    style={{ color: "var(--admin-text-primary)" }}
+                  >
                     {formatCurrency(Number(item.price) * item.quantity)}
                   </p>
                 </div>
               ))}
             </div>
           ) : (
-            <p className="mt-4 text-sm text-stone-400">No items found</p>
+            <p
+              className="mt-4 text-sm"
+              style={{ color: "var(--admin-text-muted)" }}
+            >
+              No items found
+            </p>
           )}
 
           {/* Totals */}
-          <div className="mt-6 border-t border-stone-100 pt-6 space-y-2">
+          <div
+            className="mt-6 border-t pt-6 space-y-2"
+            style={{ borderColor: "var(--admin-border-light)" }}
+          >
             <div className="flex justify-between text-sm">
-              <span className="text-stone-500">Subtotal</span>
-              <span className="text-stone-900">{formatCurrency(subtotal)}</span>
+              <span style={{ color: "var(--admin-text-muted)" }}>Subtotal</span>
+              <span style={{ color: "var(--admin-text-primary)" }}>
+                {formatCurrency(subtotal)}
+              </span>
             </div>
             {taxAmount > 0 && (
               <div className="flex justify-between text-sm">
-                <span className="text-stone-500">Tax</span>
-                <span className="text-stone-900">{formatCurrency(taxAmount)}</span>
+                <span style={{ color: "var(--admin-text-muted)" }}>Tax</span>
+                <span style={{ color: "var(--admin-text-primary)" }}>
+                  {formatCurrency(taxAmount)}
+                </span>
               </div>
             )}
             {discount_amount > 0 && (
               <div className="flex justify-between text-sm">
-                <span className="text-stone-500">Discount</span>
-                <span className="text-red-600">-{formatCurrency(discount_amount)}</span>
+                <span style={{ color: "var(--admin-text-muted)" }}>Discount</span>
+                <span style={{ color: "var(--admin-danger)" }}>
+                  -{formatCurrency(discount_amount)}
+                </span>
                 {order.discount_reason && (
-                  <span className="text-xs text-stone-400 ml-2">({order.discount_reason})</span>
+                  <span
+                    className="text-xs ml-2"
+                    style={{ color: "var(--admin-text-muted)" }}
+                  >
+                    ({order.discount_reason})
+                  </span>
                 )}
               </div>
             )}
-            <div className="flex justify-between text-lg font-bold text-stone-950 pt-2 border-t border-stone-200">
+            <div
+              className="flex justify-between text-lg font-bold pt-2 border-t"
+              style={{
+                color: "var(--admin-text-primary)",
+                borderColor: "var(--admin-border)",
+              }}
+            >
               <span>Total</span>
               <span>{formatCurrency(total)}</span>
             </div>
@@ -198,9 +324,25 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
         </div>
 
         {/* Payment & Refunds */}
-        <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
-          <h3 className="text-lg font-bold text-stone-950">Payment & Refunds</h3>
-          <p className="mt-1 text-sm text-stone-500">Record payment details and manage refunds</p>
+        <div
+          className="rounded-2xl border p-6 shadow-sm"
+          style={{
+            borderColor: "var(--admin-border)",
+            backgroundColor: "var(--admin-card-bg)",
+          }}
+        >
+          <h3
+            className="text-lg font-bold"
+            style={{ color: "var(--admin-text-primary)" }}
+          >
+            Payment & Refunds
+          </h3>
+          <p
+            className="mt-1 text-sm"
+            style={{ color: "var(--admin-text-muted)" }}
+          >
+            Record payment details and manage refunds
+          </p>
 
           <div className="mt-5">
             <OrderPaymentSection
@@ -218,9 +360,25 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
         </div>
 
         {/* Edit form */}
-        <div className="rounded-2xl border border-stone-200 bg-white p-6 shadow-sm">
-          <h3 className="text-lg font-bold text-stone-950">Edit Order</h3>
-          <p className="mt-1 text-sm text-stone-500">Update customer details, pricing, and status</p>
+        <div
+          className="rounded-2xl border p-6 shadow-sm"
+          style={{
+            borderColor: "var(--admin-border)",
+            backgroundColor: "var(--admin-card-bg)",
+          }}
+        >
+          <h3
+            className="text-lg font-bold"
+            style={{ color: "var(--admin-text-primary)" }}
+          >
+            Edit Order
+          </h3>
+          <p
+            className="mt-1 text-sm"
+            style={{ color: "var(--admin-text-muted)" }}
+          >
+            Update customer details, pricing, and status
+          </p>
 
           <div className="mt-5">
             <OrderEditForm order={order as unknown as Parameters<typeof OrderEditForm>[0]["order"]} brandId={brandId} />
@@ -229,12 +387,28 @@ export default async function OrderDetailPage({ params }: OrderDetailPageProps)
 
         {/* Internal notes */}
         {order.internal_notes && (
-          <div className="rounded-2xl border border-amber-200 bg-amber-50 p-6">
-            <p className="text-xs font-semibold uppercase tracking-wider text-amber-600">Internal Notes</p>
-            <p className="mt-1 text-sm text-stone-700">{order.internal_notes}</p>
+          <div
+            className="rounded-2xl border p-6"
+            style={{
+              borderColor: "var(--admin-warning-soft)",
+              backgroundColor: "var(--admin-warning-soft)",
+            }}
+          >
+            <p
+              className="text-xs font-semibold uppercase tracking-wider"
+              style={{ color: "var(--admin-warning)" }}
+            >
+              Internal Notes
+            </p>
+            <p
+              className="mt-1 text-sm"
+              style={{ color: "var(--admin-text-primary)" }}
+            >
+              {order.internal_notes}
+            </p>
           </div>
         )}
       </div>
     </main>
   );
-}
+}

src/app/admin/orders/page.tsx

@@ -65,11 +65,12 @@ export default async function AdminOrdersPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[var(--admin-bg)]">
+    <div className="min-h-screen" style={{ backgroundColor: "var(--admin-bg)" }}>
       <div className="px-4 sm:px-6 md:px-8 pt-4 sm:pt-6">
+        <p className="ha-eyebrow mb-2">Operations</p>
         <PageHeader
           title="Orders"
-          subtitle="Manage customer orders and pickup status"
+          subtitle="View, filter, and manage customer orders."
           icon={
             <svg className="h-5 w-5 sm:h-6 sm:w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/>
@@ -82,7 +83,13 @@ export default async function AdminOrdersPage() {
 
       {/* Content */}
       <div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6">
-        <div className="rounded-2xl border border-[var(--admin-border)] bg-white overflow-hidden">
+        <div
+          className="rounded-2xl border overflow-hidden"
+          style={{
+            borderColor: "var(--admin-border)",
+            backgroundColor: "var(--admin-card-bg)",
+          }}
+        >
           <AdminOrdersPanel
             initialOrders={brandOrders}
             initialStops={brandStops}