@tangle-network/sandbox-ui 0.45.0 → 0.47.0

package/dist/{chunk-6NDOA4SB.js → chunk-2ISY4R72.js}

@@ -82,7 +82,7 @@ function ResizeHandle({ label, onDragStart, onStep, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border transition-colors" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-[var(--md3-outline-variant)] transition-colors" }),
         /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-[3px] -translate-x-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })
       ]
     }
@@ -119,7 +119,7 @@ function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border transition-colors" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-[var(--md3-outline-variant)] transition-colors" }),
         /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-[3px] -translate-y-1/2 rounded-full bg-transparent hover:bg-primary/30 focus-visible:bg-primary/40" })
       ]
     }
@@ -140,11 +140,11 @@ function MobileDrawer({ side, title, header, onClose, children }) {
       "aside",
       {
         className: cn(
-          "relative flex h-full w-[min(88vw,24rem)] flex-col border-border bg-background shadow-[var(--shadow-dropdown)]",
+          "relative flex h-full w-[min(88vw,24rem)] flex-col border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
           side === "left" ? "border-r" : "ml-auto border-l"
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[var(--md3-outline-variant)] px-3 py-2", children: [
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header ?? /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-foreground", children: title }) }),
             /* @__PURE__ */ jsx(
               "button",
@@ -298,9 +298,9 @@ function WorkspaceLayout({
               {
                 "aria-label": leftLabel,
                 style: leftStyle,
-                className: "hidden shrink-0 border-r border-border bg-background lg:flex lg:flex-col",
+                className: "hidden shrink-0 border-r border-[var(--md3-outline-variant)] bg-surface-container-low lg:flex lg:flex-col",
                 children: [
-                  leftHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5 bg-muted/20", children: [
+                  leftHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--md3-outline-variant)] px-3 py-1.5 bg-surface-container-high", children: [
                     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: leftHeader }),
                     /* @__PURE__ */ jsx(
                       "button",
@@ -327,7 +327,7 @@ function WorkspaceLayout({
             )
           ] }),
           /* @__PURE__ */ jsxs("main", { className: "flex min-w-0 flex-1 flex-col", children: [
-            (centerHeader || left || right || bottom) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-1.5", children: [
+            (centerHeader || left || right || bottom) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-1.5", children: [
               left && !leftOpen && /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -374,10 +374,10 @@ function WorkspaceLayout({
                 "section",
                 {
                   "aria-label": bottomLabel,
-                  className: "border-t border-border bg-card shrink-0",
+                  className: "border-t border-[var(--md3-outline-variant)] bg-surface-container shrink-0",
                   style: { height: `${bottomHeight}px` },
                   children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5 bg-muted/20 shrink-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--md3-outline-variant)] px-3 py-1.5 bg-surface-container-high shrink-0", children: [
                       /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: bottomHeader ?? /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Runtime" }) }),
                       /* @__PURE__ */ jsx(
                         "button",
@@ -395,7 +395,7 @@ function WorkspaceLayout({
                 }
               )
             ] }),
-            centerFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border bg-background", children: centerFooter })
+            centerFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-low", children: centerFooter })
           ] }),
           desktop && right && rightOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
             resizable && /* @__PURE__ */ jsx(
@@ -411,9 +411,9 @@ function WorkspaceLayout({
               {
                 "aria-label": rightLabel,
                 style: rightStyle,
-                className: "hidden shrink-0 border-l border-border bg-background lg:flex lg:flex-col",
+                className: "hidden shrink-0 border-l border-[var(--md3-outline-variant)] bg-surface-container-low lg:flex lg:flex-col",
                 children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-3 py-1.5 bg-muted/20", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--md3-outline-variant)] px-3 py-1.5 bg-surface-container-high", children: [
                     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: rightHeader ?? /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-foreground", children: "Artifacts" }) }),
                     /* @__PURE__ */ jsx(
                       "button",
@@ -599,36 +599,52 @@ import { Binary, ShieldCheck, TerminalSquare } from "lucide-react";
 import { Loader2, AlertCircle, CheckCircle, Wifi } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var BANNER_STYLES = {
-  provisioning: { bg: "bg-primary/5", border: "border-primary/20", icon: Loader2 },
-  connecting: { bg: "bg-[var(--code-number)]/5", border: "border-[var(--code-number)]/20", icon: Wifi },
-  error: { bg: "bg-[var(--code-error)]/5", border: "border-[var(--code-error)]/20", icon: AlertCircle },
-  success: { bg: "bg-[var(--code-success)]/5", border: "border-[var(--code-success)]/20", icon: CheckCircle },
-  info: { bg: "bg-muted/50", border: "border-border", icon: AlertCircle }
+  provisioning: { bg: "bg-primary/5", border: "border-primary/20", text: "text-primary", icon: Loader2 },
+  connecting: { bg: "bg-[var(--code-number)]/5", border: "border-[var(--code-number)]/20", text: "text-[var(--code-number)]", icon: Wifi },
+  error: { bg: "bg-[var(--code-error)]/5", border: "border-[var(--code-error)]/20", text: "text-[var(--code-error)]", icon: AlertCircle },
+  success: { bg: "bg-[var(--code-success)]/5", border: "border-[var(--code-success)]/20", text: "text-[var(--code-success)]", icon: CheckCircle },
+  info: { bg: "bg-surface-container-high", border: "border-[var(--md3-outline-variant)]", text: "text-muted-foreground", icon: AlertCircle }
 };
 function StatusBanner({ type, message, detail, onDismiss, className }) {
   const style = BANNER_STYLES[type];
   const Icon = style.icon;
   const isAnimated = type === "provisioning" || type === "connecting";
-  return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-3 px-4 py-2 border-b text-sm", style.bg, style.border, className), children: [
-    /* @__PURE__ */ jsx3(Icon, { className: cn("h-4 w-4 shrink-0", isAnimated && "animate-spin") }),
-    /* @__PURE__ */ jsx3("span", { className: "text-foreground", children: message }),
-    detail && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground text-xs", children: detail }),
-    onDismiss && /* @__PURE__ */ jsx3("button", { onClick: onDismiss, className: "ml-auto text-muted-foreground hover:text-foreground text-xs", children: "Dismiss" })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2.5 px-4 py-2 border-b font-sans text-sm",
+        style.bg,
+        style.border,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(Icon, { className: cn("h-4 w-4 shrink-0", style.text, isAnimated && "animate-spin") }),
+        /* @__PURE__ */ jsx3("span", { className: "font-medium text-foreground", children: message }),
+        detail && /* @__PURE__ */ jsx3("span", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: detail }),
+        onDismiss && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: onDismiss,
+            className: "ml-auto font-sans text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+            children: "Dismiss"
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/workspace/status-bar.tsx
 import { Zap, FileText, X as X2 } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var STATUS_LABELS = {
-  connected: { label: "", color: "bg-[var(--code-success)]" },
-  connecting: { label: "Connecting...", color: "bg-[var(--code-number)]" },
+  connected: { label: "Connected", color: "bg-[var(--code-success)]" },
+  connecting: { label: "Connecting\u2026", color: "bg-[var(--code-number)]" },
   disconnected: { label: "Disconnected", color: "bg-[var(--code-error)]" },
-  provisioning: { label: "Provisioning...", color: "bg-[var(--code-number)]" }
+  provisioning: { label: "Provisioning\u2026", color: "bg-[var(--code-number)]" }
 };
 function StatusBar({
-  modelLabel,
-  onModelClick,
   credits,
   contextBadges = [],
   onRemoveBadge,
@@ -640,26 +656,18 @@ function StatusBar({
     "div",
     {
       className: cn(
-        "flex items-center gap-3 px-3 py-1 border-t border-border bg-muted/20 text-[12px]",
+        "flex items-center gap-3 px-3 py-1 border-t border-[var(--md3-outline-variant)] bg-surface-container-high font-sans text-[12px]",
         className
       ),
       children: [
-        modelLabel && /* @__PURE__ */ jsxs4(
-          "button",
-          {
-            onClick: onModelClick,
-            className: "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-[2px] border border-border text-muted-foreground hover:border-primary/20 hover:text-foreground transition-colors",
-            children: [
-              /* @__PURE__ */ jsx4("span", { className: cn("w-1.5 h-1.5 rounded-full", statusInfo.color) }),
-              modelLabel
-            ]
-          }
-        ),
-        statusInfo.label && /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: statusInfo.label }),
+        /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx4("span", { className: cn("w-1.5 h-1.5 rounded-full", statusInfo.color) }),
+          statusInfo.label
+        ] }),
         contextBadges.map((badge) => /* @__PURE__ */ jsxs4(
           "span",
           {
-            className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[2px] border border-border text-foreground bg-[var(--border-accent)]/5",
+            className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-[2px] border border-[var(--md3-outline-variant)] text-foreground bg-[var(--border-accent)]/5",
             children: [
               /* @__PURE__ */ jsx4(FileText, { className: "h-3 w-3" }),
               badge.label,
@@ -678,9 +686,9 @@ function StatusBar({
         )),
         /* @__PURE__ */ jsx4("div", { className: "flex-1" }),
         credits !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1 text-muted-foreground", children: [
-          /* @__PURE__ */ jsx4(Zap, { className: "h-3 w-3" }),
-          credits.toLocaleString(),
-          " credits"
+          /* @__PURE__ */ jsx4(Zap, { className: "h-3 w-3 shrink-0" }),
+          /* @__PURE__ */ jsx4("span", { className: "font-mono tabular-nums", children: credits.toLocaleString() }),
+          /* @__PURE__ */ jsx4("span", { children: "credits" })
         ] })
       ]
     }
@@ -718,7 +726,7 @@ function TerminalPanel({
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [lines, isCollapsed]);
-  return /* @__PURE__ */ jsxs5("div", { className: cn("border-t border-border bg-card", className), children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("border-t border-[var(--md3-outline-variant)] bg-surface-container", className), children: [
     /* @__PURE__ */ jsxs5(
       "button",
       {
@@ -727,7 +735,7 @@ function TerminalPanel({
         children: [
           /* @__PURE__ */ jsx5(TerminalIcon, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ jsx5("span", { className: "font-medium", children: title }),
-          lines.length > 0 && /* @__PURE__ */ jsx5("span", { className: "px-1.5 py-0.5 rounded-full bg-muted text-[10px] tabular-nums", children: lines.length }),
+          lines.length > 0 && /* @__PURE__ */ jsx5("span", { className: "px-1.5 py-0.5 rounded-full bg-surface-container-high text-[10px] tabular-nums", children: lines.length }),
           /* @__PURE__ */ jsx5("div", { className: "flex-1" }),
           onClose && /* @__PURE__ */ jsx5(X3, { className: "h-3 w-3 hover:text-foreground", onClick: (e) => {
             e.stopPropagation();
@@ -741,7 +749,7 @@ function TerminalPanel({
       "div",
       {
         ref: scrollRef,
-        className: "overflow-auto px-3 pb-2 font-mono text-xs leading-[1.6]",
+        className: "overflow-auto px-3 pb-2 font-mono text-xs leading-[1.6] bg-surface-container-lowest",
         style: { maxHeight },
         children: [
           lines.map((line) => /* @__PURE__ */ jsxs5("div", { className: cn("whitespace-pre-wrap", LINE_COLORS[line.type]), children: [
@@ -773,19 +781,19 @@ function RuntimePane({
     "section",
     {
       className: cn(
-        "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
+        "flex h-full min-h-0 flex-col overflow-hidden bg-surface-container text-foreground",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs6("header", { className: "border-b border-border bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-4 py-3", children: [
+        /* @__PURE__ */ jsxs6("header", { className: "border-b border-[var(--md3-outline-variant)] bg-surface-container-high bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-4 py-3", children: [
           /* @__PURE__ */ jsx6("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: "Sandbox" }),
           /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-foreground", children: title }),
           /* @__PURE__ */ jsx6("div", { className: "mt-1 text-xs text-muted-foreground", children: subtitle })
         ] }),
         statusBanner && /* @__PURE__ */ jsx6(StatusBanner, { ...statusBanner }),
         statusBar && /* @__PURE__ */ jsx6(StatusBar, { ...statusBar }),
-        content ? /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-hidden", children: content }) : /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-border lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
-          /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-card", children: terminal ? /* @__PURE__ */ jsx6(
+        content ? /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1 overflow-hidden", children: content }) : /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 flex-1 gap-px bg-[var(--md3-outline-variant)] lg:grid-cols-[minmax(0,1.35fr)_minmax(20rem,0.9fr)]", children: [
+          /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-surface-container", children: terminal ? /* @__PURE__ */ jsx6(
             TerminalPanel,
             {
               ...terminal,
@@ -795,18 +803,18 @@ function RuntimePane({
             /* @__PURE__ */ jsx6(TerminalSquare, { className: "h-4 w-4" }),
             "No terminal activity yet"
           ] }) }) }),
-          /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 gap-px bg-border", children: [
-            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-card", children: audit ? audit : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "grid min-h-0 gap-px bg-[var(--md3-outline-variant)]", children: [
+            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-surface-container", children: audit ? audit : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx6(ShieldCheck, { className: "h-4 w-4" }),
               "No audit data available"
             ] }) }) }),
-            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-card", children: inspector ? inspector : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-auto bg-surface-container", children: inspector ? inspector : /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center p-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx6(Binary, { className: "h-4 w-4" }),
               "No runtime inspector attached"
             ] }) }) })
           ] })
         ] }),
-        footer && /* @__PURE__ */ jsx6("footer", { className: "shrink-0 border-t border-border bg-card px-3 py-2", children: footer })
+        footer && /* @__PURE__ */ jsx6("footer", { className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: footer })
       ]
     }
   );
@@ -939,7 +947,7 @@ function badgeTone(tone = "neutral") {
     case "danger":
       return "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]";
     default:
-      return "border-border bg-muted text-muted-foreground";
+      return "border-[var(--md3-outline-variant)] bg-surface-container-high text-muted-foreground";
   }
 }
 function navigateToHref(href) {
@@ -1045,10 +1053,10 @@ function SessionSidebar({
   return /* @__PURE__ */ jsxs7(
     "aside",
     {
-      className: cn("relative flex shrink-0 flex-col border-r border-border bg-card", className),
+      className: cn("relative flex shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low", className),
       style: { width: resizable ? resize.width : defaultWidth },
       children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex shrink-0 items-center border-b border-border bg-muted/20 px-3 py-1.5", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx7("div", { className: "flex shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-1.5", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 items-center gap-2", children: [
             /* @__PURE__ */ jsx7("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3.5 w-3.5" }) }),
             /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
@@ -1064,13 +1072,13 @@ function SessionSidebar({
                 type: "button",
                 onClick: onCreate,
                 title: createLabel,
-                className: "flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-border text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
+                className: "flex h-7 w-7 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] text-muted-foreground transition-colors hover:bg-[var(--accent-surface-soft)] hover:text-foreground",
                 children: /* @__PURE__ */ jsx7(Plus, { className: "h-3.5 w-3.5" })
               }
             )
           ] })
         ] }) }),
-        (enableSearch && items.length > 0 || filters.length > 0) && /* @__PURE__ */ jsxs7("div", { className: "shrink-0 border-b border-border px-3 py-2.5", children: [
+        (enableSearch && items.length > 0 || filters.length > 0) && /* @__PURE__ */ jsxs7("div", { className: "shrink-0 border-b border-[var(--md3-outline-variant)] px-3 py-2.5", children: [
           enableSearch && effectiveItems.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
             /* @__PURE__ */ jsx7(Search2, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }),
             /* @__PURE__ */ jsx7(
@@ -1080,7 +1088,7 @@ function SessionSidebar({
                 onChange: (event) => setQuery(event.target.value),
                 placeholder: searchPlaceholder,
                 "aria-label": searchPlaceholder,
-                className: "h-8 w-full rounded-[var(--radius-sm)] border border-transparent bg-muted/40 pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
+                className: "h-8 w-full rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]"
               }
             )
           ] }),
@@ -1093,7 +1101,7 @@ function SessionSidebar({
                 onClick: () => setActiveFilterId(filter.id),
                 className: cn(
                   "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium transition-colors",
-                  isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-border text-muted-foreground hover:text-foreground"
+                  isSelected ? "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary" : "border-[var(--md3-outline-variant)] text-muted-foreground hover:text-foreground"
                 ),
                 children: [
                   /* @__PURE__ */ jsx7("span", { children: filter.label }),
@@ -1174,8 +1182,8 @@ function SessionSidebar({
             }
           ) }, item.id);
         }) }) }),
-        activityMonitor && /* @__PURE__ */ jsx7("div", { className: "border-t border-border px-2 py-1.5", children: activityMonitor }),
-        links.length > 0 && /* @__PURE__ */ jsx7("nav", { "aria-label": "Workspace sections", className: "border-t border-border px-1.5 py-1.5", children: /* @__PURE__ */ jsx7("div", { className: "space-y-px", children: links.map((link) => {
+        activityMonitor && /* @__PURE__ */ jsx7("div", { className: "border-t border-[var(--md3-outline-variant)] px-2 py-1.5", children: activityMonitor }),
+        links.length > 0 && /* @__PURE__ */ jsx7("nav", { "aria-label": "Workspace sections", className: "border-t border-[var(--md3-outline-variant)] px-1.5 py-1.5", children: /* @__PURE__ */ jsx7("div", { className: "space-y-px", children: links.map((link) => {
           const Icon = iconForLink(link.icon);
           return /* @__PURE__ */ jsxs7(
             "button",
@@ -1264,7 +1272,7 @@ function SessionActivityMonitor({
   const sessionLookup = Object.keys(sessionsById).length > 0 ? sessionsById : Object.fromEntries(trackedSessions.map((session) => [session.sessionId, session]));
   if (projectActivity.length === 0) {
     if (compact) return null;
-    return /* @__PURE__ */ jsx8("div", { className: cn("rounded-[var(--radius-lg)] border border-border bg-muted px-3 py-2.5 text-xs text-muted-foreground", className), children: emptyMessage });
+    return /* @__PURE__ */ jsx8("div", { className: cn("rounded-[var(--radius-lg)] border border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2.5 text-xs text-muted-foreground", className), children: emptyMessage });
   }
   return /* @__PURE__ */ jsxs8("div", { className: cn("space-y-1.5", className), children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
@@ -1279,7 +1287,7 @@ function SessionActivityMonitor({
       return /* @__PURE__ */ jsxs8(
         "div",
         {
-          className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card",
+          className: "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--md3-outline-variant)] bg-surface-container",
           children: [
             /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-2 px-2.5 py-1.5", children: [
               /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
@@ -1295,7 +1303,7 @@ function SessionActivityMonitor({
                 " live"
               ] })
             ] }),
-            !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx8("div", { className: "border-t border-border bg-muted px-1 py-0.5", children: project.runningSessionIds.map((sessionId) => {
+            !compact && project.runningSessionIds.length > 0 && /* @__PURE__ */ jsx8("div", { className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-1 py-0.5", children: project.runningSessionIds.map((sessionId) => {
               const session = sessionLookup[sessionId];
               if (!session) return null;
               return /* @__PURE__ */ jsxs8(
@@ -1370,15 +1378,15 @@ function ArtifactTabs({
   onClose
 }) {
   if (artifacts.length === 0) return null;
-  return /* @__PURE__ */ jsx9("div", { className: "flex items-center overflow-x-auto border-b border-border bg-muted/20", children: artifacts.map((artifact) => {
+  return /* @__PURE__ */ jsx9("div", { className: "flex items-center overflow-x-auto border-b border-[var(--md3-outline-variant)] bg-surface-container-high", children: artifacts.map((artifact) => {
     const Icon = getArtifactTabIcon(artifact.kind);
     const isActive = artifact.id === activeArtifactId;
     return /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn(
-          "group flex shrink-0 items-center border-r border-border bg-background relative",
-          isActive ? "text-foreground after:absolute after:top-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary" : "text-muted-foreground hover:bg-muted/50 cursor-pointer"
+          "group flex shrink-0 items-center border-r border-[var(--md3-outline-variant)] bg-surface-container relative",
+          isActive ? "text-foreground after:absolute after:top-0 after:left-0 after:right-0 after:h-[2px] after:bg-primary" : "text-muted-foreground hover:bg-surface-container-high cursor-pointer"
         ),
         children: [
           /* @__PURE__ */ jsxs9(
@@ -1550,7 +1558,7 @@ function SandboxWorkbench({
     }
     onArtifactChange?.(artifactId);
   };
-  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-border bg-muted/50 px-4 py-3.5", children: [
+  const centerHeader = /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 items-start justify-between gap-4 rounded-[var(--radius-xl)] border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-3.5", children: [
     /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsx9("div", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-primary", children: "Tangle Sandbox" }),
       /* @__PURE__ */ jsx9("div", { className: "truncate text-[17px] font-semibold tracking-[0.01em] text-foreground", children: title }),
@@ -1574,7 +1582,7 @@ function SandboxWorkbench({
       meta: session.meta,
       headerActions: session.headerActions,
       className: "h-full",
-      contentClassName: "bg-background",
+      contentClassName: "bg-surface-container",
       children: /* @__PURE__ */ jsxs9("div", { className: "flex h-full min-h-0 flex-col", children: [
         /* @__PURE__ */ jsx9(
           ChatContainer,
@@ -1584,11 +1592,11 @@ function SandboxWorkbench({
             presentation: session.presentation ?? "timeline"
           }
         ),
-        composerControls && /* @__PURE__ */ jsx9("div", { className: "shrink-0 border-t border-border bg-muted/30 px-3 py-2", children: composerControls })
+        composerControls && /* @__PURE__ */ jsx9("div", { className: "shrink-0 border-t border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: composerControls })
       ] })
     }
   );
-  const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-background", children: [
+  const artifactPanel = artifacts.length > 0 ? /* @__PURE__ */ jsxs9("section", { className: "flex h-full min-h-0 flex-col bg-surface-container", children: [
     /* @__PURE__ */ jsx9(
       ArtifactTabs,
       {
@@ -1598,7 +1606,7 @@ function SandboxWorkbench({
         onClose: onArtifactClose
       }
     ),
-    /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto bg-background", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx9("div", { className: "min-h-0 flex-1 overflow-auto bg-surface-container", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx9("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx9(
       EmptyState2,
       {
         icon: /* @__PURE__ */ jsx9(Boxes, { className: "h-8 w-8" }),
@@ -1690,7 +1698,7 @@ function AuditResults({ forms, crossFormChecks = [], overallScore, className })
   const totalPassed = forms.reduce((s, f) => s + f.passed, 0);
   const totalChecks = forms.reduce((s, f) => s + f.passed + f.failed, 0);
   return /* @__PURE__ */ jsxs10("div", { className: cn("space-y-3 p-3", className), children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] bg-background border border-border", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] bg-surface-container-high border border-[var(--md3-outline-variant)]", children: [
       /* @__PURE__ */ jsx10(Shield, { className: cn("h-5 w-5", totalChecks === totalPassed ? "text-[var(--code-success)]" : "text-[var(--code-number)]") }),
       /* @__PURE__ */ jsxs10("div", { children: [
         /* @__PURE__ */ jsxs10("div", { className: "text-sm font-semibold text-foreground", children: [
@@ -1716,7 +1724,7 @@ function AuditResults({ forms, crossFormChecks = [], overallScore, className })
 function FormAuditCard({ form }) {
   const [expanded, setExpanded] = useState6(form.failed > 0);
   const allPassed = form.failed === 0 && form.found;
-  return /* @__PURE__ */ jsxs10("div", { className: "rounded-[var(--radius-md)] border border-border overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-high overflow-hidden", children: [
     /* @__PURE__ */ jsxs10(
       "button",
       {
@@ -1734,7 +1742,7 @@ function FormAuditCard({ form }) {
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsx10("div", { className: "border-t border-border px-3 py-1.5 space-y-0.5", children: form.checks.map((check, i) => /* @__PURE__ */ jsx10(CheckRow, { check }, i)) })
+    expanded && /* @__PURE__ */ jsx10("div", { className: "border-t border-[var(--md3-outline-variant)] px-3 py-1.5 space-y-0.5", children: form.checks.map((check, i) => /* @__PURE__ */ jsx10(CheckRow, { check }, i)) })
   ] });
 }
 function CheckRow({ check }) {
@@ -1801,17 +1809,17 @@ function TaskBoard({
                 event.preventDefault();
                 onClickItem(item);
               },
-              className: "group w-full rounded-lg border border-border bg-card p-3 text-left transition-colors hover:border-accent/50",
+              className: "group w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-high p-3 text-left transition-colors hover:border-accent/50",
               children: [
                 /* @__PURE__ */ jsx11("p", { className: "text-sm font-medium text-foreground", children: item.title }),
                 item.description && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-xs text-muted-foreground line-clamp-2", children: item.description }),
                 (item.priority || item.tags?.length) && /* @__PURE__ */ jsxs11("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
-                  item.priority && (renderBadge ? renderBadge(item.priority, "priority") : /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: item.priority })),
+                  item.priority && (renderBadge ? renderBadge(item.priority, "priority") : /* @__PURE__ */ jsx11("span", { className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: item.priority })),
                   item.tags?.map(
                     (tag) => renderBadge ? /* @__PURE__ */ jsx11("span", { children: renderBadge(tag, "tag") }, tag) : /* @__PURE__ */ jsx11(
                       "span",
                       {
-                        className: "rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground",
+                        className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] text-muted-foreground",
                         children: tag
                       },
                       tag
@@ -1831,14 +1839,14 @@ function TaskBoard({
         "div",
         {
           className: cn(
-            "flex w-72 shrink-0 flex-col rounded-xl border border-border bg-card/50 border-t-2",
+            "flex w-72 shrink-0 flex-col rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container border-t-2",
             col.accent ?? "border-t-muted-foreground/30"
           ),
           children: [
             /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between px-4 py-3", children: [
               /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx11("h3", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: col.label }),
-                /* @__PURE__ */ jsx11("span", { className: "inline-flex h-5 min-w-[20px] items-center justify-center rounded-full border border-border px-1.5 text-[10px] font-medium text-muted-foreground", children: colItems.length })
+                /* @__PURE__ */ jsx11("span", { className: "inline-flex h-5 min-w-[20px] items-center justify-center rounded-full border border-[var(--md3-outline-variant)] px-1.5 text-[10px] font-medium text-muted-foreground", children: colItems.length })
               ] }),
               renderColumnAction?.(col)
             ] }),
@@ -1943,8 +1951,8 @@ function CalendarView({
   });
   const selectedDayEvents = selectedDay ? eventsByDate[selectedDay] ?? [] : [];
   return /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-1 min-h-0 overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col overflow-hidden border-r border-border", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between border-b border-border px-4 py-2.5 shrink-0", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col overflow-hidden border-r border-[var(--md3-outline-variant)]", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] px-4 py-2.5 shrink-0", children: [
         /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
           headerLeft,
           /* @__PURE__ */ jsx12(
@@ -1952,7 +1960,7 @@ function CalendarView({
             {
               type: "button",
               onClick: prevMonth,
-              className: "h-7 w-7 rounded-md hover:bg-muted flex items-center justify-center text-muted-foreground",
+              className: "h-7 w-7 rounded-md hover:bg-surface-container-high flex items-center justify-center text-muted-foreground",
               children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx12("path", { d: "m15 18-6-6 6-6" }) })
             }
           ),
@@ -1962,7 +1970,7 @@ function CalendarView({
             {
               type: "button",
               onClick: nextMonth,
-              className: "h-7 w-7 rounded-md hover:bg-muted flex items-center justify-center text-muted-foreground",
+              className: "h-7 w-7 rounded-md hover:bg-surface-container-high flex items-center justify-center text-muted-foreground",
               children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx12("path", { d: "m9 18 6-6-6-6" }) })
             }
           ),
@@ -1974,14 +1982,14 @@ function CalendarView({
                 setMonth(today.getFullYear(), today.getMonth());
                 selectDay(todayKey);
               },
-              className: "h-7 px-2 rounded-md border border-border text-xs font-medium text-muted-foreground hover:text-foreground",
+              className: "h-7 px-2 rounded-md border border-[var(--md3-outline-variant)] text-xs font-medium text-muted-foreground hover:text-foreground",
               children: "Today"
             }
           )
         ] }),
         headerRight
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-7 border-b border-border shrink-0", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((d) => /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-7 border-b border-[var(--md3-outline-variant)] shrink-0", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((d) => /* @__PURE__ */ jsx12(
         "div",
         {
           className: "px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground text-center",
@@ -2000,10 +2008,10 @@ function CalendarView({
             onClick: () => selectDay(key),
             onDoubleClick: () => onDoubleClickDay?.(key),
             className: cn(
-              "flex flex-col items-start p-1.5 border-b border-r border-border text-left transition-colors min-h-[72px]",
+              "flex flex-col items-start p-1.5 border-b border-r border-[var(--md3-outline-variant)] text-left transition-colors min-h-[72px]",
               !inMonth && "bg-muted/30",
               isSelected && "bg-primary/5 ring-1 ring-inset ring-primary/20",
-              !isSelected && "hover:bg-muted/50"
+              !isSelected && "hover:bg-surface-container-high"
             ),
             children: [
               /* @__PURE__ */ jsx12(
@@ -2043,7 +2051,7 @@ function CalendarView({
       }) })
     ] }),
     showDayPanel && /* @__PURE__ */ jsx12("div", { className: "w-80 shrink-0 flex flex-col overflow-hidden", children: renderDayDetail ? renderDayDetail(selectedDay ?? todayKey, selectedDayEvents) : /* @__PURE__ */ jsxs12(Fragment3, { children: [
-      /* @__PURE__ */ jsxs12("div", { className: "px-4 py-3 border-b border-border shrink-0", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "px-4 py-3 border-b border-[var(--md3-outline-variant)] shrink-0", children: [
         /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-foreground", children: selectedDay === todayKey ? "Today" : selectedDay ? (/* @__PURE__ */ new Date(selectedDay + "T00:00:00")).toLocaleDateString(
           "en-US",
           { weekday: "long", month: "long", day: "numeric" }
@@ -2059,10 +2067,10 @@ function CalendarView({
         selectedDayEvents.map((evt) => /* @__PURE__ */ jsxs12(
           "div",
           {
-            className: "rounded-lg border border-border bg-card p-3",
+            className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-3",
             children: [
               /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-foreground", children: evt.title }),
-              evt.type && /* @__PURE__ */ jsx12("span", { className: "mt-1 inline-block rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground", children: evt.type })
+              evt.type && /* @__PURE__ */ jsx12("span", { className: "mt-1 inline-block rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] text-muted-foreground", children: evt.type })
             ]
           },
           evt.id
@@ -2122,9 +2130,9 @@ function ApprovalQueue({
     stats.length > 0 && /* @__PURE__ */ jsx13("div", { className: "flex gap-3 mb-6 flex-wrap", children: renderStats ? renderStats(stats) : stats.map((s) => /* @__PURE__ */ jsxs13(
       "div",
       {
-        className: "flex-1 min-w-[120px] rounded-lg border border-border bg-card p-3",
+        className: "flex-1 min-w-[120px] rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-3",
         children: [
-          /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 mb-1", children: renderTypeBadge ? renderTypeBadge(s.type) : /* @__PURE__ */ jsx13("span", { className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: s.type }) }),
+          /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 mb-1", children: renderTypeBadge ? renderTypeBadge(s.type) : /* @__PURE__ */ jsx13("span", { className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: s.type }) }),
           /* @__PURE__ */ jsx13("div", { className: "flex items-baseline gap-1", children: /* @__PURE__ */ jsxs13("span", { className: "text-xl font-semibold text-foreground", children: [
             s.rate,
             "%"
@@ -2148,13 +2156,13 @@ function ApprovalQueue({
       /* @__PURE__ */ jsx13("div", { className: "space-y-3", children: pending.map((item) => /* @__PURE__ */ jsxs13(
         "div",
         {
-          className: "rounded-lg border border-primary/20 bg-card p-4",
+          className: "rounded-lg border border-primary/20 bg-surface-container p-4",
           children: [
             /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-3", children: [
               /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 mb-1", children: [
                   /* @__PURE__ */ jsx13("h4", { className: "text-sm font-medium text-foreground", children: item.title }),
-                  renderTypeBadge ? renderTypeBadge(item.type) : /* @__PURE__ */ jsx13("span", { className: "rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground", children: item.type })
+                  renderTypeBadge ? renderTypeBadge(item.type) : /* @__PURE__ */ jsx13("span", { className: "rounded-full border border-[var(--md3-outline-variant)] px-2 py-0.5 text-[10px] text-muted-foreground", children: item.type })
                 ] }),
                 item.description && /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground line-clamp-2", children: item.description }),
                 renderItemDetail?.(item)
@@ -2165,7 +2173,7 @@ function ApprovalQueue({
                   {
                     type: "button",
                     onClick: () => onApprove?.(item),
-                    className: "h-8 px-3 rounded-md border border-border text-xs font-medium text-emerald-500 hover:bg-emerald-500/10 hover:border-emerald-500/30 transition-colors",
+                    className: "h-8 px-3 rounded-md border border-[var(--md3-outline-variant)] text-xs font-medium text-emerald-500 hover:bg-emerald-500/10 hover:border-emerald-500/30 transition-colors",
                     children: "Approve"
                   }
                 ),
@@ -2179,20 +2187,20 @@ function ApprovalQueue({
                       );
                       setRejectReason("");
                     },
-                    className: "h-8 px-3 rounded-md border border-border text-xs font-medium text-destructive hover:bg-destructive/10 hover:border-destructive/30 transition-colors",
+                    className: "h-8 px-3 rounded-md border border-[var(--md3-outline-variant)] text-xs font-medium text-destructive hover:bg-destructive/10 hover:border-destructive/30 transition-colors",
                     children: "Reject"
                   }
                 )
               ] })
             ] }),
-            rejectingId === item.id && /* @__PURE__ */ jsxs13("div", { className: "mt-3 border-t border-border pt-3", children: [
+            rejectingId === item.id && /* @__PURE__ */ jsxs13("div", { className: "mt-3 border-t border-[var(--md3-outline-variant)] pt-3", children: [
               /* @__PURE__ */ jsx13(
                 "textarea",
                 {
                   placeholder: "Why are you rejecting this?",
                   value: rejectReason,
                   onChange: (e) => setRejectReason(e.target.value),
-                  className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 mb-2",
+                  className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 mb-2",
                   rows: 2
                 }
               ),
@@ -2262,7 +2270,7 @@ function ApprovalQueue({
       showResolved && /* @__PURE__ */ jsx13("div", { className: "space-y-2", children: resolved.map((item) => /* @__PURE__ */ jsxs13(
         "div",
         {
-          className: "rounded-lg border border-border bg-card p-4 opacity-60",
+          className: "rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container p-4 opacity-60",
           children: [
             /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 mb-1", children: [
               /* @__PURE__ */ jsx13("h4", { className: "text-sm font-medium text-foreground", children: item.title }),