feat(admin): apply design system to Stops pages

- Stops list, new, and detail pages use new PageHeader with Operations
  eyebrow, Stops & Routes title, and editorial subtitle.
- StopsCalendarClient: replace hardcoded amber (#f59e0b) and brown (#92400e)
  draft markers with --admin-warning / --admin-warning-soft tokens. Calendar
  structure unchanged (drag/click/edit preserved).
- Add/Edit/StopDetail modals: replace hardcoded red rgba with --admin-danger-soft
  and color-mix derived borders.
- StopsLocationsTabs: swap hardcoded emerald-* for --admin-primary /
  --admin-primary-soft tokens.
- StopMessagingForm: align with design system (ha-field, ha-eyebrow, tokens).
- StopProductAssignment error surface: tokens instead of red rgba.
- StopsHeaderActions already tokenized via AdminButton; no change.

TS clean. Calendar functionality unchanged.

src/app/admin/stops/page.tsx

@@ -3,6 +3,7 @@ import { getAdminUser } from "@/lib/admin-permissions";
 import { getActiveBrandId } from "@/lib/brand-scope";
 import AdminAccessDenied from "@/components/admin/AdminAccessDenied";
 import StopTableClient from "@/components/admin/StopTableClient";
+import { PageHeader } from "@/components/admin/design-system";
 import { redirect } from "next/navigation";
 
 const StopIcon = () => (
@@ -75,20 +76,23 @@ export default async function AdminStopsPage({ searchParams }: PageProps) {
       <main className="min-h-screen bg-[var(--admin-bg)]">
         <div className="px-4 sm:px-6 md:px-8 py-6 sm:py-8">
           <div className="max-w-6xl mx-auto">
-            <nav className="flex items-center gap-2 text-xs sm:text-sm mb-6">
-              <a href="/admin" className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-secondary)]">Admin</a>
-              <span className="text-[var(--admin-text-muted)]">/</span>
-              <span className="text-[var(--admin-text-primary)] font-medium">Stops & Routes</span>
-            </nav>
-            <h1 className="text-2xl sm:text-3xl font-black text-red-600 tracking-tight">Error loading stops</h1>
-            <pre className="mt-4 rounded-xl bg-white border border-[var(--admin-border)] p-4 text-sm text-[var(--admin-text-secondary)] overflow-auto">
-              {error}
-            </pre>
-            <div className="mt-4 p-4 rounded-xl bg-stone-100 text-sm">
-              <p className="font-semibold">Debug info:</p>
-              <p>adminUser.brand_id: {adminUser.brand_id ?? "null"}</p>
-              <p>adminUser.role: {adminUser.role}</p>
-              <p>adminUser.email: {adminUser.email}</p>
+            <p className="ha-eyebrow mb-2">Operations</p>
+            <PageHeader
+              title="Stops & Routes"
+              subtitle="Schedule and manage pickup locations and dates."
+              icon={<StopIcon />}
+            />
+            <div className="rounded-2xl border border-[var(--admin-danger)]/30 bg-[var(--admin-danger-soft)] p-5">
+              <h2 className="text-lg font-semibold text-[var(--admin-danger)]">Error loading stops</h2>
+              <pre className="mt-3 rounded-xl bg-white border border-[var(--admin-border)] p-4 text-sm text-[var(--admin-text-secondary)] overflow-auto">
+                {error}
+              </pre>
+              <div className="mt-4 p-4 rounded-xl bg-[var(--admin-bg-subtle)] text-sm text-[var(--admin-text-secondary)]">
+                <p className="font-semibold text-[var(--admin-text-primary)]">Debug info:</p>
+                <p>adminUser.brand_id: {adminUser.brand_id ?? "null"}</p>
+                <p>adminUser.role: {adminUser.role}</p>
+                <p>adminUser.email: {adminUser.email}</p>
+              </div>
             </div>
           </div>
         </div>
@@ -115,7 +119,15 @@ export default async function AdminStopsPage({ searchParams }: PageProps) {
 
   return (
     <div className="min-h-screen bg-[var(--admin-bg)]">
-      <div className="px-4 sm:px-6 md:px-8 py-6 sm:py-8">
+      <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="Stops & Routes"
+          subtitle="Schedule and manage pickup locations and dates."
+          icon={<StopIcon />}
+        />
+      </div>
+      <div className="px-4 sm:px-6 md:px-8 pb-6 sm:pb-8">
         <StopTableClient stops={stopsForClient} />
       </div>
     </div>