@almadar/ui 5.123.0 → 5.125.0

package/dist/runtime/index.cjs

@@ -5176,15 +5176,15 @@ var init_TextHighlight = __esm({
       const typeStyles = {
         question: cn(
           // Blue border for questions
-          "bg-card border-b-2 border-primary-600",
+          "bg-card border-b-2 border-primary",
           "hover:bg-muted",
-          isActive && "bg-primary-100 ring-2 ring-primary-600"
+          isActive && "bg-primary/10 ring-2 ring-primary"
         ),
         note: cn(
           // Yellow border for notes
-          "bg-card border-b-2 border-amber-500",
+          "bg-card border-b-2 border-warning",
           "hover:bg-muted",
-          isActive && "bg-amber-100 ring-2 ring-amber-500"
+          isActive && "bg-warning/10 ring-2 ring-warning"
         )
       };
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5530,7 +5530,7 @@ function DayCell({
     {
       className: cn(
         "p-2 text-center cursor-pointer hover:bg-muted transition-colors",
-        isToday && "bg-blue-500/10",
+        isToday && "bg-primary/10",
         className
       ),
       onClick: handleClick,
@@ -5541,7 +5541,7 @@ function DayCell({
             variant: "small",
             className: cn(
               "font-medium",
-              isToday ? "text-blue-600" : "text-muted-foreground"
+              isToday ? "text-primary" : "text-muted-foreground"
             ),
             children: dayAbbr
           }
@@ -5553,7 +5553,7 @@ function DayCell({
             rounded: "full",
             className: cn(
               "h-8 w-8 mx-auto items-center justify-center",
-              isToday && "bg-blue-600 text-white"
+              isToday && "bg-primary text-primary-foreground"
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "font-semibold", children: safeDate.getDate() })
           }
@@ -12265,19 +12265,19 @@ var init_ActivationBlock = __esm({
         "div",
         {
           className: cn(
-            "bg-indigo-50 dark:bg-indigo-900/20 border-2 border-indigo-200 dark:border-indigo-800 rounded-lg p-5 mb-6",
+            "bg-primary/10 border-2 border-primary rounded-lg p-5 mb-6",
             className
           ),
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Lightbulb, { className: "text-indigo-600 dark:text-indigo-400 flex-shrink-0 mt-1", size: 24 }),
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Lightbulb, { className: "text-primary flex-shrink-0 mt-1", size: 24 }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-indigo-900 dark:text-indigo-100 mb-2", children: "Before You Begin..." }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300 mb-3 text-sm md:text-base", children: question }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-primary mb-2", children: "Before You Begin..." }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground mb-3 text-sm md:text-base", children: question }),
               isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "textarea",
                   {
-                    className: "w-full p-3 border border-indigo-300 dark:border-indigo-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm",
+                    className: "w-full p-3 border border-input rounded-md bg-card text-foreground focus:ring-2 focus:ring-ring focus:border-transparent text-sm",
                     placeholder: "Jot down your thoughts...",
                     value: response,
                     onChange: (e) => setResponse(e.target.value),
@@ -12289,7 +12289,7 @@ var init_ActivationBlock = __esm({
                     "button",
                     {
                       onClick: handleSubmit,
-                      className: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm font-medium transition-colors",
+                      className: "px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary-hover text-sm font-medium transition-colors",
                       children: "Continue to Lesson \u2192"
                     }
                   ),
@@ -12300,7 +12300,7 @@ var init_ActivationBlock = __esm({
                         emit(`UI:${saveEvent}`, { response: "" });
                         setIsExpanded(false);
                       },
-                      className: "px-4 py-2 text-indigo-600 dark:text-indigo-400 hover:underline text-sm",
+                      className: "px-4 py-2 text-primary hover:underline text-sm",
                       children: "Skip for now"
                     }
                   )
@@ -12309,7 +12309,7 @@ var init_ActivationBlock = __esm({
                 "button",
                 {
                   onClick: () => setIsExpanded(true),
-                  className: "text-sm text-indigo-600 dark:text-indigo-400 hover:underline font-medium",
+                  className: "text-sm text-primary hover:underline font-medium",
                   children: "\u2713 Answered \xB7 Edit response"
                 }
               )
@@ -12813,7 +12813,7 @@ var init_AuthLayout = __esm({
           VStack,
           {
             className: cn(
-              "hidden lg:flex lg:w-1/2 bg-primary-600 relative overflow-hidden",
+              "hidden lg:flex lg:w-1/2 bg-primary relative overflow-hidden",
               "justify-between p-12"
             ),
             style: backgroundImage ? {
@@ -12822,7 +12822,7 @@ var init_AuthLayout = __esm({
             } : void 0,
             gap: "none",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary-600/90 to-primary-800/90" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary/90 to-primary-hover/90" }),
               /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-3", children: [
                 logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-[var(--color-card)]/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsxRuntime.jsx(
                   Typography,
@@ -12907,7 +12907,7 @@ var init_AuthLayout = __esm({
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "w-full max-w-md", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "lg:hidden mb-8 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "inline-flex items-center gap-3", children: [
-                logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-12 h-12 bg-primary-600 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-12 h-12 bg-primary rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                   Typography,
                   {
                     variant: "body1",
@@ -14898,7 +14898,7 @@ var init_CodeBlock = __esm({
             {
               justify: "between",
               align: "center",
-              className: "px-3 py-2 bg-[var(--color-card)] rounded-t-lg border-b border-gray-700",
+              className: "px-3 py-2 bg-[var(--color-card)] rounded-t-lg border-b border-border",
               children: [
                 showLanguageBadge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: language }),
                 effectiveCopy && /* @__PURE__ */ jsxRuntime.jsx(
@@ -14907,9 +14907,9 @@ var init_CodeBlock = __esm({
                     variant: "ghost",
                     size: "sm",
                     onClick: handleCopy,
-                    className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-white",
+                    className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-foreground",
                     "aria-label": t("common.copy"),
-                    children: copied ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", className: "w-4 h-4 text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "copy", className: "w-4 h-4" })
+                    children: copied ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "check", className: "w-4 h-4 text-success" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "copy", className: "w-4 h-4" })
                   }
                 )
               ]
@@ -15277,12 +15277,12 @@ var init_BloomQuizBlock = __esm({
     init_useEventBus();
     init_cn();
     BLOOM_CONFIG = {
-      remember: { color: "bg-gray-500", bgColor: "bg-gray-50 dark:bg-gray-900/30", label: "Remember" },
-      understand: { color: "bg-blue-500", bgColor: "bg-blue-50 dark:bg-blue-900/30", label: "Understand" },
-      apply: { color: "bg-green-500", bgColor: "bg-green-50 dark:bg-green-900/30", label: "Apply" },
-      analyze: { color: "bg-yellow-500", bgColor: "bg-yellow-50 dark:bg-yellow-900/30", label: "Analyze" },
-      evaluate: { color: "bg-orange-500", bgColor: "bg-orange-50 dark:bg-orange-900/30", label: "Evaluate" },
-      create: { color: "bg-purple-500", bgColor: "bg-purple-50 dark:bg-purple-900/30", label: "Create" }
+      remember: { color: "bg-secondary text-secondary-foreground", bgColor: "bg-muted", label: "Remember" },
+      understand: { color: "bg-info text-info-foreground", bgColor: "bg-info/10", label: "Understand" },
+      apply: { color: "bg-success text-success-foreground", bgColor: "bg-success/10", label: "Apply" },
+      analyze: { color: "bg-warning text-warning-foreground", bgColor: "bg-warning/10", label: "Analyze" },
+      evaluate: { color: "bg-accent text-accent-foreground", bgColor: "bg-accent/10", label: "Evaluate" },
+      create: { color: "bg-primary text-primary-foreground", bgColor: "bg-primary/10", label: "Create" }
     };
     BloomQuizBlock = ({
       level,
@@ -15308,22 +15308,22 @@ var init_BloomQuizBlock = __esm({
         "div",
         {
           className: cn(
-            "rounded-lg border border-indigo-100 dark:border-indigo-800 p-4 my-4 transition-all",
+            "rounded-lg border border-primary p-4 my-4 transition-all",
             config.bgColor,
             className
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                index !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-500 dark:text-gray-400 font-medium text-sm", children: [
+                index !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground font-medium text-sm", children: [
                   "Question ",
                   index + 1
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(config.color, "text-white text-xs px-2 py-1 rounded-full font-medium"), children: config.label })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(config.color, "text-xs px-2 py-1 rounded-full font-medium"), children: config.label })
               ] }),
-              isAnswered && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.CheckCircle, { className: "text-green-600 dark:text-green-400 flex-shrink-0", size: 20 })
+              isAnswered && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.CheckCircle, { className: "text-success flex-shrink-0", size: 20 })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-indigo-900 dark:text-indigo-200 mb-3 space-y-2", children: questionSegments.map(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-primary mb-3 space-y-2", children: questionSegments.map(
               (segment, idx) => segment.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content: segment.content }, `q-md-${idx}`) : /* @__PURE__ */ jsxRuntime.jsx(
                 CodeBlock,
                 {
@@ -15337,13 +15337,13 @@ var init_BloomQuizBlock = __esm({
               "button",
               {
                 type: "button",
-                className: "inline-flex items-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors",
+                className: "inline-flex items-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary-hover transition-colors",
                 onClick: handleReveal,
                 children: revealed ? "Hide Answer" : "Reveal Answer"
               }
             ),
-            revealed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-white/80 dark:bg-gray-800/80 p-3 text-sm text-slate-800 dark:text-gray-200 shadow-sm border border-indigo-100 dark:border-indigo-800 mt-3 space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 mb-1 font-medium uppercase tracking-wide", children: "Answer:" }),
+            revealed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card/80 p-3 text-sm text-foreground shadow-sm border border-primary mt-3 space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mb-1 font-medium uppercase tracking-wide", children: "Answer:" }),
               answerSegments.map(
                 (segment, idx) => segment.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content: segment.content }, `a-md-${idx}`) : /* @__PURE__ */ jsxRuntime.jsx(
                   CodeBlock,
@@ -15567,12 +15567,12 @@ var init_QuizBlock = __esm({
     }) => {
       const { t } = hooks.useTranslate();
       const [revealed, setRevealed] = React82.useState(false);
-      return /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: cn("my-4 border-blue-200 dark:border-blue-800", className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "p-4", children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: cn("my-4 border-primary", className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "start", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons2.HelpCircle, size: "sm", className: "text-blue-500 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: LucideIcons2.HelpCircle, size: "sm", className: "text-primary mt-0.5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "font-medium", children: question })
         ] }),
-        revealed ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pl-7 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-foreground", children: answer }) }) : null,
+        revealed ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "pl-7 pt-2 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-foreground", children: answer }) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -17484,7 +17484,7 @@ var init_BookTableOfContents = __esm({
                       className: cn(
                         "justify-start text-left w-full",
                         direction === "rtl" && "text-right",
-                        isCurrent && "bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400"
+                        isCurrent && "bg-primary/10 text-primary"
                       ),
                       children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "truncate", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", children: String(chapter.title ?? "") }) })
                     },
@@ -18665,7 +18665,7 @@ function CalendarGrid({
         border: true,
         className: cn(
           "cursor-pointer hover:shadow-sm transition-shadow text-xs truncate",
-          color ? color : "bg-blue-500/15 border-blue-500/30 text-blue-600"
+          color ? color : "bg-primary/10 border-primary/30 text-primary"
         ),
         onClick: (e) => handleEventClick(event, e),
         children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "truncate font-medium", children: event.title })
@@ -18763,7 +18763,7 @@ function CalendarGrid({
                       onClick: () => handleSlotClick(day, time),
                       className: cn(
                         "border-l border-border",
-                        isToday && "bg-blue-50/30"
+                        isToday && "bg-primary/10"
                       ),
                       ...longPressEvent ? {
                         onPointerDown: () => startLongPress(day, time),
@@ -20779,31 +20779,31 @@ var init_CodeRunnerPanel = __esm({
             }
           )
         ] }),
-        hasOutput && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "rounded-lg border border-gray-700 bg-[#0d0d0d] overflow-hidden", children: [
+        hasOutput && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "rounded-lg border border-border bg-foreground overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             HStack,
             {
               gap: "sm",
               align: "center",
-              className: "px-3 py-2 bg-gray-800 border-b border-gray-700",
+              className: "px-3 py-2 bg-card border-b border-border",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Terminal, { size: 16, className: "text-gray-400" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-300 font-medium", children: "Output" })
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Terminal, { size: 16, className: "text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: "p-3 font-mono text-sm", children: error ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            output?.stdout ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-200 whitespace-pre-wrap", children: output.stdout }) : null,
-            output?.stderr ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: output.stderr }) : null,
-            !output?.stdout && !output?.stderr ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500 italic", children: "No output" }) : null,
-            output && output.testResults.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-3 pt-3 border-t border-gray-700 space-y-2", children: output.testResults.map((test, index) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "start", className: "text-xs", children: [
-              test.passed ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.CheckCircle, { size: 14, className: "text-green-400 mt-0.5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.XCircle, { size: 14, className: "text-red-400 mt-0.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: "p-3 font-mono text-sm", children: error ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-error whitespace-pre-wrap", children: error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            output?.stdout ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-background whitespace-pre-wrap", children: output.stdout }) : null,
+            output?.stderr ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-error whitespace-pre-wrap", children: output.stderr }) : null,
+            !output?.stdout && !output?.stderr ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-background italic", children: "No output" }) : null,
+            output && output.testResults.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-3 pt-3 border-t border-border space-y-2", children: output.testResults.map((test, index) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "start", className: "text-xs", children: [
+              test.passed ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.CheckCircle, { size: 14, className: "text-success mt-0.5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.XCircle, { size: 14, className: "text-error mt-0.5" }),
               /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "flex-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   Typography,
                   {
                     variant: "small",
-                    className: test.passed ? "text-green-400" : "text-red-400",
+                    className: test.passed ? "text-success" : "text-error",
                     children: [
                       "Test ",
                       index + 1,
@@ -20812,15 +20812,15 @@ var init_CodeRunnerPanel = __esm({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Input: ",
                   test.input
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Expected: ",
                   test.expectedOutput
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Actual: ",
                   test.actualOutput
                 ] })
@@ -21005,14 +21005,14 @@ var init_ConnectionBlock = __esm({
       "div",
       {
         className: cn(
-          "bg-emerald-50 dark:bg-emerald-900/20 border-l-4 border-emerald-500 rounded-r-lg p-5 mb-6",
+          "bg-success/10 border-l-4 border-success rounded-r-lg p-5 mb-6",
           className
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Link2, { className: "text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-1", size: 20 }),
+          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Link2, { className: "text-success flex-shrink-0 mt-1", size: 20 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-emerald-900 dark:text-emerald-100 mb-2", children: "Building On What You Know" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose dark:prose-invert prose-sm max-w-none text-gray-700 dark:text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content }) })
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-success mb-2", children: "Building On What You Know" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose dark:prose-invert prose-sm max-w-none text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { content }) })
           ] })
         ] })
       }
@@ -21099,7 +21099,7 @@ function CounterStandard({
         variant: "h1",
         className: cn(
           sizeStyles8[size].display,
-          "font-bold tabular-nums text-primary-600"
+          "font-bold tabular-nums text-primary"
         ),
         children: resolved.count
       }
@@ -21172,7 +21172,7 @@ function CounterFull({
           variant: "h1",
           className: cn(
             sizeStyles8[size].display,
-            "font-bold tabular-nums text-primary-600"
+            "font-bold tabular-nums text-primary"
           ),
           children: resolved.count
         }
@@ -21419,11 +21419,11 @@ var init_DashboardLayout = __esm({
                       className: "h-16 px-4 border-b border-border dark:border-border",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", children: [
-                          logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                             Typography,
                             {
                               variant: "small",
-                              className: "text-white font-bold text-sm",
+                              className: "text-primary-foreground font-bold text-sm",
                               as: "span",
                               children: appName.charAt(0).toUpperCase()
                             }
@@ -21502,11 +21502,11 @@ var init_DashboardLayout = __esm({
                             className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
-                                logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-7 h-7 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                                   Typography,
                                   {
                                     variant: "small",
-                                    className: "text-white font-bold text-xs",
+                                    className: "text-primary-foreground font-bold text-xs",
                                     as: "span",
                                     children: appName.charAt(0).toUpperCase()
                                   }
@@ -21566,8 +21566,8 @@ var init_DashboardLayout = __esm({
                                   {
                                     as: "span",
                                     className: cn(
-                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-xs font-semibold text-white flex items-center justify-center",
-                                      action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
+                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-xs font-semibold flex items-center justify-center",
+                                      action.variant === "danger" ? "bg-error text-error-foreground" : action.variant === "primary" ? "bg-primary text-primary-foreground" : "bg-foreground text-background"
                                     ),
                                     children: action.badge
                                   }
@@ -21589,7 +21589,7 @@ var init_DashboardLayout = __esm({
                                   Box,
                                   {
                                     as: "span",
-                                    className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-xs font-semibold text-white flex items-center justify-center",
+                                    className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-xs font-semibold text-error-foreground flex items-center justify-center",
                                     children: unreadCount > 99 ? "99+" : unreadCount
                                   }
                                 )
@@ -21872,7 +21872,7 @@ function SubMenu({
             ),
             children: [
               item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
-              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-red-600"), children: item.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-error"), children: item.label }),
               item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs font-medium", children: item.badge })
             ]
           },
@@ -21929,7 +21929,7 @@ function MenuItemRow({
             Typography,
             {
               variant: "small",
-              className: cn("flex-1", isDanger && "text-red-600"),
+              className: cn("flex-1", isDanger && "text-error"),
               children: item.label
             }
           ),
@@ -22697,20 +22697,24 @@ function DataGrid({
   const bodyFields = fieldDefs.filter((f3) => f3 !== titleField && !badgeFields.includes(f3));
   const primaryActions = actionDefs.filter((a) => a.variant !== "danger");
   const dangerActions = actionDefs.filter((a) => a.variant === "danger");
-  const handleActionClick = (action, itemData) => (e) => {
-    e.stopPropagation();
-    const payload = {
-      id: itemData.id,
-      row: itemData
-    };
-    eventBus.emit(`UI:${action.event}`, payload);
+  const fireAction = (action, itemData) => {
     if (action.navigatesTo) {
       const url = action.navigatesTo.replace(
         /\{\{row\.(\w+(?:\.\w+)*)\}\}/g,
         (_, field) => String(itemData[field] ?? "")
       );
-      eventBus.emit("UI:NAVIGATE", { url });
+      eventBus.emit("UI:NAVIGATE", { url, row: itemData });
+      return;
     }
+    const payload = {
+      id: itemData.id,
+      row: itemData
+    };
+    eventBus.emit(`UI:${action.event}`, payload);
+  };
+  const handleActionClick = (action, itemData) => (e) => {
+    e.stopPropagation();
+    fireAction(action, itemData);
   };
   const hasRenderProp = typeof children === "function";
   React82.useEffect(() => {
@@ -22812,10 +22816,7 @@ function DataGrid({
                               label: action.label,
                               icon: action.icon,
                               event: action.event,
-                              onClick: () => eventBus.emit(`UI:${action.event}`, {
-                                id: itemData.id,
-                                row: itemData
-                              })
+                              onClick: () => fireAction(action, itemData)
                             }))
                           }
                         )
@@ -22868,13 +22869,13 @@ function DataGrid({
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
-                        titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                        titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center min-w-0", children: [
                           titleField?.icon && renderIconInput(titleField.icon, { size: "sm", className: "text-primary flex-shrink-0" }),
                           /* @__PURE__ */ jsxRuntime.jsx(
                             Typography,
                             {
                               variant: titleField?.variant === "h3" ? "h3" : "h4",
-                              className: "font-semibold truncate",
+                              className: "font-semibold truncate min-w-0",
                               children: String(titleValue)
                             }
                           )
@@ -22932,7 +22933,7 @@ function DataGrid({
                         )
                       ] }, field.name);
                     }) }) }),
-                    primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-end", children: [
+                    primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-end flex-wrap", children: [
                       (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                         Button,
                         {
@@ -22957,10 +22958,7 @@ function DataGrid({
                             label: action.label,
                             icon: action.icon,
                             event: action.event,
-                            onClick: () => eventBus.emit(`UI:${action.event}`, {
-                              id: itemData.id,
-                              row: itemData
-                            })
+                            onClick: () => fireAction(action, itemData)
                           }))
                         }
                       )
@@ -24823,8 +24821,8 @@ var init_RelationSelect = __esm({
             disabled,
             className: cn(
               "w-full justify-between font-normal",
-              error && "border-red-300 focus:border-red-500 focus:ring-red-500",
-              isOpen && "ring-2 ring-primary-500 border-primary-500"
+              error && "border-error/50 focus:border-error focus:ring-error",
+              isOpen && "ring-2 ring-primary border-primary"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -24904,7 +24902,7 @@ var init_RelationSelect = __esm({
                   paddingY: "sm",
                   className: cn(
                     "text-left text-sm hover:bg-muted focus:outline-none focus:bg-muted",
-                    option.value === value && "bg-primary-50 text-primary-700",
+                    option.value === value && "bg-primary/10 text-primary",
                     option.disabled && "opacity-50 cursor-not-allowed"
                   ),
                   onClick: () => handleSelect(option),
@@ -25061,7 +25059,7 @@ var init_SidePanel = __esm({
         showOverlay && /* @__PURE__ */ jsxRuntime.jsx(Presence, { show: isOpen, animation: "overlay", children: /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
-            className: "fixed inset-0 bg-white/80 backdrop-blur-sm z-40 lg:hidden",
+            className: "fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden",
             onClick: handleClose
           }
         ) }),
@@ -25428,7 +25426,7 @@ var init_WizardNavigation = __esm({
               /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", size: "sm" }),
               resolvedBackLabel
             ] }) : /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", gap: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-neutral-500", children: t("wizard.stepOf", { current: String(currentStep + 1), total: String(totalSteps) }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", gap: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("wizard.stepOf", { current: String(currentStep + 1), total: String(totalSteps) }) }) }),
             isLastStep && showComplete ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleComplete, disabled: !isValid, children: resolvedCompleteLabel }) : showNext ? /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", onClick: handleNext, disabled: !isValid, children: [
               resolvedNextLabel,
               /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "sm" })
@@ -27585,6 +27583,7 @@ var init_Lightbox = __esm({
         {
           className: cn(
             "fixed inset-0 z-50 flex items-center justify-center",
+            // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: lightbox scrim behind images
             "bg-black bg-opacity-90",
             className
           ),
@@ -27607,7 +27606,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-white"
+                  "focus:outline-none focus:ring-2 focus:ring-ring"
                 ),
                 "aria-label": t("aria.closeModal"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", className: "w-6 h-6" })
@@ -27626,7 +27625,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-white"
+                  "focus:outline-none focus:ring-2 focus:ring-ring"
                 ),
                 "aria-label": t("aria.previousImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", className: "w-8 h-8" })
@@ -27663,7 +27662,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-white"
+                  "focus:outline-none focus:ring-2 focus:ring-ring"
                 ),
                 "aria-label": t("aria.nextImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", className: "w-8 h-8" })
@@ -27883,7 +27882,7 @@ function TableView({
             col.key
           );
         }),
-        hasActions && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true, className: "sticky right-0 bg-[var(--color-surface-subtle)]" })
       ]
     }
   );
@@ -27927,41 +27926,54 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
-            (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-              Button,
-              {
-                variant: action.variant ?? "ghost",
-                size: "sm",
-                onClick: handleActionClick(action, row),
-                "data-testid": `action-${action.event}`,
-                "data-row-id": String(row.id),
-                className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
-                children: [
-                  action.icon && renderIconInput3(action.icon, { size: "xs", className: "mr-1" }),
-                  action.label
-                ]
-              },
-              i
-            )),
-            maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
-              Menu,
-              {
-                position: "bottom-end",
-                trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                items: itemActions.slice(maxInlineActions).map((action) => ({
-                  label: action.label,
-                  icon: action.icon,
-                  event: action.event,
-                  variant: action.variant === "danger" ? "danger" : "default",
-                  onClick: () => eventBus.emit(`UI:${action.event}`, {
-                    id: row.id,
-                    row
-                  })
-                }))
-              }
-            )
-          ] })
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            HStack,
+            {
+              gap: "xs",
+              className: cn(
+                // Pinned: the fixed column tracks routinely overflow the caller's
+                // scroll container, which used to leave the actions off-screen.
+                // Opaque so scrolled cells pass underneath it.
+                "justify-end flex-shrink-0 sticky right-0 z-[1] transition-colors",
+                lk.striped && index % 2 === 1 ? "bg-[var(--color-surface-subtle)]" : "bg-[var(--color-card)] group-hover:bg-[var(--color-surface-subtle)]"
+              ),
+              children: [
+                (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  Button,
+                  {
+                    variant: action.variant ?? "ghost",
+                    size: "sm",
+                    onClick: handleActionClick(action, row),
+                    "data-testid": `action-${action.event}`,
+                    "data-row-id": String(row.id),
+                    className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+                    children: [
+                      action.icon && renderIconInput3(action.icon, { size: "xs", className: "mr-1" }),
+                      action.label
+                    ]
+                  },
+                  i
+                )),
+                maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                  Menu,
+                  {
+                    position: "bottom-end",
+                    trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                    items: itemActions.slice(maxInlineActions).map((action) => ({
+                      label: action.label,
+                      icon: action.icon,
+                      event: action.event,
+                      variant: action.variant === "danger" ? "danger" : "default",
+                      onClick: () => eventBus.emit(`UI:${action.event}`, {
+                        id: row.id,
+                        row
+                      })
+                    }))
+                  }
+                )
+              ]
+            }
+          )
         ]
       }
     );
@@ -30598,6 +30610,7 @@ var init_QrScanner = __esm({
           overflow: "hidden",
           rounded: "sm",
           className: cn(
+            // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
             "bg-black",
             "aspect-square w-full max-w-md",
             className
@@ -30662,7 +30675,9 @@ var init_QrScanner = __esm({
                       type: "button",
                       onClick: togglePause,
                       className: cn(
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
                       ),
                       "aria-label": isPaused ? t("qrScanner.resumeScanning") : t("qrScanner.pauseScanning"),
@@ -30675,7 +30690,9 @@ var init_QrScanner = __esm({
                       type: "button",
                       onClick: toggleFacing,
                       className: cn(
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
                       ),
                       "aria-label": currentFacing === "environment" ? t("qrScanner.switchToFrontCamera") : t("qrScanner.switchToRearCamera"),
@@ -30688,7 +30705,9 @@ var init_QrScanner = __esm({
                       type: "button",
                       onClick: handleMockScan,
                       className: cn(
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 px-3 py-2 text-xs text-white",
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
                       ),
                       "aria-label": t("aria.mockScanDev"),
@@ -33424,10 +33443,10 @@ var init_ModuleCard = __esm({
     init_avl_atom_types();
     init_MiniStateMachine();
     PERSISTENCE_BORDER = {
-      persistent: "border-l-[3px] border-l-blue-500 border-solid",
-      runtime: "border-l-[3px] border-l-blue-500 border-dashed",
-      singleton: "border-l-[3px] border-l-blue-500 border-double",
-      instance: "border-l-[3px] border-l-blue-500 border-dotted"
+      persistent: "border-l-[3px] border-l-primary border-solid",
+      runtime: "border-l-[3px] border-l-primary border-dashed",
+      singleton: "border-l-[3px] border-l-primary border-double",
+      instance: "border-l-[3px] border-l-primary border-dotted"
     };
     PERSISTENCE_ICON = {
       persistent: "\u26C1",
@@ -33457,8 +33476,8 @@ var init_ModuleCard = __esm({
           className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden",
           style: { minWidth: 280, maxWidth: 400 },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Left, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Right, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Left, className: "!w-2.5 !h-2.5 !bg-warning" }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Right, className: "!w-2.5 !h-2.5 !bg-warning" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold text-[var(--color-foreground)]", children: orbitalName }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `px-3 py-2 border-b border-[var(--color-border)] ${PERSISTENCE_BORDER[persistence] ?? ""}`, children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
@@ -35914,19 +35933,19 @@ var init_ReflectionBlock = __esm({
         "div",
         {
           className: cn(
-            "my-6 border-l-4 border-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-r-lg p-4",
+            "my-6 border-l-4 border-warning bg-warning/10 rounded-r-lg p-4",
             className
           ),
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.PauseCircle, { className: "text-amber-600 dark:text-amber-400 flex-shrink-0 mt-1", size: 20 }),
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.PauseCircle, { className: "text-warning flex-shrink-0 mt-1", size: 20 }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-amber-900 dark:text-amber-100 mb-2", children: "Pause & Reflect" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-700 dark:text-gray-300 text-sm mb-3", children: prompt }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-warning mb-2", children: "Pause & Reflect" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-sm mb-3", children: prompt }),
               isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "textarea",
                   {
-                    className: "w-full p-2 border border-amber-300 dark:border-amber-700 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-amber-500 focus:border-transparent",
+                    className: "w-full p-2 border border-input rounded text-sm bg-card text-foreground focus:ring-2 focus:ring-ring focus:border-transparent",
                     placeholder: "Your thoughts...",
                     value: note,
                     onChange: (e) => setNote(e.target.value),
@@ -35937,7 +35956,7 @@ var init_ReflectionBlock = __esm({
                   "button",
                   {
                     onClick: handleSave,
-                    className: "mt-2 text-sm px-3 py-1 bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors",
+                    className: "mt-2 text-sm px-3 py-1 bg-warning text-warning-foreground rounded hover:opacity-90 transition-colors",
                     children: "Save & Continue"
                   }
                 )
@@ -35945,7 +35964,7 @@ var init_ReflectionBlock = __esm({
                 "button",
                 {
                   onClick: () => setIsExpanded(true),
-                  className: "text-sm text-amber-600 dark:text-amber-400 hover:underline",
+                  className: "text-sm text-warning hover:underline",
                   children: savedNote ? "\u2713 Answered \xB7 Edit" : "Answer this question"
                 }
               )
@@ -36231,7 +36250,7 @@ function DataTable({
             )),
             rowActions && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "w-12 px-4 py-3" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-700", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-border", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
               colSpan: normalizedColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0),
@@ -36551,6 +36570,16 @@ function normalizeFieldDefs(fields) {
     return String(f3);
   });
 }
+function buildFieldLabelMap(fields) {
+  const map = {};
+  if (!fields) return map;
+  for (const f3 of fields) {
+    if (typeof f3 === "object" && "key" in f3 && f3.header !== void 0 && f3.header !== "") {
+      map[f3.key] = f3.header;
+    }
+  }
+  return map;
+}
 function buildFieldTypeMap(fields) {
   const map = {};
   if (!fields) return map;
@@ -36602,7 +36631,9 @@ var init_DetailPanel = __esm({
       };
       const effectiveFieldNames = isFieldDefArray(propFields) ? normalizeFieldDefs(propFields) : fieldNames;
       const fieldTypeMap = isFieldDefArray(propFields) ? buildFieldTypeMap(propFields) : {};
-      React82.useCallback(
+      const fieldLabelMap = isFieldDefArray(propFields) ? buildFieldLabelMap(propFields) : {};
+      const labelFor = (field) => fieldLabelMap[field] ?? formatFieldLabel(field);
+      const handleActionClick = React82.useCallback(
         (action, data2) => {
           if (action.navigatesTo) {
             const url = action.navigatesTo.replace(
@@ -36637,7 +36668,7 @@ var init_DetailPanel = __esm({
             if (typeof field === "string") {
               const value = getNestedValue(normalizedData, field);
               return {
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: formatFieldValue(value, field),
                 icon: getFieldIcon(field)
               };
@@ -36648,7 +36679,10 @@ var init_DetailPanel = __esm({
       }
       if (normalizedData && effectiveFieldNames) {
         const primaryField = effectiveFieldNames[0];
-        if (!title && primaryField && normalizedData[primaryField]) {
+        const titleDerivedFromPrimary = Boolean(
+          !title && primaryField && normalizedData[primaryField]
+        );
+        if (titleDerivedFromPrimary) {
           title = String(normalizedData[primaryField]);
         }
         const statusFields = effectiveFieldNames.filter(
@@ -36667,16 +36701,16 @@ var init_DetailPanel = __esm({
           (f3) => f3.toLowerCase().includes("description") || f3.toLowerCase().includes("note")
         );
         const otherFields = effectiveFieldNames.filter(
-          (f3) => f3 !== primaryField && !statusFields.includes(f3) && !progressFields.includes(f3) && !metricFields.includes(f3) && !dateFields.includes(f3) && !descriptionFields.includes(f3)
+          (f3) => (!titleDerivedFromPrimary || f3 !== primaryField) && !statusFields.includes(f3) && !progressFields.includes(f3) && !metricFields.includes(f3) && !dateFields.includes(f3) && !descriptionFields.includes(f3)
         );
         sections = [];
         if (statusFields.length > 0 || otherFields.length > 0) {
           const overviewFields = [];
-          [...statusFields, ...otherFields.slice(0, 3)].forEach((field) => {
+          [...statusFields, ...otherFields].forEach((field) => {
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               overviewFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -36692,7 +36726,7 @@ var init_DetailPanel = __esm({
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               metricsFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -36708,7 +36742,7 @@ var init_DetailPanel = __esm({
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               timelineFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -36724,7 +36758,7 @@ var init_DetailPanel = __esm({
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               descFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -36772,7 +36806,7 @@ var init_DetailPanel = __esm({
             if (typeof field === "string") {
               const value = normalizedData ? getNestedValue(normalizedData, field) : void 0;
               allFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -36794,8 +36828,9 @@ var init_DetailPanel = __esm({
             {
               variant: action.variant || "secondary",
               size: "sm",
-              action: action.event,
+              action: action.navigatesTo ? void 0 : action.event,
               actionPayload: { row: normalizedData },
+              onClick: action.navigatesTo ? () => handleActionClick(action, normalizedData) : void 0,
               icon: action.icon,
               "data-testid": action.event ? `action-${action.event}` : void 0,
               "data-row-id": normalizedData?.id !== void 0 ? String(normalizedData.id) : void 0,
@@ -38838,8 +38873,9 @@ var init_MediaGallery = __esm({
                           )
                         }
                       ),
-                      item.caption && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-white truncate", children: item.caption }) }),
-                      selectable && isSelected && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-white text-xs", children: "\u2713" }) })
+                      item.caption && // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: caption scrim over image
+                      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-white truncate", children: item.caption }) }),
+                      selectable && isSelected && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-primary-foreground text-xs", children: "\u2713" }) })
                     ]
                   },
                   item.id
@@ -38868,7 +38904,7 @@ var init_MediaGallery = __esm({
                       size: "sm",
                       icon: LucideIcons2.X,
                       action: "LIGHTBOX_CLOSE",
-                      className: "text-white hover:bg-white/20"
+                      className: "text-foreground hover:bg-muted/50"
                     }
                   ) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -38879,7 +38915,7 @@ var init_MediaGallery = __esm({
                       className: "max-w-full max-h-[80vh] object-contain rounded-md"
                     }
                   ),
-                  lightboxItem.caption && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-white mt-3 text-center", children: lightboxItem.caption })
+                  lightboxItem.caption && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-foreground mt-3 text-center", children: lightboxItem.caption })
                 ]
               }
             )
@@ -39340,7 +39376,7 @@ function WalkMinimap() {
         {
           variant,
           size: "sm",
-          className: `flex-shrink-0 text-[9px] ${isActive ? "ring-1 ring-cyan-400" : ""}`,
+          className: `flex-shrink-0 text-[9px] ${isActive ? "ring-1 ring-info" : ""}`,
           children: [
             isDone ? "\u2713" : isActive ? "\u25CF" : "\u25CB",
             " ",
@@ -39481,13 +39517,13 @@ function WalkMinimap() {
       })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-2 py-1 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-green-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-success", children: [
         "Engine: ",
         engineCount,
         "/",
         totalTransitions
       ] }),
-      domCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-cyan-500", children: [
+      domCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-info", children: [
         "DOM: ",
         domCount
       ] }),
@@ -39520,13 +39556,13 @@ function TraitsTab({ traits: traits2 }) {
   const accordionItems = traits2.map((trait) => ({
     id: trait.id,
     header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-purple-600 dark:text-purple-400", children: trait.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-primary", children: trait.name }),
       /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", size: "sm", children: trait.currentState }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: t("debug.transitionsCount", { count: trait.transitionCount }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: t("debug.transitionsCount", { count: trait.transitionCount }) })
     ] }),
     content: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.states") }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.states") }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: trait.states.map((state) => /* @__PURE__ */ jsxRuntime.jsx(
           Badge,
           {
@@ -39538,18 +39574,18 @@ function TraitsTab({ traits: traits2 }) {
         )) })
       ] }),
       trait.transitions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.transitions") }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.transitions") }),
         /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: trait.transitions.map((t2, i) => /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "font-mono", children: [
           t2.from,
           " \u2192 ",
           t2.to,
           " ",
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-500", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
             "(",
             t2.event,
             ")"
           ] }),
-          t2.guard && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-amber-500", children: [
+          t2.guard && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-warning", children: [
             " [",
             t2.guard,
             "]"
@@ -39557,7 +39593,7 @@ function TraitsTab({ traits: traits2 }) {
         ] }, i)) })
       ] }),
       trait.guards.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.guards") }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.guards") }),
         /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: trait.guards.map((g, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: g.name }),
           /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: g.lastResult === true ? "success" : g.lastResult === false ? "danger" : "default", size: "sm", children: g.lastResult === void 0 ? "?" : g.lastResult ? "\u2713" : "\u2717" })
@@ -39600,11 +39636,11 @@ function TicksTab({ ticks: ticks2 }) {
   };
   const TickCard = ({ tick, active }) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: `p-3 ${!active ? "opacity-50" : ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `w-2 h-2 rounded-full ${active ? "bg-green-500" : "bg-gray-400"}` }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: tick.name }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500", children: tick.traitName })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `w-2 h-2 rounded-full ${active ? "bg-success" : "bg-muted-foreground"}` }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-warning", children: tick.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: tick.traitName })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 text-xs text-gray-500", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         tick.interval,
         "ms"
@@ -39627,7 +39663,7 @@ function TicksTab({ ticks: ticks2 }) {
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tab debug-tab--ticks", children: [
     activeTicks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: [
         "Active (",
         activeTicks.length,
         ")"
@@ -39635,7 +39671,7 @@ function TicksTab({ ticks: ticks2 }) {
       /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "sm", children: activeTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(TickCard, { tick, active: true }, tick.id)) })
     ] }),
     inactiveTicks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-400 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: [
         "Inactive (",
         inactiveTicks.length,
         ")"
@@ -39683,33 +39719,33 @@ function EntitiesTab({ snapshot }) {
     id: `singleton-${name}`,
     header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "sm", children: t("debug.singleton") }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: name })
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-info", children: name })
     ] }),
-    content: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40", children: JSON.stringify(data, null, 2) })
+    content: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground bg-muted p-2 rounded overflow-auto max-h-40", children: JSON.stringify(data, null, 2) })
   }));
   const runtimeItems = runtimeEntities.slice(0, 20).map((entity) => ({
     id: entity.id,
     header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: entity.type }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-gray-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-info", children: entity.type }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground", children: [
         "#",
         entity.id.slice(0, 8)
       ] })
     ] }),
-    content: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40", children: JSON.stringify(entity.data, null, 2) })
+    content: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-muted-foreground bg-muted p-2 rounded overflow-auto max-h-40", children: JSON.stringify(entity.data, null, 2) })
   }));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tab debug-tab--entities", children: [
     singletonItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.singletonsCount", { count: singletonItems.length }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.singletonsCount", { count: singletonItems.length }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Accordion, { items: singletonItems, multiple: true })
     ] }),
     runtimeItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.runtimeCount", { count: runtimeEntities.length }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.runtimeCount", { count: runtimeEntities.length }) }),
       /* @__PURE__ */ jsxRuntime.jsx(Accordion, { items: runtimeItems, multiple: true }),
-      runtimeEntities.length > 20 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-400 text-center mt-2", children: t("debug.moreEntities", { count: runtimeEntities.length - 20 }) })
+      runtimeEntities.length > 20 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground text-center mt-2", children: t("debug.moreEntities", { count: runtimeEntities.length - 20 }) })
     ] }),
     persistentEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.persistent") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.persistent") }),
       /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: persistentEntries.map(([type, info]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: type }),
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: info.loaded ? "success" : "default", size: "sm", children: info.loaded ? t("debug.loadedCount", { count: info.count }) : t("debug.notLoaded") })
@@ -39794,7 +39830,7 @@ function EventFlowTab({ events: events2 }) {
           );
         })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 ml-auto cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground ml-auto cursor-pointer", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
@@ -39809,18 +39845,18 @@ function EventFlowTab({ events: events2 }) {
       "div",
       {
         ref: containerRef,
-        className: "max-h-64 overflow-y-auto space-y-1 bg-gray-50 dark:bg-gray-800 rounded p-2",
+        className: "max-h-64 overflow-y-auto space-y-1 bg-muted rounded p-2",
         children: filteredEvents.slice(-100).map((event) => {
           const { variant, icon } = TYPE_BADGES[event.type] || { variant: "default", icon: "\u2022" };
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "flex items-start gap-2 text-xs py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded px-1",
+              className: "flex items-start gap-2 text-xs py-1 hover:bg-muted/50 rounded px-1",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime2(event.timestamp) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono min-w-[65px]", children: formatTime2(event.timestamp) }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: icon }),
                 /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, size: "sm", className: "min-w-[60px] justify-center", children: event.source }),
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-600 dark:text-gray-400", children: event.message })
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: event.message })
               ]
             },
             event.id
@@ -39884,21 +39920,21 @@ function GuardsPanel({ guards }) {
     id: guard.id,
     header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: guard.result ? "success" : "danger", size: "sm", children: guard.result ? "\u2713" : "\u2717" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: guard.guardName }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500", children: guard.context.type === "transition" ? `${guard.context.transitionFrom} \u2192 ${guard.context.transitionTo}` : guard.context.tickName }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: formatTime2(guard.timestamp) })
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", weight: "semibold", className: "text-warning", children: guard.guardName }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: guard.context.type === "transition" ? `${guard.context.transitionFrom} \u2192 ${guard.context.transitionTo}` : guard.context.tickName }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: formatTime2(guard.timestamp) })
     ] }),
     content: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.expression") }),
-        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block mt-1 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded", children: guard.expression })
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.expression") }),
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block mt-1 text-xs text-warning bg-warning/10 px-2 py-1 rounded", children: guard.expression })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.inputs") }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-24", children: JSON.stringify(guard.inputs, null, 2) })
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.inputs") }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 text-xs text-muted-foreground bg-muted p-2 rounded overflow-auto max-h-24", children: JSON.stringify(guard.inputs, null, 2) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.trait") }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.trait") }),
         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: guard.context.traitName })
       ] })
     ] })
@@ -39954,7 +39990,7 @@ function VerificationTab({ checks, summary }) {
     (a, b) => (sortOrder[a.status] ?? 4) - (sortOrder[b.status] ?? 4)
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tab debug-tab--verification", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3 p-2 bg-gray-50 dark:bg-gray-800 rounded", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3 p-2 bg-muted rounded", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "success", size: "sm", children: [
         summary.passed,
         " passed"
@@ -39971,7 +40007,7 @@ function VerificationTab({ checks, summary }) {
         summary.pending,
         " pending"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: [
         summary.totalChecks,
         " total checks"
       ] })
@@ -39981,12 +40017,12 @@ function VerificationTab({ checks, summary }) {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex items-start gap-2 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800",
+          className: "flex items-start gap-2 p-2 rounded hover:bg-muted/50",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: config.variant, size: "sm", className: "min-w-[20px] justify-center mt-0.5", children: config.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "break-words", children: check.label }),
-              check.details && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500 break-words", children: check.details })
+              check.details && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground break-words", children: check.details })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono text-xs shrink-0", children: new Date(check.updatedAt).toLocaleTimeString("en-US", {
               hour12: false,
@@ -40021,10 +40057,10 @@ var init_VerificationTab = __esm({
 function EffectBadge({ effect }) {
   const variant = EFFECT_STATUS_VARIANT[effect.status] || "default";
   const icon = effect.status === "executed" ? "\u2713" : effect.status === "failed" ? "\u2717" : "-";
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-mono bg-gray-100 dark:bg-gray-700 rounded px-1.5 py-0.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-mono bg-muted rounded px-1.5 py-0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, size: "sm", className: "!text-[9px] !px-1 !py-0", children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: effect.type }),
-    effect.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 truncate max-w-[120px]", title: effect.error, children: effect.error })
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: effect.type }),
+    effect.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error truncate max-w-[120px]", title: effect.error, children: effect.error })
   ] });
 }
 function TransitionTimeline({ transitions }) {
@@ -40059,8 +40095,8 @@ function TransitionTimeline({ transitions }) {
   const sorted = [...transitions].reverse();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tab debug-tab--timeline", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500", children: t("debug.transitionsRecorded", { count: transitions.length }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: t("debug.transitionsRecorded", { count: transitions.length }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground cursor-pointer", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
@@ -40085,22 +40121,22 @@ function TransitionTimeline({ transitions }) {
             {
               className: `
                                 relative pl-6 pb-3 border-l-2 cursor-pointer
-                                hover:bg-gray-50 dark:hover:bg-gray-800 rounded-r
-                                ${hasFailedEffects ? "border-red-300 dark:border-red-700" : "border-gray-200 dark:border-gray-700"}
+                                hover:bg-muted/50 rounded-r
+                                ${hasFailedEffects ? "border-error" : "border-border"}
                             `,
               onClick: () => setExpandedId(isExpanded ? null : trace.id),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: `
                                 absolute left-[-5px] top-1 w-2 h-2 rounded-full
-                                ${hasFailedEffects ? "bg-red-500" : allPassed ? "bg-green-500" : "bg-gray-400"}
+                                ${hasFailedEffects ? "bg-error" : allPassed ? "bg-success" : "bg-muted-foreground"}
                             ` }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs py-1 px-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime2(trace.timestamp) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono min-w-[65px]", children: formatTime2(trace.timestamp) }),
                   /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "primary", size: "sm", className: "min-w-[60px] justify-center", children: trace.traitName }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "font-mono text-gray-600 dark:text-gray-400", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "font-mono text-muted-foreground", children: [
                     trace.from,
                     " ",
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "\u2192" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "\u2192" }),
                     " ",
                     trace.to
                   ] }),
@@ -40117,9 +40153,9 @@ function TransitionTimeline({ transitions }) {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: t("debug.effectsCount", { count: trace.effects.length }) })
+                  /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: t("debug.effectsCount", { count: trace.effects.length }) })
                 ] }),
-                isExpanded && trace.effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2 mt-1 mb-2 pl-2 border-l border-gray-200 dark:border-gray-700 space-y-1", children: trace.effects.map((effect, eIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                isExpanded && trace.effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2 mt-1 mb-2 pl-2 border-l border-border space-y-1", children: trace.effects.map((effect, eIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(EffectBadge, { effect }),
                   effect.args.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono text-xs truncate max-w-[200px]", children: JSON.stringify(effect.args) }),
                   effect.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
@@ -40153,8 +40189,8 @@ var init_TransitionTimeline = __esm({
   }
 });
 function StatRow({ label, value, variant }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1.5 border-b border-gray-100 dark:border-gray-800 last:border-b-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500", children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1.5 border-b border-border last:border-b-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: label }),
     variant ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, size: "sm", children: String(value) }) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "semibold", className: "font-mono", children: String(value) })
   ] });
 }
@@ -40183,7 +40219,7 @@ function ServerBridgeTab({ bridge }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "debug-tab debug-tab--bridge", children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-3 h-3 rounded-full ${bridge.connected ? "bg-green-500 animate-pulse" : "bg-red-500"}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-3 h-3 rounded-full ${bridge.connected ? "bg-success animate-pulse" : "bg-error"}` }),
         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", children: bridge.connected ? t("debug.connected") : t("debug.disconnected") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "xs", children: [
@@ -40218,11 +40254,11 @@ function ServerBridgeTab({ bridge }) {
         )
       ] })
     ] }),
-    bridge.lastError && /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "semibold", className: "text-red-600 dark:text-red-400 mb-1", children: t("debug.lastError") }),
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-red-500 font-mono break-all", children: bridge.lastError })
+    bridge.lastError && /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "p-3 border-error/30 bg-error/10", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "semibold", className: "text-error mb-1", children: t("debug.lastError") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-error font-mono break-all", children: bridge.lastError })
     ] }),
-    bridge.connected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-400", children: t("debug.totalEventsProcessed", { count: bridge.eventsForwarded + bridge.eventsReceived }) }) })
+    bridge.connected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: t("debug.totalEventsProcessed", { count: bridge.eventsForwarded + bridge.eventsReceived }) }) })
   ] }) });
 }
 var init_ServerBridgeTab = __esm({
@@ -40348,7 +40384,7 @@ function EventDispatcherTab({ traits: traits2, schema }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "debug-tab debug-tab--dispatch", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.activeStates") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.activeStates") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: traits2.map((trait) => /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "success", size: "sm", children: [
         trait.name,
         ": ",
@@ -40356,8 +40392,8 @@ function EventDispatcherTab({ traits: traits2, schema }) {
       ] }, trait.id)) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.availableEvents") }),
-      availableEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-400 italic", children: t("debug.noTransitionsFromState") }) : /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: availableEvents.map(({ event, transitions }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.availableEvents") }),
+      availableEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground italic", children: t("debug.noTransitionsFromState") }) : /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: availableEvents.map(({ event, transitions }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
@@ -40368,22 +40404,22 @@ function EventDispatcherTab({ traits: traits2, schema }) {
             children: event
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500", children: transitions.map((t2) => `${t2.from} -> ${t2.to}`).join(", ") }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-muted-foreground", children: transitions.map((t2) => `${t2.from} -> ${t2.to}`).join(", ") }),
         transitions.some((tr) => tr.guard) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warning", size: "sm", children: t("debug.guarded") })
       ] }, event)) })
     ] }),
     unavailableEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.otherEvents") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.otherEvents") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
     ] }),
     log9.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.recentTransitions") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.recentTransitions") }),
       /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: "xs", children: log9.map((entry, i) => /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-400", children: entry.traitName }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: entry.traitName }),
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: entry.from }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: entry.from }),
         " -> ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-400", children: entry.to })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-success", children: entry.to })
       ] }, i)) })
     ] })
   ] });
@@ -40409,21 +40445,21 @@ var init_RuntimeDebugger = __esm({
 function ServerResponseRow({ sr }) {
   const { t } = hooks.useTranslate();
   const entityEntries = Object.entries(sr.dataEntities);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-xs font-mono", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 pl-2 border-l border-primary py-0.5 text-xs font-mono", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: sr.success ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: sr.success ? "text-success" : "text-error", children: [
         sr.success ? "\u2713" : "\u2717",
         " ",
         t("debug.server")
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-300", children: sr.orbitalName }),
-      sr.clientEffects > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 rounded bg-purple-500/15 text-purple-600 dark:text-purple-300", children: t("debug.clientEffectsCount", { count: sr.clientEffects }) }),
-      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-blue-500/15 text-blue-300", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: sr.orbitalName }),
+      sr.clientEffects > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 rounded bg-primary/10 text-primary", children: t("debug.clientEffectsCount", { count: sr.clientEffects }) }),
+      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-primary/10 text-primary", children: [
         t("debug.emitLabel"),
         " ",
         sr.emittedEvents.join(", ")
       ] }),
-      sr.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 rounded bg-red-500/15 text-red-600 dark:text-red-400 truncate max-w-[300px]", children: sr.error })
+      sr.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 rounded bg-error/10 text-error truncate max-w-[300px]", children: sr.error })
     ] }),
     entityEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-[var(--color-card)] text-foreground", children: [
       name,
@@ -40439,9 +40475,9 @@ function TransitionRow({ trace }) {
   if (isServerEntry && trace.serverResponse) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-0.5 border-b border-border last:border-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-purple-500" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-primary" }),
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warning", size: "sm", className: "flex-shrink-0", children: trace.event }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-400 flex-shrink-0", children: t("debug.serverResponse") })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary flex-shrink-0", children: t("debug.serverResponse") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ServerResponseRow, { sr: trace.serverResponse })
     ] });
@@ -40450,7 +40486,7 @@ function TransitionRow({ trace }) {
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
         "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0",
-        hasFailedEffects ? "bg-red-500" : "bg-green-500"
+        hasFailedEffects ? "bg-error" : "bg-success"
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "info", size: "sm", className: "flex-shrink-0", children: trace.event }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground flex-shrink-0", children: trace.traitName }),
@@ -40464,7 +40500,7 @@ function TransitionRow({ trace }) {
     ] }),
     trace.effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 ml-6 mt-0.5", children: trace.effects.map((eff, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
       "px-1 rounded text-xs",
-      eff.status === "executed" ? "bg-green-500/15 text-green-600 dark:text-green-400" : eff.status === "failed" ? "bg-red-500/15 text-red-600 dark:text-red-400" : "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400"
+      eff.status === "executed" ? "bg-success/10 text-success" : eff.status === "failed" ? "bg-error/10 text-error" : "bg-warning/10 text-warning"
     ), children: [
       eff.status === "executed" ? "\u2713" : eff.status === "failed" ? "\u2717" : "-",
       " ",
@@ -40498,7 +40534,7 @@ function VerifyModePanel({
     {
       className: cn(
         "runtime-debugger runtime-debugger--verify",
-        "flex flex-col bg-[var(--color-card)] text-[var(--color-foreground)] border-t-2 border-cyan-500",
+        "flex flex-col bg-[var(--color-card)] text-[var(--color-foreground)] border-t-2 border-accent",
         hudBottom ? "" : "fixed bottom-0 left-0 right-0",
         className
       ),
@@ -40519,8 +40555,8 @@ function VerifyModePanel({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground/50 w-3", "aria-hidden": true, children: expanded ? "\u25BE" : "\u25B8" }),
               /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? t("debug.failCount", { count: failedChecks }) : t("debug.ok") }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground/70", children: t("debug.localCount", { count: localCount }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-400", children: t("debug.serverCount", { count: serverCount }) }),
-              traitStates && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-cyan-600 dark:text-cyan-400 truncate max-w-[400px]", children: traitStates }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: t("debug.serverCount", { count: serverCount }) }),
+              traitStates && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent truncate max-w-[400px]", children: traitStates }),
               !expanded && transitions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-foreground/50", children: t("debug.transitionsCount", { count: transitions.length }) })
             ]
           }
@@ -40715,7 +40751,7 @@ function RuntimeDebugger({
           title: t("debug.openDebugger"),
           children: failedChecks > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "V" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-2 w-2 h-2 bg-red-500 rounded-full" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-2 w-2 h-2 bg-error rounded-full" })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "V" })
         }
       ) : /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "runtime-debugger__panel", children: [
@@ -40803,7 +40839,7 @@ var init_SegmentRenderer = __esm({
         "div",
         {
           className: cn(
-            "border border-gray-200 dark:border-gray-700 rounded-lg p-2 md:p-4 overflow-x-auto space-y-6",
+            "border border-border rounded-lg p-2 md:p-4 overflow-x-auto space-y-6",
             containerClassName,
             className
           ),
@@ -45348,7 +45384,11 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         crossTraitLog.debug("listen:subscribed", { busKey, targetTrait: binding.trait.name, sourceOrbital, sourceTrait, listenEvent: listen.event, triggers: listen.triggers });
         const unsub = eventBus.on(busKey, (event) => {
           crossTraitLog.debug("listen:fired", { busKey, targetTrait: binding.trait.name, triggers: listen.triggers });
-          enqueueAndDrain(listen.triggers, event.payload, binding.trait.name);
+          enqueueAndDrain(
+            listen.triggers,
+            core.applyListenPayloadMapping(listen.payloadMapping, event.payload),
+            binding.trait.name
+          );
         });
         unsubscribes.push(() => {
           crossTraitLog.debug("listen:unsubscribe", { busKey, targetTrait: binding.trait.name, triggers: listen.triggers });
@@ -45378,7 +45418,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     }
     for (const event of eventsToFire) {
       stateLog.debug("mount:fire-lifecycle", { event, traitCount: traitBindings.length });
-      enqueueAndDrain(event, {});
+      enqueueAndDrain(event, { ...optionsRef.current?.initPayload ?? {} });
     }
     return () => {
       initedTraitsRef.current = /* @__PURE__ */ new Set();
@@ -45419,7 +45459,9 @@ function useResolvedSchema(schema, pageName) {
         trait.listens = callSiteListens.map((l) => ({
           event: l.event,
           triggers: l.triggers,
-          source: l.source
+          source: l.source,
+          guard: l.guard,
+          payloadMapping: l.payloadMapping
         }));
         resolvedSchemaLog.info("listens:restored", {
           trait: traitName,
@@ -45578,7 +45620,7 @@ function collectServerActiveTraits(ir, allTraits, mountedTraitNames) {
   }
   return active;
 }
-function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, serverActiveTraits }) {
+function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, serverActiveTraits }) {
   const bridge = providers.useServerBridge();
   const activeTraitNames = React82.useMemo(
     () => new Set(traits2.map((b) => b.trait.name).filter((n) => !!n)),
@@ -45607,43 +45649,48 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
       applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames);
     }
   }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits]);
-  const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits };
+  const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams };
   const { sendEvent } = useTraitStateMachine(traits2, uiSlots, opts);
   const initSentRef = React82.useRef(false);
   const prevTraitsRef = React82.useRef(void 0);
+  const paramsKey = JSON.stringify(routeParams ?? {});
+  const prevParamsKeyRef = React82.useRef(void 0);
   React82.useEffect(() => {
     const refChanged = prevTraitsRef.current !== void 0 && prevTraitsRef.current !== traits2;
+    const paramsChanged = prevParamsKeyRef.current !== void 0 && prevParamsKeyRef.current !== paramsKey;
     navLog.debug("page:traits-effect", () => ({
       refChanged,
+      paramsChanged,
       traitsCount: Array.isArray(traits2) ? traits2.length : -1,
       hadPrev: prevTraitsRef.current !== void 0
     }));
-    if (refChanged) {
-      navLog.info("page:traits-reset", { traitsCount: Array.isArray(traits2) ? traits2.length : -1 });
+    if (refChanged || paramsChanged) {
+      navLog.info("page:traits-reset", { traitsCount: Array.isArray(traits2) ? traits2.length : -1, paramsChanged });
       uiSlots.clearAll();
       initSentRef.current = false;
     }
     prevTraitsRef.current = traits2;
-  }, [traits2, uiSlots]);
+    prevParamsKeyRef.current = paramsKey;
+  }, [traits2, uiSlots, paramsKey]);
   React82.useEffect(() => {
     if (!orbitalNames?.length) {
-      const t = setTimeout(() => sendEvent("INIT"), 50);
+      const t = setTimeout(() => sendEvent("INIT", routeParams), 50);
       return () => clearTimeout(t);
     }
     const fallback = setTimeout(() => {
       if (!initSentRef.current) {
-        sendEvent("INIT");
+        sendEvent("INIT", routeParams);
         onLocalFallback?.();
       }
     }, 5e3);
     return () => clearTimeout(fallback);
-  }, [traits2, orbitalNames, sendEvent, onLocalFallback]);
+  }, [traits2, orbitalNames, sendEvent, onLocalFallback, routeParams]);
   React82.useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
     (async () => {
       for (const name of orbitalNames) {
-        const { effects, meta } = await bridge.sendEvent(name, "INIT", withActiveTraits({}));
+        const { effects, meta } = await bridge.sendEvent(name, "INIT", withActiveTraits({ ...routeParams ?? {} }));
         recordServerResponse(name, "INIT", meta);
         const effectTraces = [
           { type: "fetch", args: [], status: "executed" },
@@ -45664,10 +45711,10 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
         applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames);
       }
     })();
-  }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits]);
+  }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits, routeParams]);
   return null;
 }
-function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavigate, onLocalFallback, persistence }) {
+function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, routeParams, onNavigate, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = React82.useMemo(() => {
     let base;
@@ -45809,6 +45856,7 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
           TraitInitializer,
           {
             traits: allPageTraits,
+            routeParams,
             orbitalNames: serverUrl || transport ? pageOrbitalNames : void 0,
             traitConfigsByName,
             orbitalsByTrait,
@@ -45886,27 +45934,35 @@ function OrbPreview({
       return [];
     }
   }, [parsedSchema]);
-  const initialPageName = React82.useMemo(() => {
+  const initialPageMatch = React82.useMemo(() => {
     if (!initialPagePath) return void 0;
-    const match = pages.find(({ page }) => page.path === initialPagePath);
-    return match?.page.name;
+    const hit = providers.matchPathAmong(pages, initialPagePath, (entry) => entry.page.path);
+    if (!hit) return void 0;
+    return { name: hit.candidate.page.name, params: hit.params };
   }, [pages, initialPagePath]);
+  const initialPageName = initialPageMatch?.name;
   const [currentPage, setCurrentPage] = React82.useState(initialPageName);
+  const [routeParams, setRouteParams] = React82.useState(initialPageMatch?.params ?? {});
   const prevInitialPagePathRef = React82.useRef(initialPagePath);
   React82.useEffect(() => {
     if (prevInitialPagePathRef.current !== initialPagePath) {
       prevInitialPagePathRef.current = initialPagePath;
       setCurrentPage(initialPageName);
+      setRouteParams(initialPageMatch?.params ?? {});
     }
-  }, [initialPagePath, initialPageName]);
+  }, [initialPagePath, initialPageName, initialPageMatch]);
   const handleNavigate = React82.useCallback((path) => {
-    const match = pages.find(({ page }) => page.path === path);
+    const hit = providers.matchPathAmong(pages, path, (entry) => entry.page.path);
+    const match = hit?.candidate;
+    const params = hit?.params ?? {};
     navLog.debug("handleNavigate", () => ({
       path,
       matched: match?.page.name ?? null,
+      params,
       availablePaths: pages.map((p) => p.page.path)
     }));
-    if (match) {
+    if (match?.page.name) {
+      setRouteParams(params);
       setCurrentPage(match.page.name);
       if (typeof window !== "undefined") {
         const url = new URL(window.location.href);
@@ -45976,6 +46032,7 @@ function OrbPreview({
             transport,
             mockData: effectiveMockData,
             pageName: currentPage,
+            routeParams,
             onNavigate: handleNavigate,
             onLocalFallback: handleLocalFallback,
             persistence