@almadar/ui 5.123.0 → 5.124.0

package/dist/components/index.js

@@ -3851,15 +3851,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__ */ jsx(
@@ -4467,7 +4467,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,
@@ -4478,7 +4478,7 @@ function DayCell({
             variant: "small",
             className: cn(
               "font-medium",
-              isToday ? "text-blue-600" : "text-muted-foreground"
+              isToday ? "text-primary" : "text-muted-foreground"
             ),
             children: dayAbbr
           }
@@ -4490,7 +4490,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__ */ jsx(Typography, { variant: "body", className: "font-semibold", children: safeDate.getDate() })
           }
@@ -7805,19 +7805,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__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(Lightbulb, { className: "text-indigo-600 dark:text-indigo-400 flex-shrink-0 mt-1", size: 24 }),
+            /* @__PURE__ */ jsx(Lightbulb, { className: "text-primary flex-shrink-0 mt-1", size: 24 }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-indigo-900 dark:text-indigo-100 mb-2", children: "Before You Begin..." }),
-              /* @__PURE__ */ jsx("p", { className: "text-gray-700 dark:text-gray-300 mb-3 text-sm md:text-base", children: question }),
+              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-primary mb-2", children: "Before You Begin..." }),
+              /* @__PURE__ */ jsx("p", { className: "text-foreground mb-3 text-sm md:text-base", children: question }),
               isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ 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),
@@ -7829,7 +7829,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"
                     }
                   ),
@@ -7840,7 +7840,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"
                     }
                   )
@@ -7849,7 +7849,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"
                 }
               )
@@ -8662,7 +8662,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 ? {
@@ -8671,7 +8671,7 @@ var init_AuthLayout = __esm({
             } : void 0,
             gap: "none",
             children: [
-              /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary-600/90 to-primary-800/90" }),
+              /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary/90 to-primary-hover/90" }),
               /* @__PURE__ */ jsx(Box, { className: "relative z-10", children: /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-3", children: [
                 logo || /* @__PURE__ */ jsx(Box, { className: "w-10 h-10 bg-[var(--color-card)]/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsx(
                   Typography,
@@ -8756,7 +8756,7 @@ var init_AuthLayout = __esm({
             ),
             children: /* @__PURE__ */ jsxs(Box, { className: "w-full max-w-md", children: [
               /* @__PURE__ */ jsx(Box, { className: "lg:hidden mb-8 text-center", children: /* @__PURE__ */ jsxs(Link, { to: "/", className: "inline-flex items-center gap-3", children: [
-                logo || /* @__PURE__ */ jsx(Box, { className: "w-12 h-12 bg-primary-600 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                logo || /* @__PURE__ */ jsx(Box, { className: "w-12 h-12 bg-primary rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsx(
                   Typography,
                   {
                     variant: "body1",
@@ -10750,7 +10750,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__ */ jsx(Badge, { variant: "default", size: "sm", children: language }),
                 effectiveCopy && /* @__PURE__ */ jsx(
@@ -10759,9 +10759,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__ */ jsx(Icon, { name: "check", className: "w-4 h-4 text-green-400" }) : /* @__PURE__ */ jsx(Icon, { name: "copy", className: "w-4 h-4" })
+                    children: copied ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "w-4 h-4 text-success" }) : /* @__PURE__ */ jsx(Icon, { name: "copy", className: "w-4 h-4" })
                   }
                 )
               ]
@@ -11129,12 +11129,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,
@@ -11160,22 +11160,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__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                index !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-gray-400 font-medium text-sm", children: [
+                index !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground font-medium text-sm", children: [
                   "Question ",
                   index + 1
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: cn(config.color, "text-white text-xs px-2 py-1 rounded-full font-medium"), children: config.label })
+                /* @__PURE__ */ jsx("span", { className: cn(config.color, "text-xs px-2 py-1 rounded-full font-medium"), children: config.label })
               ] }),
-              isAnswered && /* @__PURE__ */ jsx(CheckCircle, { className: "text-green-600 dark:text-green-400 flex-shrink-0", size: 20 })
+              isAnswered && /* @__PURE__ */ jsx(CheckCircle, { className: "text-success flex-shrink-0", size: 20 })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "font-semibold text-indigo-900 dark:text-indigo-200 mb-3 space-y-2", children: questionSegments.map(
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-primary mb-3 space-y-2", children: questionSegments.map(
               (segment, idx) => segment.type === "markdown" ? /* @__PURE__ */ jsx(MarkdownContent, { content: segment.content }, `q-md-${idx}`) : /* @__PURE__ */ jsx(
                 CodeBlock,
                 {
@@ -11189,13 +11189,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__ */ 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__ */ jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 mb-1 font-medium uppercase tracking-wide", children: "Answer:" }),
+            revealed && /* @__PURE__ */ 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__ */ 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__ */ jsx(MarkdownContent, { content: segment.content }, `a-md-${idx}`) : /* @__PURE__ */ jsx(
                   CodeBlock,
@@ -11469,12 +11469,12 @@ var init_QuizBlock = __esm({
     }) => {
       const { t } = useTranslate();
       const [revealed, setRevealed] = useState(false);
-      return /* @__PURE__ */ jsx(Card2, { className: cn("my-4 border-blue-200 dark:border-blue-800", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-4", children: [
+      return /* @__PURE__ */ jsx(Card2, { className: cn("my-4 border-primary", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-4", children: [
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", children: [
-          /* @__PURE__ */ jsx(Icon, { icon: HelpCircle, size: "sm", className: "text-blue-500 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ jsx(Icon, { icon: HelpCircle, size: "sm", className: "text-primary mt-0.5 shrink-0" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", className: "font-medium", children: question })
         ] }),
-        revealed ? /* @__PURE__ */ jsx(Box, { className: "pl-7 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-foreground", children: answer }) }) : null,
+        revealed ? /* @__PURE__ */ jsx(Box, { className: "pl-7 pt-2 border-t border-border", children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-foreground", children: answer }) }) : null,
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -13386,7 +13386,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__ */ jsx(Box, { className: "truncate", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: String(chapter.title ?? "") }) })
                     },
@@ -14634,7 +14634,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__ */ jsx(Typography, { variant: "small", className: "truncate font-medium", children: event.title })
@@ -14732,7 +14732,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),
@@ -18408,31 +18408,31 @@ var init_CodeRunnerPanel = __esm({
             }
           )
         ] }),
-        hasOutput && /* @__PURE__ */ jsxs(Box, { className: "rounded-lg border border-gray-700 bg-[#0d0d0d] overflow-hidden", children: [
+        hasOutput && /* @__PURE__ */ jsxs(Box, { className: "rounded-lg border border-border bg-foreground overflow-hidden", children: [
           /* @__PURE__ */ 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__ */ jsx(Terminal, { size: 16, className: "text-gray-400" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-300 font-medium", children: "Output" })
+                /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-muted-foreground" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx(VStack, { gap: "none", className: "p-3 font-mono text-sm", children: error ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            output?.stdout ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-200 whitespace-pre-wrap", children: output.stdout }) : null,
-            output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: output.stderr }) : null,
-            !output?.stdout && !output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 italic", children: "No output" }) : null,
-            output && output.testResults.length > 0 && /* @__PURE__ */ jsx(Box, { className: "mt-3 pt-3 border-t border-gray-700 space-y-2", children: output.testResults.map((test, index) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", className: "text-xs", children: [
-              test.passed ? /* @__PURE__ */ jsx(CheckCircle, { size: 14, className: "text-green-400 mt-0.5" }) : /* @__PURE__ */ jsx(XCircle, { size: 14, className: "text-red-400 mt-0.5" }),
+          /* @__PURE__ */ jsx(VStack, { gap: "none", className: "p-3 font-mono text-sm", children: error ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-error whitespace-pre-wrap", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            output?.stdout ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-background whitespace-pre-wrap", children: output.stdout }) : null,
+            output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-error whitespace-pre-wrap", children: output.stderr }) : null,
+            !output?.stdout && !output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-background italic", children: "No output" }) : null,
+            output && output.testResults.length > 0 && /* @__PURE__ */ jsx(Box, { className: "mt-3 pt-3 border-t border-border space-y-2", children: output.testResults.map((test, index) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", className: "text-xs", children: [
+              test.passed ? /* @__PURE__ */ jsx(CheckCircle, { size: 14, className: "text-success mt-0.5" }) : /* @__PURE__ */ jsx(XCircle, { size: 14, className: "text-error mt-0.5" }),
               /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1", children: [
                 /* @__PURE__ */ jsxs(
                   Typography,
                   {
                     variant: "small",
-                    className: test.passed ? "text-green-400" : "text-red-400",
+                    className: test.passed ? "text-success" : "text-error",
                     children: [
                       "Test ",
                       index + 1,
@@ -18441,15 +18441,15 @@ var init_CodeRunnerPanel = __esm({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Input: ",
                   test.input
                 ] }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Expected: ",
                   test.expectedOutput
                 ] }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Actual: ",
                   test.actualOutput
                 ] })
@@ -18634,14 +18634,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__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx(Link2, { className: "text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-1", size: 20 }),
+          /* @__PURE__ */ jsx(Link2, { className: "text-success flex-shrink-0 mt-1", size: 20 }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-emerald-900 dark:text-emerald-100 mb-2", children: "Building On What You Know" }),
-            /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert prose-sm max-w-none text-gray-700 dark:text-gray-300", children: /* @__PURE__ */ jsx(MarkdownContent, { content }) })
+            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-success mb-2", children: "Building On What You Know" }),
+            /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert prose-sm max-w-none text-foreground", children: /* @__PURE__ */ jsx(MarkdownContent, { content }) })
           ] })
         ] })
       }
@@ -19032,7 +19032,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
       }
@@ -19105,7 +19105,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
         }
@@ -19370,11 +19370,11 @@ var init_DashboardLayout = __esm({
                       className: "h-16 px-4 border-b border-border dark:border-border",
                       children: [
                         /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
-                          logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                          logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ 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()
                             }
@@ -19453,11 +19453,11 @@ var init_DashboardLayout = __esm({
                             className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
                             children: [
                               /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
-                                logo || /* @__PURE__ */ jsx(Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                                logo || /* @__PURE__ */ jsx(Box, { className: "w-7 h-7 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ 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()
                                   }
@@ -19517,8 +19517,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
                                   }
@@ -19540,7 +19540,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
                                   }
                                 )
@@ -19823,7 +19823,7 @@ function SubMenu({
             ),
             children: [
               item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-red-600"), children: item.label }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-error"), children: item.label }),
               item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs font-medium", children: item.badge })
             ]
           },
@@ -19880,7 +19880,7 @@ function MenuItemRow({
             Typography,
             {
               variant: "small",
-              className: cn("flex-1", isDanger && "text-red-600"),
+              className: cn("flex-1", isDanger && "text-error"),
               children: item.label
             }
           ),
@@ -20648,20 +20648,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";
   useEffect(() => {
@@ -20763,10 +20767,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)
                             }))
                           }
                         )
@@ -20908,10 +20909,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)
                           }))
                         }
                       )
@@ -23930,8 +23928,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__ */ jsx(
@@ -24011,7 +24009,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),
@@ -24168,7 +24166,7 @@ var init_SidePanel = __esm({
         showOverlay && /* @__PURE__ */ jsx(Presence, { show: isOpen, animation: "overlay", children: /* @__PURE__ */ 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
           }
         ) }),
@@ -24535,7 +24533,7 @@ var init_WizardNavigation = __esm({
               /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: "sm" }),
               resolvedBackLabel
             ] }) : /* @__PURE__ */ jsx(Box, {}),
-            /* @__PURE__ */ jsx(HStack, { align: "center", gap: "sm", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-neutral-500", children: t("wizard.stepOf", { current: String(currentStep + 1), total: String(totalSteps) }) }) }),
+            /* @__PURE__ */ jsx(HStack, { align: "center", gap: "sm", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("wizard.stepOf", { current: String(currentStep + 1), total: String(totalSteps) }) }) }),
             isLastStep && showComplete ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleComplete, disabled: !isValid, children: resolvedCompleteLabel }) : showNext ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleNext, disabled: !isValid, children: [
               resolvedNextLabel,
               /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm" })
@@ -29254,6 +29252,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
           ),
@@ -29276,7 +29275,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__ */ jsx(Icon, { name: "x", className: "w-6 h-6" })
@@ -29295,7 +29294,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__ */ jsx(Icon, { name: "chevron-left", className: "w-8 h-8" })
@@ -29332,7 +29331,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__ */ jsx(Icon, { name: "chevron-right", className: "w-8 h-8" })
@@ -32405,6 +32404,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
@@ -32469,7 +32469,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"),
@@ -32482,7 +32484,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"),
@@ -32495,7 +32499,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"),
@@ -35231,10 +35237,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",
@@ -35264,8 +35270,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__ */ jsx(Handle, { type: "target", position: Position.Left, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
-            /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
+            /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "!w-2.5 !h-2.5 !bg-warning" }),
+            /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2.5 !h-2.5 !bg-warning" }),
             /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-[var(--color-foreground)]", children: orbitalName }) }),
             /* @__PURE__ */ jsxs("div", { className: `px-3 py-2 border-b border-[var(--color-border)] ${PERSISTENCE_BORDER[persistence] ?? ""}`, children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
@@ -37721,19 +37727,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__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(PauseCircle, { className: "text-amber-600 dark:text-amber-400 flex-shrink-0 mt-1", size: 20 }),
+            /* @__PURE__ */ jsx(PauseCircle, { className: "text-warning flex-shrink-0 mt-1", size: 20 }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "font-medium text-amber-900 dark:text-amber-100 mb-2", children: "Pause & Reflect" }),
-              /* @__PURE__ */ jsx("p", { className: "text-gray-700 dark:text-gray-300 text-sm mb-3", children: prompt }),
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-warning mb-2", children: "Pause & Reflect" }),
+              /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm mb-3", children: prompt }),
               isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ 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),
@@ -37744,7 +37750,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"
                   }
                 )
@@ -37752,7 +37758,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"
                 }
               )
@@ -38256,7 +38262,7 @@ function DataTable({
             )),
             rowActions && /* @__PURE__ */ jsx("th", { className: "w-12 px-4 py-3" })
           ] }) }),
-          /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-700", children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
             "td",
             {
               colSpan: normalizedColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0),
@@ -38627,7 +38633,7 @@ var init_DetailPanel = __esm({
       };
       const effectiveFieldNames = isFieldDefArray(propFields) ? normalizeFieldDefs(propFields) : fieldNames;
       const fieldTypeMap = isFieldDefArray(propFields) ? buildFieldTypeMap(propFields) : {};
-      useCallback(
+      const handleActionClick = useCallback(
         (action, data2) => {
           if (action.navigatesTo) {
             const url = action.navigatesTo.replace(
@@ -38819,8 +38825,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,
@@ -40863,8 +40870,9 @@ var init_MediaGallery = __esm({
                           )
                         }
                       ),
-                      item.caption && /* @__PURE__ */ jsx(Box, { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-white truncate", children: item.caption }) }),
-                      selectable && isSelected && /* @__PURE__ */ jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx(Box, { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-white truncate", children: item.caption }) }),
+                      selectable && isSelected && /* @__PURE__ */ jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-primary-foreground text-xs", children: "\u2713" }) })
                     ]
                   },
                   item.id
@@ -40893,7 +40901,7 @@ var init_MediaGallery = __esm({
                       size: "sm",
                       icon: X,
                       action: "LIGHTBOX_CLOSE",
-                      className: "text-white hover:bg-white/20"
+                      className: "text-foreground hover:bg-muted/50"
                     }
                   ) }),
                   /* @__PURE__ */ jsx(
@@ -40904,7 +40912,7 @@ var init_MediaGallery = __esm({
                       className: "max-w-full max-h-[80vh] object-contain rounded-md"
                     }
                   ),
-                  lightboxItem.caption && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-white mt-3 text-center", children: lightboxItem.caption })
+                  lightboxItem.caption && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-foreground mt-3 text-center", children: lightboxItem.caption })
                 ]
               }
             )
@@ -41346,7 +41354,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",
             " ",
@@ -41487,13 +41495,13 @@ function WalkMinimap() {
       })
     ] }) }),
     /* @__PURE__ */ jsx(Box, { className: "px-2 py-1 border-t border-border", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center justify-between", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-green-500", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-success", children: [
         "Engine: ",
         engineCount,
         "/",
         totalTransitions
       ] }),
-      domCount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-cyan-500", children: [
+      domCount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-info", children: [
         "DOM: ",
         domCount
       ] }),
@@ -41526,13 +41534,13 @@ function TraitsTab({ traits: traits2 }) {
   const accordionItems = traits2.map((trait) => ({
     id: trait.id,
     header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-purple-600 dark:text-purple-400", children: trait.name }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-primary", children: trait.name }),
       /* @__PURE__ */ jsx(Badge, { variant: "success", size: "sm", children: trait.currentState }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: t("debug.transitionsCount", { count: trait.transitionCount }) })
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: t("debug.transitionsCount", { count: trait.transitionCount }) })
     ] }),
     content: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.states") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.states") }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: trait.states.map((state) => /* @__PURE__ */ jsx(
           Badge,
           {
@@ -41544,18 +41552,18 @@ function TraitsTab({ traits: traits2 }) {
         )) })
       ] }),
       trait.transitions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.transitions") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.transitions") }),
         /* @__PURE__ */ jsx(Stack, { gap: "xs", children: trait.transitions.map((t2, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono", children: [
           t2.from,
           " \u2192 ",
           t2.to,
           " ",
-          /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
             "(",
             t2.event,
             ")"
           ] }),
-          t2.guard && /* @__PURE__ */ jsxs("span", { className: "text-amber-500", children: [
+          t2.guard && /* @__PURE__ */ jsxs("span", { className: "text-warning", children: [
             " [",
             t2.guard,
             "]"
@@ -41563,7 +41571,7 @@ function TraitsTab({ traits: traits2 }) {
         ] }, i)) })
       ] }),
       trait.guards.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.guards") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.guards") }),
         /* @__PURE__ */ jsx(Stack, { gap: "xs", children: trait.guards.map((g, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", children: g.name }),
           /* @__PURE__ */ jsx(Badge, { variant: g.lastResult === true ? "success" : g.lastResult === false ? "danger" : "default", size: "sm", children: g.lastResult === void 0 ? "?" : g.lastResult ? "\u2713" : "\u2717" })
@@ -41606,11 +41614,11 @@ function TicksTab({ ticks: ticks2 }) {
   };
   const TickCard = ({ tick, active }) => /* @__PURE__ */ jsxs(Card, { className: `p-3 ${!active ? "opacity-50" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-      /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-full ${active ? "bg-green-500" : "bg-gray-400"}` }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: tick.name }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: tick.traitName })
+      /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-full ${active ? "bg-success" : "bg-muted-foreground"}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-warning", children: tick.name }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: tick.traitName })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-xs text-gray-500", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         tick.interval,
         "ms"
@@ -41633,7 +41641,7 @@ function TicksTab({ ticks: ticks2 }) {
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--ticks", children: [
     activeTicks.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: [
         "Active (",
         activeTicks.length,
         ")"
@@ -41641,7 +41649,7 @@ function TicksTab({ ticks: ticks2 }) {
       /* @__PURE__ */ jsx(Stack, { gap: "sm", children: activeTicks.map((tick) => /* @__PURE__ */ jsx(TickCard, { tick, active: true }, tick.id)) })
     ] }),
     inactiveTicks.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-400 mb-2", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: [
         "Inactive (",
         inactiveTicks.length,
         ")"
@@ -41689,33 +41697,33 @@ function EntitiesTab({ snapshot }) {
     id: `singleton-${name}`,
     header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: t("debug.singleton") }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: name })
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-info", children: name })
     ] }),
-    content: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: entity.type }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-info", children: entity.type }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground", children: [
         "#",
         entity.id.slice(0, 8)
       ] })
     ] }),
-    content: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "debug-tab debug-tab--entities", children: [
     singletonItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.singletonsCount", { count: singletonItems.length }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.singletonsCount", { count: singletonItems.length }) }),
       /* @__PURE__ */ jsx(Accordion, { items: singletonItems, multiple: true })
     ] }),
     runtimeItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.runtimeCount", { count: runtimeEntities.length }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.runtimeCount", { count: runtimeEntities.length }) }),
       /* @__PURE__ */ jsx(Accordion, { items: runtimeItems, multiple: true }),
-      runtimeEntities.length > 20 && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 text-center mt-2", children: t("debug.moreEntities", { count: runtimeEntities.length - 20 }) })
+      runtimeEntities.length > 20 && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-center mt-2", children: t("debug.moreEntities", { count: runtimeEntities.length - 20 }) })
     ] }),
     persistentEntries.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.persistent") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.persistent") }),
       /* @__PURE__ */ jsx(Stack, { gap: "xs", children: persistentEntries.map(([type, info]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
         /* @__PURE__ */ jsx(Typography, { variant: "small", children: type }),
         /* @__PURE__ */ jsx(Badge, { variant: info.loaded ? "success" : "default", size: "sm", children: info.loaded ? t("debug.loadedCount", { count: info.count }) : t("debug.notLoaded") })
@@ -41800,7 +41808,7 @@ function EventFlowTab({ events: events2 }) {
           );
         })
       ] }),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 ml-auto cursor-pointer", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground ml-auto cursor-pointer", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -41815,18 +41823,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__ */ 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__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime2(event.timestamp) }),
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono min-w-[65px]", children: formatTime2(event.timestamp) }),
                 /* @__PURE__ */ jsx("span", { children: icon }),
                 /* @__PURE__ */ jsx(Badge, { variant, size: "sm", className: "min-w-[60px] justify-center", children: event.source }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-600 dark:text-gray-400", children: event.message })
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: event.message })
               ]
             },
             event.id
@@ -41890,21 +41898,21 @@ function GuardsPanel({ guards }) {
     id: guard.id,
     header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsx(Badge, { variant: guard.result ? "success" : "danger", size: "sm", children: guard.result ? "\u2713" : "\u2717" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: guard.guardName }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: guard.context.type === "transition" ? `${guard.context.transitionFrom} \u2192 ${guard.context.transitionTo}` : guard.context.tickName }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: formatTime2(guard.timestamp) })
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-warning", children: guard.guardName }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: guard.context.type === "transition" ? `${guard.context.transitionFrom} \u2192 ${guard.context.transitionTo}` : guard.context.tickName }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: formatTime2(guard.timestamp) })
     ] }),
     content: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.expression") }),
-        /* @__PURE__ */ 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__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.expression") }),
+        /* @__PURE__ */ jsx("code", { className: "block mt-1 text-xs text-warning bg-warning/10 px-2 py-1 rounded", children: guard.expression })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.inputs") }),
-        /* @__PURE__ */ 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__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.inputs") }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.trait") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.trait") }),
         /* @__PURE__ */ jsx(Typography, { variant: "small", children: guard.context.traitName })
       ] })
     ] })
@@ -41960,7 +41968,7 @@ function VerificationTab({ checks, summary }) {
     (a, b) => (sortOrder[a.status] ?? 4) - (sortOrder[b.status] ?? 4)
   );
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--verification", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3 p-2 bg-gray-50 dark:bg-gray-800 rounded", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3 p-2 bg-muted rounded", children: [
       /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
         summary.passed,
         " passed"
@@ -41977,7 +41985,7 @@ function VerificationTab({ checks, summary }) {
         summary.pending,
         " pending"
       ] }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: [
         summary.totalChecks,
         " total checks"
       ] })
@@ -41987,12 +41995,12 @@ function VerificationTab({ checks, summary }) {
       return /* @__PURE__ */ 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__ */ jsx(Badge, { variant: config.variant, size: "sm", className: "min-w-[20px] justify-center mt-0.5", children: config.icon }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "small", className: "break-words", children: check.label }),
-              check.details && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 break-words", children: check.details })
+              check.details && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground break-words", children: check.details })
             ] }),
             /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono text-xs shrink-0", children: new Date(check.updatedAt).toLocaleTimeString("en-US", {
               hour12: false,
@@ -42027,10 +42035,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__ */ 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__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-mono bg-muted rounded px-1.5 py-0.5", children: [
     /* @__PURE__ */ jsx(Badge, { variant, size: "sm", className: "!text-[9px] !px-1 !py-0", children: icon }),
-    /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: effect.type }),
-    effect.error && /* @__PURE__ */ jsx("span", { className: "text-red-500 truncate max-w-[120px]", title: effect.error, children: effect.error })
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: effect.type }),
+    effect.error && /* @__PURE__ */ jsx("span", { className: "text-error truncate max-w-[120px]", title: effect.error, children: effect.error })
   ] });
 }
 function TransitionTimeline({ transitions }) {
@@ -42065,8 +42073,8 @@ function TransitionTimeline({ transitions }) {
   const sorted = [...transitions].reverse();
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--timeline", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: t("debug.transitionsRecorded", { count: transitions.length }) }),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 cursor-pointer", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: t("debug.transitionsRecorded", { count: transitions.length }) }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground cursor-pointer", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -42091,22 +42099,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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 text-xs py-1 px-2", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime2(trace.timestamp) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono min-w-[65px]", children: formatTime2(trace.timestamp) }),
                   /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", className: "min-w-[60px] justify-center", children: trace.traitName }),
-                  /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-gray-600 dark:text-gray-400", children: [
+                  /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-muted-foreground", children: [
                     trace.from,
                     " ",
-                    /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u2192" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\u2192" }),
                     " ",
                     trace.to
                   ] }),
@@ -42123,9 +42131,9 @@ function TransitionTimeline({ transitions }) {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: t("debug.effectsCount", { count: trace.effects.length }) })
+                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: t("debug.effectsCount", { count: trace.effects.length }) })
                 ] }),
-                isExpanded && trace.effects.length > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                isExpanded && trace.effects.length > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsx(EffectBadge, { effect }),
                   effect.args.length > 0 && /* @__PURE__ */ 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__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
@@ -42159,8 +42167,8 @@ var init_TransitionTimeline = __esm({
   }
 });
 function StatRow({ label, value, variant }) {
-  return /* @__PURE__ */ 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__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: label }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1.5 border-b border-border last:border-b-0", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: label }),
     variant ? /* @__PURE__ */ jsx(Badge, { variant, size: "sm", children: String(value) }) : /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "font-mono", children: String(value) })
   ] });
 }
@@ -42189,7 +42197,7 @@ function ServerBridgeTab({ bridge }) {
   return /* @__PURE__ */ jsx("div", { className: "debug-tab debug-tab--bridge", children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
     /* @__PURE__ */ jsxs(Card, { className: "p-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-        /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full ${bridge.connected ? "bg-green-500 animate-pulse" : "bg-red-500"}` }),
+        /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full ${bridge.connected ? "bg-success animate-pulse" : "bg-error"}` }),
         /* @__PURE__ */ jsx(Typography, { variant: "h6", children: bridge.connected ? t("debug.connected") : t("debug.disconnected") })
       ] }),
       /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
@@ -42224,11 +42232,11 @@ function ServerBridgeTab({ bridge }) {
         )
       ] })
     ] }),
-    bridge.lastError && /* @__PURE__ */ jsxs(Card, { className: "p-3 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "text-red-600 dark:text-red-400 mb-1", children: t("debug.lastError") }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-500 font-mono break-all", children: bridge.lastError })
+    bridge.lastError && /* @__PURE__ */ jsxs(Card, { className: "p-3 border-error/30 bg-error/10", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "text-error mb-1", children: t("debug.lastError") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-error font-mono break-all", children: bridge.lastError })
     ] }),
-    bridge.connected && /* @__PURE__ */ jsx("div", { className: "text-center py-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400", children: t("debug.totalEventsProcessed", { count: bridge.eventsForwarded + bridge.eventsReceived }) }) })
+    bridge.connected && /* @__PURE__ */ jsx("div", { className: "text-center py-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: t("debug.totalEventsProcessed", { count: bridge.eventsForwarded + bridge.eventsReceived }) }) })
   ] }) });
 }
 var init_ServerBridgeTab = __esm({
@@ -42354,7 +42362,7 @@ function EventDispatcherTab({ traits: traits2, schema }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--dispatch", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.activeStates") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.activeStates") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: traits2.map((trait) => /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
         trait.name,
         ": ",
@@ -42362,8 +42370,8 @@ function EventDispatcherTab({ traits: traits2, schema }) {
       ] }, trait.id)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.availableEvents") }),
-      availableEvents.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 italic", children: t("debug.noTransitionsFromState") }) : /* @__PURE__ */ jsx(Stack, { gap: "xs", children: availableEvents.map(({ event, transitions }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.availableEvents") }),
+      availableEvents.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground italic", children: t("debug.noTransitionsFromState") }) : /* @__PURE__ */ jsx(Stack, { gap: "xs", children: availableEvents.map(({ event, transitions }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -42374,22 +42382,22 @@ function EventDispatcherTab({ traits: traits2, schema }) {
             children: event
           }
         ),
-        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: transitions.map((t2) => `${t2.from} -> ${t2.to}`).join(", ") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: transitions.map((t2) => `${t2.from} -> ${t2.to}`).join(", ") }),
         transitions.some((tr) => tr.guard) && /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", children: t("debug.guarded") })
       ] }, event)) })
     ] }),
     unavailableEvents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.otherEvents") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.otherEvents") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
     ] }),
     log19.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.recentTransitions") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.recentTransitions") }),
       /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log19.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-purple-400", children: entry.traitName }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary", children: entry.traitName }),
         " ",
-        /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: entry.from }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: entry.from }),
         " -> ",
-        /* @__PURE__ */ jsx("span", { className: "text-green-400", children: entry.to })
+        /* @__PURE__ */ jsx("span", { className: "text-success", children: entry.to })
       ] }, i)) })
     ] })
   ] });
@@ -42415,21 +42423,21 @@ var init_RuntimeDebugger = __esm({
 function ServerResponseRow({ sr }) {
   const { t } = useTranslate();
   const entityEntries = Object.entries(sr.dataEntities);
-  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-xs font-mono", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-primary py-0.5 text-xs font-mono", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("span", { className: sr.success ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400", children: [
+      /* @__PURE__ */ jsxs("span", { className: sr.success ? "text-success" : "text-error", children: [
         sr.success ? "\u2713" : "\u2717",
         " ",
         t("debug.server")
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-300", children: sr.orbitalName }),
-      sr.clientEffects > 0 && /* @__PURE__ */ 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__ */ jsxs("span", { className: "px-1 rounded bg-blue-500/15 text-blue-300", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: sr.orbitalName }),
+      sr.clientEffects > 0 && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-primary/10 text-primary", children: t("debug.clientEffectsCount", { count: sr.clientEffects }) }),
+      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-primary/10 text-primary", children: [
         t("debug.emitLabel"),
         " ",
         sr.emittedEvents.join(", ")
       ] }),
-      sr.error && /* @__PURE__ */ 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__ */ jsx("span", { className: "px-1 rounded bg-error/10 text-error truncate max-w-[300px]", children: sr.error })
     ] }),
     entityEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-[var(--color-card)] text-foreground", children: [
       name,
@@ -42445,9 +42453,9 @@ function TransitionRow({ trace }) {
   if (isServerEntry && trace.serverResponse) {
     return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-border last:border-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
-        /* @__PURE__ */ jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-purple-500" }),
+        /* @__PURE__ */ jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-primary" }),
         /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", className: "flex-shrink-0", children: trace.event }),
-        /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400 flex-shrink-0", children: t("debug.serverResponse") })
+        /* @__PURE__ */ jsx("span", { className: "text-primary flex-shrink-0", children: t("debug.serverResponse") })
       ] }),
       /* @__PURE__ */ jsx(ServerResponseRow, { sr: trace.serverResponse })
     ] });
@@ -42456,7 +42464,7 @@ function TransitionRow({ trace }) {
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
       /* @__PURE__ */ 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__ */ jsx(Badge, { variant: "info", size: "sm", className: "flex-shrink-0", children: trace.event }),
       /* @__PURE__ */ jsx("span", { className: "text-foreground flex-shrink-0", children: trace.traitName }),
@@ -42470,7 +42478,7 @@ function TransitionRow({ trace }) {
     ] }),
     trace.effects.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 ml-6 mt-0.5", children: trace.effects.map((eff, i) => /* @__PURE__ */ 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" : "-",
       " ",
@@ -42504,7 +42512,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
       ),
@@ -42525,8 +42533,8 @@ function VerifyModePanel({
               /* @__PURE__ */ jsx("span", { className: "text-foreground/50 w-3", "aria-hidden": true, children: expanded ? "\u25BE" : "\u25B8" }),
               /* @__PURE__ */ jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? t("debug.failCount", { count: failedChecks }) : t("debug.ok") }),
               /* @__PURE__ */ jsx("span", { className: "text-foreground/70", children: t("debug.localCount", { count: localCount }) }),
-              /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400", children: t("debug.serverCount", { count: serverCount }) }),
-              traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-600 dark:text-cyan-400 truncate max-w-[400px]", children: traitStates }),
+              /* @__PURE__ */ jsx("span", { className: "text-primary", children: t("debug.serverCount", { count: serverCount }) }),
+              traitStates && /* @__PURE__ */ jsx("span", { className: "text-accent truncate max-w-[400px]", children: traitStates }),
               !expanded && transitions.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-foreground/50", children: t("debug.transitionsCount", { count: transitions.length }) })
             ]
           }
@@ -42721,7 +42729,7 @@ function RuntimeDebugger({
           title: t("debug.openDebugger"),
           children: failedChecks > 0 ? /* @__PURE__ */ jsxs("span", { className: "relative", children: [
             /* @__PURE__ */ jsx("span", { children: "V" }),
-            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 w-2 h-2 bg-red-500 rounded-full" })
+            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 w-2 h-2 bg-error rounded-full" })
           ] }) : /* @__PURE__ */ jsx("span", { children: "V" })
         }
       ) : /* @__PURE__ */ jsxs(Card, { className: "runtime-debugger__panel", children: [
@@ -42809,7 +42817,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
           ),