feat: update templates and improve UI styling across components

frontend/src/components/atoms/BrandMark.tsx

@@ -1,16 +1,17 @@
 export function BrandMark() {
   return (
     <div className="flex items-center gap-3">
-      <div className="grid h-10 w-10 place-items-center rounded-lg border-2 border-gray-200 bg-white text-sm font-bold text-gray-900 shadow-lush">
-        <span className="font-heading tracking-[0.2em]">
-          OC
-        </span>
+      <div className="relative grid h-11 w-11 place-items-center rounded-2xl bg-[color:var(--accent)] text-sm font-semibold text-white shadow-lush">
+        <span className="font-heading tracking-[0.18em]">OC</span>
+        <span className="absolute -bottom-1 h-1 w-6 rounded-full bg-[color:var(--accent-strong)]" />
       </div>
       <div className="leading-tight">
-        <div className="font-heading text-sm uppercase tracking-[0.28em] text-gray-600">
+        <div className="font-heading text-sm uppercase tracking-[0.28em] text-strong">
           OpenClaw
         </div>
-        <div className="text-[11px] font-medium text-gray-500">Mission Control</div>
+        <div className="text-[11px] font-medium text-quiet">
+          Mission Control
+        </div>
       </div>
     </div>
   );

frontend/src/components/atoms/HeroKicker.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 export function HeroKicker({ children }: { children: ReactNode }) {
   return (
-    <span className="inline-flex items-center rounded-full bg-gray-100 px-4 py-1 text-[11px] font-semibold uppercase tracking-[0.35em] text-gray-600">
+    <span className="inline-flex items-center rounded-full bg-[color:var(--accent-soft)] px-4 py-1 text-[11px] font-semibold uppercase tracking-[0.35em] text-[color:var(--accent-strong)]">
       {children}
     </span>
   );

frontend/src/components/atoms/StatusPill.tsx

@@ -1,21 +1,24 @@
 import { Badge } from "@/components/ui/badge";
 
-const STATUS_STYLES: Record<string, "default" | "outline" | "ember"> = {
+const STATUS_STYLES: Record<
+  string,
+  "default" | "outline" | "accent" | "success" | "warning" | "danger"
+> = {
   inbox: "outline",
-  assigned: "default",
-  in_progress: "ember",
-  testing: "outline",
-  review: "default",
-  done: "default",
-  online: "default",
-  busy: "ember",
+  assigned: "accent",
+  in_progress: "warning",
+  testing: "accent",
+  review: "accent",
+  done: "success",
+  online: "success",
+  busy: "warning",
   offline: "outline",
 };
 
 export function StatusPill({ status }: { status: string }) {
   return (
     <Badge variant={STATUS_STYLES[status] ?? "default"}>
-      {status.replace("_", " ")}
+      {status.replaceAll("_", " ")}
     </Badge>
   );
 }