@almadar/ui 5.9.6 → 5.9.7

package/dist/components/index.js

@@ -9215,7 +9215,7 @@ function ActionButton({
       disabled: isDisabled,
       onClick,
       className: cn(
-        "relative inline-flex items-center gap-1.5 rounded-md border font-medium overflow-hidden transition-colors duration-150",
+        "relative inline-flex items-center gap-1.5 rounded-interactive border font-medium overflow-hidden transition-colors duration-150",
         sizes.button,
         variantStyles7[variant],
         isDisabled && "opacity-60 cursor-not-allowed",
@@ -9258,9 +9258,9 @@ var init_ActionButton = __esm({
     init_cn();
     init_Icon();
     sizeMap = {
-      sm: { button: "px-3 py-1.5 text-xs", hotkey: "text-[9px] px-1", icon: "text-xs" },
-      md: { button: "px-4 py-2 text-sm", hotkey: "text-xs px-1.5", icon: "text-sm" },
-      lg: { button: "px-5 py-2.5 text-base", hotkey: "text-xs px-2", icon: "text-base" }
+      sm: { button: "h-button-sm px-3 text-xs", hotkey: "text-[9px] px-1", icon: "text-xs" },
+      md: { button: "h-button-md px-4 text-sm", hotkey: "text-xs px-1.5", icon: "text-sm" },
+      lg: { button: "h-button-lg px-5 text-base", hotkey: "text-xs px-2", icon: "text-base" }
     };
     variantStyles7 = {
       primary: "bg-primary text-primary-foreground hover:bg-primary-hover border-primary",
@@ -9363,8 +9363,8 @@ var init_ControlButton = __esm({
     };
     shapeMap = {
       circle: "rounded-full",
-      rounded: "rounded-xl",
-      square: "rounded-md"
+      rounded: "rounded-interactive",
+      square: "rounded-interactive"
     };
     variantMap = {
       primary: "bg-primary text-primary-foreground border-primary hover:bg-primary-hover",
@@ -9525,7 +9525,7 @@ function ActionTile({
     {
       display: "flex",
       className: cn(
-        "flex-col items-center gap-1 rounded-lg border-2 transition-all select-none",
+        "flex-col items-center gap-1 rounded-container border-2 transition-all select-none",
         config.px,
         disabled ? "opacity-40 cursor-not-allowed border-border bg-muted" : "cursor-grab active:cursor-grabbing hover:scale-105 hover:shadow-md border-border bg-card",
         className
@@ -10736,12 +10736,12 @@ function IsometricCanvas({
     return /* @__PURE__ */ jsx(
       Box,
       {
-        className: cn("relative w-full overflow-hidden rounded-lg", className),
+        className: cn("relative w-full overflow-hidden rounded-container", className),
         style: { height: viewportSize.height },
         "data-testid": "game-canvas-empty",
-        children: /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center h-full bg-[var(--color-card)] rounded-lg", children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
+        children: /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center h-full bg-[var(--color-card)] rounded-container", children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
           /* @__PURE__ */ jsx(Icon, { name: "map", size: "xl" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-slate-400", children: t("canvas.emptyMessage") || "No map data loaded" })
+          /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-muted-foreground", children: t("canvas.emptyMessage") || "No map data loaded" })
         ] }) })
       }
     );
@@ -11139,19 +11139,19 @@ function BattleBoard({
         }
       )
     ] }),
-    gameResult && (gameOverOverlay ? gameOverOverlay(ctx) : /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl", children: /* @__PURE__ */ jsxs(VStack, { className: "text-center p-8", gap: "lg", children: [
+    gameResult && (gameOverOverlay ? gameOverOverlay(ctx) : /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 z-50 flex items-center justify-center bg-background/70 backdrop-blur-sm rounded-container", children: /* @__PURE__ */ jsxs(VStack, { className: "text-center p-8", gap: "lg", children: [
       /* @__PURE__ */ jsx(
         Typography,
         {
           variant: "h2",
           className: cn(
             "text-4xl font-black tracking-widest uppercase",
-            gameResult === "victory" ? "text-yellow-400" : "text-red-500"
+            gameResult === "victory" ? "text-warning" : "text-error"
           ),
           children: gameResult === "victory" ? t("battle.victory") : t("battle.defeat")
         }
       ),
-      /* @__PURE__ */ jsxs(Typography, { variant: "body1", className: "text-gray-300", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "body1", className: "text-muted-foreground", children: [
         t("battle.turnsPlayed"),
         ": ",
         currentTurn
@@ -16028,7 +16028,7 @@ function BuilderBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.description })
@@ -16066,7 +16066,7 @@ function BuilderBoard({
               {
                 gap: "sm",
                 align: "center",
-                className: `p-3 border-2 rounded ${result ? result.correct ? "border-green-500" : "border-red-500" : selectedComponent ? "border-dashed border-foreground cursor-pointer" : "border-border"}`,
+                className: `p-3 border-2 rounded ${result ? result.correct ? "border-success" : "border-error" : selectedComponent ? "border-dashed border-foreground cursor-pointer" : "border-border"}`,
                 onClick: () => handlePlaceComponent(slot.id),
                 children: [
                   /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "flex-1", children: [
@@ -16081,7 +16081,7 @@ function BuilderBoard({
                       ] }) : null,
                       placedComp.label
                     ] }),
-                    result && /* @__PURE__ */ jsx(Icon, { icon: result.correct ? CheckCircle : XCircle, size: "sm", className: result.correct ? "text-green-600" : "text-red-600" })
+                    result && /* @__PURE__ */ jsx(Icon, { icon: result.correct ? CheckCircle : XCircle, size: "sm", className: result.correct ? "text-success" : "text-error" })
                   ] }) : /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("builder.empty") })
                 ]
               },
@@ -16090,10 +16090,10 @@ function BuilderBoard({
           }) })
         ] }) }),
         submitted && /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", children: [
-          /* @__PURE__ */ jsx(Icon, { icon: allCorrect ? CheckCircle : XCircle, size: "lg", className: allCorrect ? "text-green-600" : "text-red-600" }),
+          /* @__PURE__ */ jsx(Icon, { icon: allCorrect ? CheckCircle : XCircle, size: "lg", className: allCorrect ? "text-success" : "text-error" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", children: allCorrect ? entity.successMessage ?? t("builder.success") : entity.failMessage ?? t("builder.incorrect") })
         ] }) }),
-        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-yellow-500", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
+        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "center", children: [
           !submitted ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: !allPlaced, children: [
             /* @__PURE__ */ jsx(Icon, { icon: Wrench, size: "sm" }),
@@ -17715,7 +17715,7 @@ function CanvasEffectEngine({
         flash && /* @__PURE__ */ jsx(
           Box,
           {
-            className: "absolute inset-0 z-20 pointer-events-none rounded-lg",
+            className: "absolute inset-0 z-20 pointer-events-none rounded-container",
             style: { backgroundColor: flash.color, opacity: flash.alpha }
           }
         ),
@@ -17783,7 +17783,7 @@ function EmojiEffect({
         /* @__PURE__ */ jsx(
           Box,
           {
-            className: "absolute rounded-full animate-ping",
+            className: "absolute rounded-pill animate-ping",
             style: {
               width: 48 * intensity,
               height: 48 * intensity,
@@ -19550,7 +19550,7 @@ function ChoiceButton({
       disabled,
       onClick,
       className: cn(
-        "w-full text-left px-4 py-2.5 rounded-md border transition-all duration-150",
+        "w-full text-left px-4 py-2.5 rounded-interactive border transition-all duration-150",
         "flex items-center gap-2",
         selected ? "bg-accent/15 border-accent text-foreground" : "bg-muted/40 border-border text-foreground hover:bg-muted hover:border-border",
         disabled && "opacity-40 cursor-not-allowed hover:bg-muted/40 hover:border-border",
@@ -19646,7 +19646,7 @@ function ClassifierBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.description })
@@ -19661,7 +19661,7 @@ function ClassifierBoard({
         /* @__PURE__ */ jsx(VStack, { gap: "md", children: categories.map((cat) => {
           const catItems = items.filter((item) => assignments[item.id] === cat.id);
           return /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
-            cat.imageUrl && /* @__PURE__ */ jsx(Box, { className: "w-full h-16 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx("img", { src: cat.imageUrl, alt: "", className: "w-full h-full object-cover" }) }),
+            cat.imageUrl && /* @__PURE__ */ jsx(Box, { className: "w-full h-16 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: cat.imageUrl, alt: "", className: "w-full h-full object-cover" }) }),
             /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", children: cat.label }),
               /* @__PURE__ */ jsx(Badge, { size: "sm", children: catItems.length })
@@ -19672,12 +19672,12 @@ function ClassifierBoard({
                 Badge,
                 {
                   size: "sm",
-                  className: `cursor-pointer ${result ? result.correct ? "border-green-500 bg-green-50 dark:bg-green-950" : "border-red-500 bg-red-50 dark:bg-red-950" : ""}`,
+                  className: `cursor-pointer ${result ? result.correct ? "border-success bg-success/10" : "border-error bg-error/10" : ""}`,
                   onClick: () => handleUnassign(item.id),
                   children: [
                     item.iconUrl && /* @__PURE__ */ jsx("img", { src: item.iconUrl, alt: "", className: "w-3 h-3 object-contain inline-block" }),
                     item.label,
-                    result && /* @__PURE__ */ jsx(Icon, { icon: result.correct ? CheckCircle : XCircle, size: "xs", className: result.correct ? "text-green-600" : "text-red-600" })
+                    result && /* @__PURE__ */ jsx(Icon, { icon: result.correct ? CheckCircle : XCircle, size: "xs", className: result.correct ? "text-success" : "text-error" })
                   ]
                 },
                 item.id
@@ -19700,11 +19700,11 @@ function ClassifierBoard({
           ] }) }, cat.id);
         }) }),
         submitted && /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", children: [
-          /* @__PURE__ */ jsx(Icon, { icon: allCorrect ? CheckCircle : XCircle, size: "lg", className: allCorrect ? "text-green-600" : "text-red-600" }),
+          /* @__PURE__ */ jsx(Icon, { icon: allCorrect ? CheckCircle : XCircle, size: "lg", className: allCorrect ? "text-success" : "text-error" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", children: allCorrect ? entity.successMessage ?? t("classifier.allCorrect") : `${correctCount}/${items.length} ${t("classifier.correct")}` }),
           !allCorrect && entity.failMessage && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-muted-foreground", children: entity.failMessage })
         ] }) }),
-        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-yellow-500", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
+        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "center", children: [
           !submitted ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: !allAssigned, children: [
             /* @__PURE__ */ jsx(Icon, { icon: Send, size: "sm" }),
@@ -20354,10 +20354,10 @@ var init_CombatLog = __esm({
   }
 });
 function getComboIntensity(combo) {
-  if (combo >= 10) return "text-red-400 animate-pulse";
-  if (combo >= 7) return "text-orange-400";
-  if (combo >= 4) return "text-yellow-400";
-  return "text-[var(--color-foreground)]";
+  if (combo >= 10) return "text-error animate-pulse";
+  if (combo >= 7) return "text-warning";
+  if (combo >= 4) return "text-warning";
+  return "text-foreground";
 }
 function getComboScale(combo) {
   if (combo >= 10) return "scale-110";
@@ -20378,19 +20378,19 @@ function ComboCounter({
     {
       className: cn(
         "inline-flex flex-col items-center justify-center",
-        "rounded-xl bg-[var(--color-card)]/80 border border-gray-600 px-3 py-1.5",
+        "rounded-container bg-card/80 border border-muted px-3 py-1.5",
         "transition-transform duration-200",
         getComboScale(combo),
         className
       ),
       children: [
         /* @__PURE__ */ jsx("span", { className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
-        /* @__PURE__ */ jsx("span", { className: cn("font-bold uppercase tracking-wider text-gray-400", sizes.label), children: "combo" }),
-        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxs("span", { className: cn("font-bold text-amber-400 tabular-nums", sizes.multiplier), children: [
+        /* @__PURE__ */ jsx("span", { className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
+        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxs("span", { className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
           "x",
           multiplier.toFixed(1)
         ] }),
-        streak != null && streak > 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-gray-500 tabular-nums", sizes.label), children: [
+        streak != null && streak > 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground tabular-nums", sizes.label), children: [
           streak,
           " streak"
         ] })
@@ -20805,18 +20805,18 @@ function ItemSlot({
       disabled: !isClickable,
       title: label,
       className: cn(
-        "relative flex items-center justify-center rounded-lg border-2",
-        "bg-[var(--color-card)]/80 transition-all duration-150",
+        "relative flex items-center justify-center rounded-interactive border-2",
+        "bg-card/80 transition-all duration-150",
         sizeMap5[size],
-        empty ? "border-gray-700 bg-[var(--color-card)]/50" : rarityBorderMap[rarity],
+        empty ? "border-border bg-card/50" : rarityBorderMap[rarity],
         !empty && rarityGlowMap[rarity],
-        selected && "ring-2 ring-white ring-offset-1 ring-offset-gray-900",
+        selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background",
         isClickable && !empty && "hover:brightness-125 cursor-pointer",
-        isClickable && empty && "hover:border-gray-500 cursor-pointer",
+        isClickable && empty && "hover:border-muted cursor-pointer",
         !isClickable && "cursor-default",
         className
       ),
-      children: empty ? /* @__PURE__ */ jsx("span", { className: "text-gray-600 text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: empty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: icon }),
         quantity != null && quantity > 1 && /* @__PURE__ */ jsx(
           "span",
@@ -20824,7 +20824,7 @@ function ItemSlot({
             className: cn(
               "absolute -bottom-1 -right-1 flex items-center justify-center",
               "min-w-[18px] h-[18px] rounded-full px-1",
-              "bg-[var(--color-surface,#374151)] border border-gray-500 text-xs font-bold text-[var(--color-foreground)]"
+              "bg-surface border border-muted text-xs font-bold text-foreground"
             ),
             children: quantity
           }
@@ -20844,18 +20844,18 @@ var init_ItemSlot = __esm({
       lg: "w-18 h-18 text-3xl"
     };
     rarityBorderMap = {
-      common: "border-gray-500",
-      uncommon: "border-green-500",
-      rare: "border-blue-500",
-      epic: "border-purple-500",
-      legendary: "border-amber-400"
+      common: "border-muted",
+      uncommon: "border-success",
+      rare: "border-info",
+      epic: "border-accent",
+      legendary: "border-warning"
     };
     rarityGlowMap = {
       common: "",
       uncommon: "",
-      rare: "shadow-[0_0_6px_rgba(59,130,246,0.3)]",
-      epic: "shadow-[0_0_8px_rgba(168,85,247,0.4)]",
-      legendary: "shadow-[0_0_10px_rgba(251,191,36,0.5)]"
+      rare: "shadow-sm",
+      epic: "shadow-lg",
+      legendary: "shadow-lg"
     };
     ItemSlot.displayName = "ItemSlot";
   }
@@ -20884,7 +20884,7 @@ function CraftingRecipe({
     Box,
     {
       className: cn(
-        "flex flex-wrap items-center gap-3 rounded-lg bg-gray-800/50 border border-gray-700/50 p-3",
+        "flex flex-wrap items-center gap-3 rounded-container bg-muted/50 border border-border/50 p-3",
         className
       ),
       children: [
@@ -20901,10 +20901,10 @@ function CraftingRecipe({
                 className: cn(!hasSufficient && "opacity-50")
               }
             ) }),
-            index < inputs.length - 1 && /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm", className: "text-gray-500" })
+            index < inputs.length - 1 && /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm", className: "text-muted-foreground" })
           ] }, index);
         }) }),
-        /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: "md", className: "text-gray-400" }),
+        /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: "md", className: "text-muted-foreground" }),
         /* @__PURE__ */ jsx(
           ItemSlot,
           {
@@ -20992,7 +20992,7 @@ function DPad({
     createButton("up"),
     /* @__PURE__ */ jsx("div", {}),
     createButton("left"),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-gray-700 border-2 border-gray-600" }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-interactive bg-muted border-2 border-muted-foreground" }) }),
     createButton("right"),
     /* @__PURE__ */ jsx("div", {}),
     createButton("down"),
@@ -21054,10 +21054,10 @@ var init_DamageNumber = __esm({
       lg: "text-2xl"
     };
     typeStyles = {
-      damage: "text-red-500 font-bold",
-      heal: "text-green-500 font-bold",
-      crit: "text-orange-400 font-extrabold",
-      miss: "text-gray-400 italic"
+      damage: "text-error font-bold",
+      heal: "text-success font-bold",
+      crit: "text-warning font-extrabold",
+      miss: "text-muted-foreground italic"
     };
     floatKeyframes = `
 @keyframes damageFloat {
@@ -25245,7 +25245,7 @@ function HealthBar({
       "div",
       {
         className: cn(
-          "relative overflow-hidden rounded-full bg-gray-700",
+          "relative overflow-hidden rounded-full bg-muted",
           sizes.bar,
           "w-24",
           className
@@ -25255,7 +25255,7 @@ function HealthBar({
           {
             className: cn(
               "absolute inset-y-0 left-0 rounded-full",
-              percentage > 66 ? "bg-green-500" : percentage > 33 ? "bg-yellow-500" : "bg-red-500",
+              percentage > 66 ? "bg-success" : percentage > 33 ? "bg-warning" : "bg-error",
               animated && "transition-all duration-300"
             ),
             style: { width: `${percentage}%` }
@@ -25277,7 +25277,7 @@ var init_HealthBar = __esm({
     heartIcon = (filled, size) => /* @__PURE__ */ jsx(
       "svg",
       {
-        className: cn("transition-all duration-200", size, filled ? "text-red-500" : "text-gray-400"),
+        className: cn("transition-all duration-200", size, filled ? "text-error" : "text-muted-foreground"),
         viewBox: "0 0 24 24",
         fill: filled ? "currentColor" : "none",
         stroke: "currentColor",
@@ -25341,7 +25341,7 @@ function ScoreDisplay({
       ),
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: icon }),
-        label && /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: label }),
+        label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
         /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formattedValue })
       ]
     }
@@ -25379,7 +25379,7 @@ function StatBadge({
     "div",
     {
       className: cn(
-        "inline-flex items-center gap-2 rounded-lg border backdrop-blur-sm",
+        "inline-flex items-center gap-2 rounded-container border backdrop-blur-sm",
         sizeMap11[size] ?? sizeMap11.md,
         variantMap2[variant] ?? variantMap2.default,
         className
@@ -25528,7 +25528,7 @@ function WaypointMarker({
         "div",
         {
           className: cn(
-            "absolute rounded-full border-2 border-blue-400 animate-ping opacity-50",
+            "absolute rounded-full border-2 border-info animate-ping opacity-50",
             sizes.ring
           )
         }
@@ -25537,7 +25537,7 @@ function WaypointMarker({
         "div",
         {
           className: cn(
-            "absolute rounded-full border-2 border-blue-400",
+            "absolute rounded-full border-2 border-info",
             sizes.ring
           )
         }
@@ -25548,9 +25548,9 @@ function WaypointMarker({
           className: cn(
             "relative flex items-center justify-center rounded-full transition-all duration-200",
             sizes.dot,
-            completed && "bg-green-500 text-white",
-            active && !completed && "bg-blue-500 text-white",
-            !active && !completed && "bg-gray-500"
+            completed && "bg-success text-foreground",
+            active && !completed && "bg-info text-foreground",
+            !active && !completed && "bg-muted"
           ),
           children: completed ? checkIcon : icon
         }
@@ -25562,7 +25562,7 @@ function WaypointMarker({
         className: cn(
           "text-center whitespace-nowrap",
           sizes.label,
-          completed ? "text-green-400" : active ? "text-blue-400" : "text-gray-400"
+          completed ? "text-success" : active ? "text-info" : "text-muted-foreground"
         ),
         children: label
       }
@@ -25594,10 +25594,10 @@ function QuestTracker({
       Box,
       {
         className: cn(
-          "flex items-start gap-3 rounded-lg px-3 py-2 transition-colors",
-          isActive && !isCompleted && "bg-blue-900/20 border border-blue-800/50",
-          isCompleted && "bg-green-900/10 border border-green-800/30 opacity-70",
-          !isActive && !isCompleted && "bg-gray-800/30 border border-gray-700/30"
+          "flex items-start gap-3 rounded-container px-3 py-2 transition-colors",
+          isActive && !isCompleted && "bg-info/20 border border-info/50",
+          isCompleted && "bg-success/10 border border-success/30 opacity-70",
+          !isActive && !isCompleted && "bg-muted/30 border border-border/30"
         ),
         children: [
           /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 pt-0.5", children: /* @__PURE__ */ jsx(
@@ -25615,9 +25615,9 @@ function QuestTracker({
                 variant: "body2",
                 className: cn(
                   "font-medium truncate",
-                  isCompleted && "line-through text-gray-500",
-                  isActive && !isCompleted && "text-blue-300",
-                  !isActive && !isCompleted && "text-gray-300"
+                  isCompleted && "line-through text-muted-foreground",
+                  isActive && !isCompleted && "text-info",
+                  !isActive && !isCompleted && "text-muted-foreground"
                 ),
                 children: quest.title
               }
@@ -25635,7 +25635,7 @@ function QuestTracker({
               Typography,
               {
                 variant: "caption",
-                className: "text-gray-500 mt-1",
+                className: "text-muted-foreground mt-1",
                 children: [
                   quest.progress,
                   " / ",
@@ -25692,14 +25692,14 @@ function PowerupSlots({
         {
           className: cn(
             "absolute -bottom-1 left-1/2 -translate-x-1/2",
-            "rounded px-1 py-px",
-            "bg-black/80 border border-gray-600"
+            "rounded-interactive px-1 py-px",
+            "bg-background/80 border border-border"
           ),
           children: /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "caption",
-              className: "text-[9px] font-mono font-bold text-yellow-300 whitespace-nowrap",
+              className: "text-[9px] font-mono font-bold text-warning whitespace-nowrap",
               children: formatTime(powerup.remainingTime)
             }
           )
@@ -25821,7 +25821,7 @@ function HealthPanel({
     Box,
     {
       className: cn(
-        "rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm",
+        "rounded-container bg-[var(--color-card)]/90 border border-border backdrop-blur-sm",
         sizes.padding,
         className
       ),
@@ -25832,7 +25832,7 @@ function HealthPanel({
             {
               variant: "caption",
               weight: "bold",
-              className: "text-gray-300 uppercase tracking-wider",
+              className: "text-muted-foreground uppercase tracking-wider",
               children: label
             }
           ),
@@ -25853,7 +25853,7 @@ function HealthPanel({
                     as: "span",
                     variant: "caption",
                     weight: "bold",
-                    className: "text-blue-400 ml-1",
+                    className: "text-info ml-1",
                     children: [
                       "+",
                       shield
@@ -25878,14 +25878,14 @@ function HealthPanel({
           Box,
           {
             className: cn(
-              "relative overflow-hidden rounded-full bg-gray-700",
+              "relative overflow-hidden rounded-container bg-muted",
               size === "sm" ? "h-1" : size === "md" ? "h-1.5" : "h-2",
               "w-full"
             ),
             children: /* @__PURE__ */ jsx(
               Box,
               {
-                className: "absolute inset-y-0 left-0 rounded-full bg-blue-500 transition-all duration-300",
+                className: "absolute inset-y-0 left-0 rounded-container bg-info transition-all duration-300",
                 style: { width: `${Math.min(100, shield / max * 100)}%` }
               }
             )
@@ -25944,7 +25944,7 @@ function ScoreBoard({
     Card,
     {
       className: cn(
-        "bg-[var(--color-card)]/90 border-gray-700 backdrop-blur-sm",
+        "bg-[var(--color-card)]/90 border-border backdrop-blur-sm",
         className
       ),
       children: /* @__PURE__ */ jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-wrap", children: [
@@ -26053,8 +26053,8 @@ function TurnIndicator({
     "div",
     {
       className: cn(
-        "inline-flex items-center rounded-lg",
-        "bg-[var(--color-card)]/80 border border-gray-600 font-medium text-[var(--color-foreground)]",
+        "inline-flex items-center rounded-container",
+        "bg-card/80 border border-muted font-medium text-foreground",
         sizes.wrapper,
         className
       ),
@@ -26062,19 +26062,19 @@ function TurnIndicator({
         /* @__PURE__ */ jsxs("span", { className: "font-bold tabular-nums", children: [
           "Turn ",
           currentTurn,
-          maxTurns != null && /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+          maxTurns != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
             "/",
             maxTurns
           ] })
         ] }),
         phase && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "|" }),
-          /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: phase })
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "|" }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: phase })
         ] }),
         activeTeam && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: "|" }),
-          /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-green-500/20", sizes.dot) }),
-          /* @__PURE__ */ jsx("span", { className: "text-green-400", children: activeTeam })
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "|" }),
+          /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-success/20", sizes.dot) }),
+          /* @__PURE__ */ jsx("span", { className: "text-success", children: activeTeam })
         ] })
       ]
     }
@@ -26113,7 +26113,7 @@ function TurnPanel({
     Box,
     {
       className: cn(
-        "flex items-center gap-3 rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm px-3 py-2",
+        "flex items-center gap-3 rounded-container bg-[var(--color-card)]/90 border border-border backdrop-blur-sm px-3 py-2",
         className
       ),
       children: [
@@ -26165,7 +26165,7 @@ function EnemyPlate({
     Box,
     {
       className: cn(
-        "inline-flex flex-col gap-1 rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm px-3 py-1.5",
+        "inline-flex flex-col gap-1 rounded-container bg-[var(--color-card)]/90 border border-border backdrop-blur-sm px-3 py-1.5",
         "min-w-[120px]",
         className
       ),
@@ -26259,7 +26259,7 @@ function UnitCommandBar({
     Box,
     {
       className: cn(
-        "flex items-center gap-1.5 rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm px-2 py-1.5",
+        "flex items-center gap-1.5 rounded-container bg-[var(--color-card)]/90 border border-border backdrop-blur-sm px-2 py-1.5",
         className
       ),
       children: commands.map((command, i) => /* @__PURE__ */ jsxs(Box, { className: "flex flex-col items-center gap-0.5", children: [
@@ -26344,8 +26344,8 @@ function GameHud({
       className: cn(
         "relative z-10",
         positionMap[position],
-        transparent && "bg-gradient-to-b from-black/50 to-transparent",
-        position === "bottom" && "bg-gradient-to-t from-black/50 to-transparent",
+        transparent && "bg-gradient-to-b from-background/50 to-transparent",
+        position === "bottom" && "bg-gradient-to-t from-background/50 to-transparent",
         className
       ),
       children: /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
@@ -26503,8 +26503,8 @@ function DialogueBox({
       tabIndex: 0,
       role: "dialog",
       "aria-label": "Dialogue",
-      children: /* @__PURE__ */ jsx("div", { className: "mx-4 my-4 bg-[var(--color-card)] bg-opacity-95 border-2 border-gray-600 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-        dialogue.portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-4 border-r border-gray-700", children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx("div", { className: "mx-4 my-4 bg-[var(--color-card)] bg-opacity-95 border-2 border-border rounded-container overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+        dialogue.portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-4 border-r border-border", children: /* @__PURE__ */ jsx(
           "img",
           {
             src: dialogue.portrait,
@@ -26514,7 +26514,7 @@ function DialogueBox({
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-yellow-400 font-bold mb-2", children: dialogue.speaker }),
+          /* @__PURE__ */ jsx("div", { className: "text-warning font-bold mb-2", children: dialogue.speaker }),
           /* @__PURE__ */ jsxs("div", { className: "text-[var(--color-foreground)] text-lg leading-relaxed min-h-[60px]", children: [
             displayedText,
             isTyping && /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "\u258C" })
@@ -26524,9 +26524,9 @@ function DialogueBox({
             {
               type: "button",
               className: cn(
-                "block w-full text-left px-4 py-2 rounded transition-colors",
-                "hover:bg-[var(--color-surface,#374151)] focus:outline-none focus:ring-2 focus:ring-yellow-400",
-                selectedChoice === index ? "bg-[var(--color-surface,#374151)] text-yellow-400" : "bg-[var(--color-card)] text-[var(--color-foreground)]"
+                "block w-full text-left px-4 py-2 rounded-interactive transition-colors",
+                "hover:bg-[var(--color-surface,#374151)] focus:outline-none focus:ring-2 focus:ring-warning",
+                selectedChoice === index ? "bg-[var(--color-surface,#374151)] text-warning" : "bg-[var(--color-card)] text-[var(--color-foreground)]"
               ),
               onClick: (e) => {
                 e.stopPropagation();
@@ -26534,7 +26534,7 @@ function DialogueBox({
                 onChoice?.(choice);
               },
               children: [
-                /* @__PURE__ */ jsxs("span", { className: "text-gray-500 mr-2", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground mr-2", children: [
                   index + 1,
                   "."
                 ] }),
@@ -26543,7 +26543,7 @@ function DialogueBox({
             },
             index
           )) }),
-          !isTyping && !dialogue.choices?.length && /* @__PURE__ */ jsx("div", { className: "mt-4 text-gray-500 text-sm animate-pulse", children: "Press SPACE or click to continue..." })
+          !isTyping && !dialogue.choices?.length && /* @__PURE__ */ jsx("div", { className: "mt-4 text-muted-foreground text-sm animate-pulse", children: "Press SPACE or click to continue..." })
         ] })
       ] }) })
     }
@@ -26646,7 +26646,7 @@ function InventoryPanel({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "grid gap-1 bg-[var(--color-card)] p-2 rounded-lg border border-gray-700",
+        className: "grid gap-1 bg-[var(--color-card)] p-2 rounded-container border border-border",
         style: {
           gridTemplateColumns: `repeat(${safeColumns}, ${slotSize}px)`,
           gridTemplateRows: `repeat(${rows}, ${slotSize}px)`
@@ -26658,8 +26658,8 @@ function InventoryPanel({
             className: cn(
               "relative flex items-center justify-center",
               "bg-[var(--color-card)] border rounded transition-colors",
-              "hover:bg-[var(--color-surface,#374151)] focus:outline-none focus:ring-2 focus:ring-blue-500",
-              selectedSlot === index ? "border-yellow-400 bg-[var(--color-surface,#374151)]" : "border-gray-600"
+              "hover:bg-[var(--color-surface,#374151)] focus:outline-none focus:ring-2 focus:ring-info",
+              selectedSlot === index ? "border-warning bg-[var(--color-surface,#374151)]" : "border-muted"
             ),
             style: { width: slotSize, height: slotSize },
             onClick: () => handleSlotClick(index),
@@ -26678,8 +26678,8 @@ function InventoryPanel({
                   className: "w-8 h-8 object-contain",
                   style: { imageRendering: "pixelated" }
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-gray-600 rounded flex items-center justify-center text-xs text-gray-300", children: (item.type ?? item.name ?? "I").charAt(0).toUpperCase() }),
-              item.quantity > 1 && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 bg-black bg-opacity-70 text-white text-xs px-1 rounded-tl", children: item.quantity })
+              ) : /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-muted rounded-interactive flex items-center justify-center text-xs text-muted-foreground", children: (item.type ?? item.name ?? "I").charAt(0).toUpperCase() }),
+              item.quantity > 1 && /* @__PURE__ */ jsx("span", { className: "absolute bottom-0 right-0 bg-background/70 text-foreground text-xs px-1 rounded-tl", children: item.quantity })
             ] })
           },
           index
@@ -26689,7 +26689,7 @@ function InventoryPanel({
     showTooltips && hoveredItem && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "fixed z-50 bg-[var(--color-card)] border border-gray-600 rounded-lg p-2 shadow-lg pointer-events-none",
+        className: "fixed z-50 bg-[var(--color-card)] border border-border rounded-container p-2 shadow-elevation-card pointer-events-none",
         style: {
           left: tooltipPosition.x,
           top: tooltipPosition.y,
@@ -26697,8 +26697,8 @@ function InventoryPanel({
         },
         children: [
           /* @__PURE__ */ jsx("div", { className: "font-semibold text-[var(--color-foreground)]", children: hoveredItem.name || hoveredItem.type }),
-          hoveredItem.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-400 mt-1", children: hoveredItem.description }),
-          /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
+          hoveredItem.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: hoveredItem.description }),
+          /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: [
             "Quantity: ",
             hoveredItem.quantity
           ] })
@@ -26776,7 +26776,7 @@ function GameMenu({
               children: title
             }
           ),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "mt-2 text-lg text-gray-400 tracking-widest uppercase", children: subtitle })
+          subtitle && /* @__PURE__ */ jsx("p", { className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
           "button",
@@ -26784,10 +26784,10 @@ function GameMenu({
             onClick: () => handleOptionClick(option),
             disabled: option.disabled,
             className: cn(
-              "w-full py-4 px-8 rounded-xl border-2 font-bold text-lg",
+              "w-full py-4 px-8 rounded-container border-2 font-bold text-lg",
               "transition-all duration-200 transform",
               "hover:scale-105 active:scale-95",
-              "focus:outline-none focus:ring-4 focus:ring-white/25",
+              "focus:outline-none focus:ring-4 focus:ring-foreground/25",
               variantMap3[option.variant ?? "secondary"] ?? variantMap3.secondary,
               option.disabled && "opacity-50 cursor-not-allowed hover:scale-100"
             ),
@@ -26799,8 +26799,8 @@ function GameMenu({
           index
         )) }),
         /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl" })
+          /* @__PURE__ */ jsx("div", { className: "absolute top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
         ] })
       ]
     }
@@ -26813,9 +26813,9 @@ var init_GameMenu = __esm({
     init_cn();
     init_useEventBus();
     variantMap3 = {
-      primary: "bg-[var(--color-primary)] hover:bg-blue-500 text-[var(--color-primary-foreground)] border-blue-400 shadow-lg shadow-blue-500/25",
-      secondary: "bg-[var(--color-surface,#374151)] hover:bg-gray-600 text-[var(--color-foreground)] border-gray-500",
-      ghost: "bg-transparent hover:bg-white/10 text-[var(--color-foreground)] border-white/20"
+      primary: "bg-[var(--color-primary)] hover:bg-info text-[var(--color-primary-foreground)] border-info shadow-lg shadow-info/25",
+      secondary: "bg-[var(--color-surface,#374151)] hover:bg-muted text-[var(--color-foreground)] border-muted",
+      ghost: "bg-transparent hover:bg-foreground/10 text-[var(--color-foreground)] border-foreground/20"
     };
     GameMenu.displayName = "GameMenu";
   }
@@ -26883,13 +26883,13 @@ function GameOverScreen({
             children: title
           }
         ),
-        message && /* @__PURE__ */ jsx("p", { className: "text-xl text-gray-300 mb-8 text-center max-w-md", children: message }),
-        isNewHighScore && /* @__PURE__ */ jsx("div", { className: "mb-6 px-6 py-2 bg-yellow-500/20 border-2 border-yellow-500 rounded-full animate-pulse", children: /* @__PURE__ */ jsx("span", { className: "text-yellow-400 font-bold text-lg tracking-wide", children: "\u{1F3C6} NEW HIGH SCORE! \u{1F3C6}" }) }),
+        message && /* @__PURE__ */ jsx("p", { className: "text-xl text-muted-foreground mb-8 text-center max-w-md", children: message }),
+        isNewHighScore && /* @__PURE__ */ jsx("div", { className: "mb-6 px-6 py-2 bg-warning/20 border-2 border-warning rounded-container animate-pulse", children: /* @__PURE__ */ jsx("span", { className: "text-warning font-bold text-lg tracking-wide", children: "\u{1F3C6} NEW HIGH SCORE! \u{1F3C6}" }) }),
         stats.length > 0 && /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "mb-8 p-6 rounded-xl border-2 bg-black/30",
+              "mb-8 p-6 rounded-container border-2 bg-background/30",
               colors.accent
             ),
             children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: stats.map((stat, index) => {
@@ -26898,7 +26898,7 @@ function GameOverScreen({
                 displayValue = formatTime2(displayValue);
               }
               return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsx("div", { className: "text-gray-400 text-sm mb-1", children: stat.label }),
+                /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm mb-1", children: stat.label }),
                 /* @__PURE__ */ jsxs("div", { className: "text-[var(--color-foreground)] text-2xl font-bold flex items-center justify-center gap-2", children: [
                   stat.icon && /* @__PURE__ */ jsx("span", { children: stat.icon }),
                   /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: displayValue })
@@ -26912,10 +26912,10 @@ function GameOverScreen({
           {
             onClick: () => handleActionClick(action),
             className: cn(
-              "px-8 py-4 rounded-xl border-2 font-bold text-lg",
+              "px-8 py-4 rounded-container border-2 font-bold text-lg",
               "transition-all duration-200",
               "hover:scale-105 active:scale-95",
-              "focus:outline-none focus:ring-4 focus:ring-white/25",
+              "focus:outline-none focus:ring-4 focus:ring-foreground/25",
               buttonVariants[action.variant ?? "secondary"]
             ),
             children: action.label
@@ -26934,25 +26934,25 @@ var init_GameOverScreen = __esm({
     init_useEventBus();
     variantColors = {
       victory: {
-        bg: "from-green-900/90 to-emerald-950/90",
-        title: "text-green-400",
-        accent: "border-green-500"
+        bg: "from-success/90 to-success/90",
+        title: "text-success",
+        accent: "border-success"
       },
       defeat: {
-        bg: "from-red-900/90 to-gray-950/90",
-        title: "text-red-400",
-        accent: "border-red-500"
+        bg: "from-error/90 to-background/90",
+        title: "text-error",
+        accent: "border-error"
       },
       neutral: {
-        bg: "from-gray-900/90 to-gray-950/90",
-        title: "text-white",
-        accent: "border-gray-500"
+        bg: "from-muted/90 to-background/90",
+        title: "text-foreground",
+        accent: "border-muted"
       }
     };
     buttonVariants = {
-      primary: "bg-[var(--color-primary)] hover:bg-blue-500 text-[var(--color-primary-foreground)] border-blue-400",
-      secondary: "bg-[var(--color-surface,#374151)] hover:bg-gray-600 text-[var(--color-foreground)] border-gray-500",
-      ghost: "bg-transparent hover:bg-white/10 text-[var(--color-foreground)] border-white/20"
+      primary: "bg-[var(--color-primary)] hover:bg-info text-[var(--color-primary-foreground)] border-info",
+      secondary: "bg-[var(--color-surface,#374151)] hover:bg-muted text-[var(--color-foreground)] border-muted",
+      ghost: "bg-transparent hover:bg-foreground/10 text-[var(--color-foreground)] border-foreground/20"
     };
     GameOverScreen.displayName = "GameOverScreen";
   }
@@ -27186,7 +27186,7 @@ function PlatformerCanvas({
     {
       ref: canvasRef,
       style: { width: canvasWidth, height: canvasHeight },
-      className: cn("block rounded-lg border border-white/10", className),
+      className: cn("block rounded-container border border-border/10", className),
       "data-testid": "platformer-canvas",
       tabIndex: 0
     }
@@ -34853,7 +34853,7 @@ function DebuggerBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
             /* @__PURE__ */ jsx(Icon, { icon: Bug, size: "sm" }),
@@ -34866,11 +34866,11 @@ function DebuggerBoard({
           const isFlagged = flaggedLines.has(line.id);
           let lineStyle = "";
           if (submitted) {
-            if (line.isBug && isFlagged) lineStyle = "bg-green-50 dark:bg-green-950";
-            else if (line.isBug && !isFlagged) lineStyle = "bg-yellow-50 dark:bg-yellow-950";
-            else if (!line.isBug && isFlagged) lineStyle = "bg-red-50 dark:bg-red-950";
+            if (line.isBug && isFlagged) lineStyle = "bg-success/10";
+            else if (line.isBug && !isFlagged) lineStyle = "bg-warning/10";
+            else if (!line.isBug && isFlagged) lineStyle = "bg-error/10";
           } else if (isFlagged) {
-            lineStyle = "bg-red-50 dark:bg-red-950";
+            lineStyle = "bg-error/10";
           }
           return /* @__PURE__ */ jsxs(
             HStack,
@@ -34883,8 +34883,8 @@ function DebuggerBoard({
                 /* @__PURE__ */ jsx(Box, { className: "w-10 flex-shrink-0 flex items-center justify-center border-r border-border text-muted-foreground", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: i + 1 }) }),
                 /* @__PURE__ */ jsx(Box, { className: "flex-1 px-3 py-1.5 font-mono text-sm whitespace-pre", children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "font-mono text-sm", children: line.content }) }),
                 /* @__PURE__ */ jsxs(Box, { className: "w-8 flex-shrink-0 flex items-center justify-center", children: [
-                  isFlagged && /* @__PURE__ */ jsx(Icon, { icon: Bug, size: "xs", className: "text-red-600" }),
-                  submitted && line.isBug && !isFlagged && /* @__PURE__ */ jsx(Icon, { icon: Bug, size: "xs", className: "text-yellow-600" })
+                  isFlagged && /* @__PURE__ */ jsx(Icon, { icon: Bug, size: "xs", className: "text-error" }),
+                  submitted && line.isBug && !isFlagged && /* @__PURE__ */ jsx(Icon, { icon: Bug, size: "xs", className: "text-warning" })
                 ] })
               ]
             },
@@ -34899,7 +34899,7 @@ function DebuggerBoard({
               {
                 icon: flaggedLines.has(line.id) ? CheckCircle : XCircle,
                 size: "xs",
-                className: flaggedLines.has(line.id) ? "text-green-600 mt-0.5" : "text-yellow-600 mt-0.5"
+                className: flaggedLines.has(line.id) ? "text-success mt-0.5" : "text-warning mt-0.5"
               }
             ),
             /* @__PURE__ */ jsxs(VStack, { gap: "none", children: [
@@ -34908,7 +34908,7 @@ function DebuggerBoard({
             ] })
           ] }, line.id))
         ] }) }),
-        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-yellow-500", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
+        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "center", children: [
           !submitted ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, disabled: flaggedLines.size === 0, children: [
             /* @__PURE__ */ jsx(Icon, { icon: Send, size: "sm" }),
@@ -35392,12 +35392,12 @@ function DialogueBubble({
     "div",
     {
       className: cn(
-        "flex items-start gap-3 rounded-lg bg-black/80 backdrop-blur-sm px-4 py-3 border border-white/10",
+        "flex items-start gap-3 rounded-container bg-background/80 backdrop-blur-sm px-4 py-3 border border-border/10",
         position === "top" ? "rounded-bl-none" : "rounded-tl-none",
         className
       ),
       children: [
-        portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-yellow-400/60", children: /* @__PURE__ */ jsx(
+        portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsx(
           "img",
           {
             src: portrait,
@@ -35406,8 +35406,8 @@ function DialogueBubble({
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-          speaker && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-yellow-400", children: speaker }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-foreground)] leading-relaxed", children: text })
+          speaker && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-warning", children: speaker }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground leading-relaxed", children: text })
         ] })
       ]
     }
@@ -35726,7 +35726,7 @@ function LinearView({
   className
 }) {
   const currentIdx = trait.states.indexOf(trait.currentState);
-  return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-lg bg-card border border-border", className), gap: "sm", children: [
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-container bg-card border border-border", className), gap: "sm", children: [
     trait.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: trait.description }),
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
@@ -35748,10 +35748,10 @@ function LinearView({
           {
             display: "inline-flex",
             className: cn(
-              "items-center justify-center rounded-full px-3 py-1 border-2 transition-all",
+              "items-center justify-center rounded-pill px-3 py-1 border-2 transition-all",
               SIZE_CONFIG2[size || "md"].fontSize,
               isDone && "bg-success/20 border-success text-success",
-              isCurrent && "bg-primary/20 border-primary text-primary font-bold shadow-md shadow-primary/20",
+              isCurrent && "bg-primary/20 border-primary text-primary font-bold shadow-elevation-card shadow-primary/20",
               !isDone && !isCurrent && "bg-muted border-border text-muted-foreground"
             ),
             children: [
@@ -35773,7 +35773,7 @@ function CompactView({
   const { t } = useTranslate();
   const config = SIZE_CONFIG2[size || "md"];
   const currentTransitions = trait.transitions.filter((t2) => t2.from === trait.currentState);
-  return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-lg bg-card border border-border", className), gap: "sm", children: [
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-container bg-card border border-border", className), gap: "sm", children: [
     /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground font-bold", children: trait.name }),
       /* @__PURE__ */ jsx(StateIndicator, { state: trait.currentState, size: "sm", stateStyles })
@@ -35809,7 +35809,7 @@ function FullView({
   const { t } = useTranslate();
   const config = SIZE_CONFIG2[size || "md"];
   const currentTransitions = trait.transitions.filter((t2) => t2.from === trait.currentState);
-  return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-lg bg-card border border-border", className), gap: "sm", children: [
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("p-3 rounded-container bg-card border border-border", className), gap: "sm", children: [
     /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between", children: [
       /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground font-bold", children: trait.name }),
       /* @__PURE__ */ jsx(StateIndicator, { state: trait.currentState, size: "sm", stateStyles })
@@ -35823,9 +35823,9 @@ function FullView({
         {
           display: "flex",
           className: cn(
-            "items-center justify-center rounded-md border-2 transition-all px-2",
+            "items-center justify-center rounded-container border-2 transition-all px-2",
             config.nodeSize,
-            isCurrent && "bg-primary/20 border-primary shadow-md shadow-primary/20",
+            isCurrent && "bg-primary/20 border-primary shadow-elevation-card shadow-primary/20",
             !isCurrent && hasOutgoing && "bg-muted border-border hover:border-muted-foreground",
             !isCurrent && !hasOutgoing && "bg-background border-border opacity-60",
             onStateClick && "cursor-pointer"
@@ -36255,7 +36255,7 @@ function EventHandlerBoard({
         backgroundPosition: "center"
       },
       children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-foreground", children: entity.title }),
           /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: entity.description }),
@@ -36270,7 +36270,7 @@ function EventHandlerBoard({
             Box,
             {
               className: cn(
-                "p-3 rounded-lg border-2 cursor-pointer transition-all hover:scale-105",
+                "p-3 rounded-container border-2 cursor-pointer transition-all hover:scale-105",
                 selectedObjectId === obj.id ? "border-primary bg-primary/10" : "border-border bg-card hover:border-muted-foreground"
               ),
               onClick: () => setSelectedObjectId(obj.id),
@@ -36292,10 +36292,10 @@ function EventHandlerBoard({
           }
         ),
         eventLog.length > 0 && /* @__PURE__ */ jsx(EventLog, { entries: eventLog }),
-        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-lg bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: entity.successMessage || t("eventHandler.chainComplete") }) }),
+        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: entity.successMessage || t("eventHandler.chainComplete") }) }),
         playState === "fail" && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-lg bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-foreground font-medium", children: t(encourageKey) }) }),
-          showHint && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-lg bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
+          /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-foreground font-medium", children: t(encourageKey) }) }),
+          showHint && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-accent font-bold shrink-0", children: "\u{1F4A1} " + t("game.hint") + ":" }),
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: entity.hint })
           ] }) })
@@ -39341,7 +39341,7 @@ function MiniMap({
     "div",
     {
       className: cn(
-        "relative inline-block border border-white/20 rounded",
+        "relative inline-block border border-border/20 rounded-container",
         className
       ),
       children: /* @__PURE__ */ jsx(
@@ -39561,7 +39561,7 @@ function NegotiatorBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.description }),
@@ -39607,7 +39607,7 @@ function NegotiatorBoard({
             /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: "vs" }),
             /* @__PURE__ */ jsx(Typography, { variant: "caption", children: getActionLabel(round.opponentAction) }),
             /* @__PURE__ */ jsx(Icon, { icon: ArrowRight, size: "xs" }),
-            /* @__PURE__ */ jsxs(Typography, { variant: "caption", weight: "bold", className: "text-green-600", children: [
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", weight: "bold", className: "text-success", children: [
               "+",
               round.playerPayoff
             ] }),
@@ -39618,7 +39618,7 @@ function NegotiatorBoard({
           ] }, round.round))
         ] }) }),
         isComplete && /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", children: [
-          /* @__PURE__ */ jsx(Icon, { icon: CheckCircle, size: "lg", className: won ? "text-green-600" : "text-red-600" }),
+          /* @__PURE__ */ jsx(Icon, { icon: CheckCircle, size: "lg", className: won ? "text-success" : "text-error" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "bold", children: won ? entity.successMessage ?? t("negotiator.success") : entity.failMessage ?? t("negotiator.failed") }),
           /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
             t("negotiator.finalScore"),
@@ -39628,7 +39628,7 @@ function NegotiatorBoard({
             entity.targetScore
           ] })
         ] }) }),
-        showHint && entity.hint && !won && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-yellow-500", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
+        showHint && entity.hint && !won && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
         isComplete && !won && /* @__PURE__ */ jsx(HStack, { justify: "center", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleReset, children: t("negotiator.playAgain") }) })
       ] })
     }
@@ -40301,17 +40301,17 @@ function ResourceCounter({
     "div",
     {
       className: cn(
-        "inline-flex items-center rounded-md",
-        "bg-[var(--color-card)]/80 border border-gray-600 font-medium text-[var(--color-foreground)]",
+        "inline-flex items-center rounded-container",
+        "bg-card/80 border border-muted font-medium text-foreground",
         sizes.wrapper,
         className
       ),
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
         /* @__PURE__ */ jsxs("span", { className: cn("font-bold tabular-nums", color), children: [
           value,
-          max != null && /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+          max != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
             "/",
             max
           ] })
@@ -42258,7 +42258,7 @@ function TraitSlot({
       display: "flex",
       position: "relative",
       className: cn(
-        "items-center justify-center rounded-lg transition-all duration-200",
+        "items-center justify-center rounded-container transition-all duration-200 bg-card/50",
         !locked && "cursor-pointer",
         locked && "cursor-not-allowed opacity-50",
         isEmpty && !locked && "border-2 border-dashed border-border hover:border-muted-foreground",
@@ -42274,7 +42274,7 @@ function TraitSlot({
       style: {
         width: config.box,
         height: config.box,
-        backgroundColor: catColor?.bg || "rgba(30,41,59,0.5)",
+        backgroundColor: catColor?.bg || void 0,
         borderColor: isDragOver ? void 0 : feedback === "correct" ? "var(--color-success)" : feedback === "wrong" ? "var(--color-error)" : catColor?.border || void 0
       },
       onClick: handleClick,
@@ -42303,7 +42303,7 @@ function TraitSlot({
             Box,
             {
               position: "absolute",
-              className: "-top-1.5 -right-1.5 w-4 h-4 bg-error rounded-full flex items-center justify-center cursor-pointer hover:bg-error/80 transition-colors",
+              className: "-top-1.5 -right-1.5 w-4 h-4 bg-error rounded-pill flex items-center justify-center cursor-pointer hover:bg-error/80 transition-colors",
               onClick: handleRemove,
               children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-foreground text-xs leading-none", children: "\xD7" })
             }
@@ -42313,14 +42313,14 @@ function TraitSlot({
           Box,
           {
             position: "absolute",
-            className: "-bottom-1 -left-1 w-4 h-4 bg-card rounded-full flex items-center justify-center border border-border",
+            className: "-bottom-1 -left-1 w-4 h-4 bg-card rounded-pill flex items-center justify-center border border-border",
             children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground text-xs", children: slotNumber })
           }
         ),
         showTooltip && isHovered && itemMachine && !isEmpty && equippedItem && /* @__PURE__ */ jsxs(
           Box,
           {
-            className: "p-3 bg-background border border-border rounded-lg shadow-xl",
+            className: "p-3 bg-background border border-border rounded-container shadow-xl",
             style: {
               ...getTooltipStyle(),
               minWidth: 200,
@@ -42570,12 +42570,12 @@ function SequencerBoard({
         backgroundPosition: "center"
       },
       children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-foreground", children: entity.title }),
           /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: entity.description })
         ] }),
-        showHint && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-lg bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
+        showHint && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-accent font-bold shrink-0", children: "\u{1F4A1} " + t("game.hint") + ":" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: entity.hint })
         ] }) }),
@@ -42613,8 +42613,8 @@ function SequencerBoard({
             label: t("sequencer.dragActions")
           }
         ),
-        hasFeedback && playState === "idle" && attempts > 0 && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-lg bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: t(encourageKey) }) }),
-        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-lg bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: entity.successMessage || t("sequencer.levelComplete") }) }),
+        hasFeedback && playState === "idle" && attempts > 0 && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: t(encourageKey) }) }),
+        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: entity.successMessage || t("sequencer.levelComplete") }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(
             Button,
@@ -43290,7 +43290,7 @@ function SimulationCanvas({
       ref: canvasRef,
       width,
       height,
-      className: "rounded-md block max-w-full h-auto"
+      className: "rounded-container block max-w-full h-auto"
     }
   ) });
 }
@@ -43498,7 +43498,7 @@ function SimulatorBoard({
         backgroundPosition: "center"
       },
       children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", className: "p-4", children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsx(Card, { className: "p-4", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h4", weight: "bold", children: entity.title }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.description })
@@ -43549,8 +43549,8 @@ function SimulatorBoard({
             entity.outputUnit
           ] }),
           submitted && /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsx(Icon, { icon: isCorrect ? CheckCircle : XCircle, size: "sm", className: isCorrect ? "text-green-600" : "text-red-600" }),
-            /* @__PURE__ */ jsx(Typography, { variant: "body", className: isCorrect ? "text-green-600" : "text-red-600", children: isCorrect ? entity.successMessage ?? t("simulator.correct") : entity.failMessage ?? t("simulator.incorrect") })
+            /* @__PURE__ */ jsx(Icon, { icon: isCorrect ? CheckCircle : XCircle, size: "sm", className: isCorrect ? "text-success" : "text-error" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body", className: isCorrect ? "text-success" : "text-error", children: isCorrect ? entity.successMessage ?? t("simulator.correct") : entity.failMessage ?? t("simulator.incorrect") })
           ] }),
           /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
             t("simulator.target"),
@@ -43563,7 +43563,7 @@ function SimulatorBoard({
             ")"
           ] })
         ] }) }),
-        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-yellow-500", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
+        showHint && entity.hint && /* @__PURE__ */ jsx(Card, { className: "p-4 border-l-4 border-l-warning", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: entity.hint }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", justify: "center", children: [
           !submitted ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleSubmit, children: [
             /* @__PURE__ */ jsx(Icon, { icon: Play, size: "sm" }),
@@ -44075,7 +44075,7 @@ function StateNode2({
       position: "absolute",
       display: "flex",
       className: cn(
-        "items-center justify-center rounded-full border-3 transition-all cursor-pointer select-none",
+        "items-center justify-center rounded-pill border-3 transition-all cursor-pointer select-none",
         "min-w-[80px] h-[80px] px-3",
         isCurrent && "bg-primary/20 border-primary shadow-lg shadow-primary/30 scale-110",
         isSelected && !isCurrent && "bg-accent/20 border-accent ring-2 ring-accent/50",
@@ -44388,7 +44388,7 @@ function StateArchitectBoard({
         backgroundPosition: "center"
       },
       children: [
-        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-lg bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
+        entity.headerImage && !headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 overflow-hidden rounded-container", children: /* @__PURE__ */ jsx("img", { src: entity.headerImage, alt: "", onError: () => setHeaderError(true), className: "w-full h-full object-cover" }) }) : entity.headerImage && headerError ? /* @__PURE__ */ jsx(Box, { className: "w-full h-32 rounded-container bg-gradient-to-br from-muted to-accent opacity-60" }) : null,
         /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-foreground", children: entity.title }),
           /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground", children: entity.description }),
@@ -44407,7 +44407,7 @@ function StateArchitectBoard({
               Box,
               {
                 position: "relative",
-                className: "rounded-lg border border-border bg-background overflow-hidden",
+                className: "rounded-container border border-border bg-background overflow-hidden",
                 style: { width: GRAPH_W, height: GRAPH_H },
                 children: [
                   /* @__PURE__ */ jsxs(
@@ -44466,7 +44466,7 @@ function StateArchitectBoard({
                 children: selectedState ? t("stateArchitect.addTransition", { state: selectedState }) : t("stateArchitect.addTransitionPrompt")
               }
             ) }),
-            transitions.length > 0 && /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "p-3 rounded-lg bg-muted/50 border border-border", children: [
+            transitions.length > 0 && /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "p-3 rounded-container bg-muted/50 border border-border", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground font-medium", children: t("stateArchitect.transitions", { count: transitions.length }) + ":" }),
               transitions.map((t2) => /* @__PURE__ */ jsxs(HStack, { className: "items-center text-xs", gap: "xs", children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-foreground", children: t2.from }),
@@ -44500,7 +44500,7 @@ function StateArchitectBoard({
                 variables
               }
             ),
-            testResults.length > 0 && /* @__PURE__ */ jsxs(VStack, { className: "p-3 rounded-lg bg-card border border-border", gap: "xs", children: [
+            testResults.length > 0 && /* @__PURE__ */ jsxs(VStack, { className: "p-3 rounded-container bg-card border border-border", gap: "xs", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-muted-foreground font-medium", children: t("stateArchitect.testResults") + ":" }),
               testResults.map((r, i) => /* @__PURE__ */ jsxs(HStack, { className: "items-center text-xs", gap: "xs", children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "caption", className: r.passed ? "text-success" : "text-error", children: r.passed ? "\u2714" : "\u2717" }),
@@ -44511,10 +44511,10 @@ function StateArchitectBoard({
             entity.showCodeView !== false && /* @__PURE__ */ jsx(CodeView, { data: codeData, label: "View Code" })
           ] })
         ] }),
-        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-lg bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: entity.successMessage || t("stateArchitect.allPassed") }) }),
+        playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: entity.successMessage || t("stateArchitect.allPassed") }) }),
         playState === "fail" && /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
-          /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-lg bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-foreground font-medium", children: t(ENCOURAGEMENT_KEYS3[Math.min(attempts - 1, ENCOURAGEMENT_KEYS3.length - 1)] ?? ENCOURAGEMENT_KEYS3[0]) }) }),
-          attempts >= 3 && entity.hint && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-lg bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
+          /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-warning/10 border border-warning/30 text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-foreground font-medium", children: t(ENCOURAGEMENT_KEYS3[Math.min(attempts - 1, ENCOURAGEMENT_KEYS3.length - 1)] ?? ENCOURAGEMENT_KEYS3[0]) }) }),
+          attempts >= 3 && entity.hint && /* @__PURE__ */ jsx(Box, { className: "p-3 rounded-container bg-accent/10 border border-accent/30", children: /* @__PURE__ */ jsxs(HStack, { className: "items-start", gap: "xs", children: [
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-accent font-bold shrink-0", children: "\u{1F4A1} " + t("game.hint") + ":" }),
             /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-foreground", children: entity.hint })
           ] }) })
@@ -44620,7 +44620,7 @@ function StatusEffect({
       "div",
       {
         className: cn(
-          "relative flex items-center justify-center rounded border-2",
+          "relative flex items-center justify-center rounded-interactive border-2",
           sizes.container,
           variantStyles9[variant]
         ),
@@ -44631,7 +44631,7 @@ function StatusEffect({
             "span",
             {
               className: cn(
-                "absolute bottom-0 left-0 right-0 text-center font-mono font-bold text-white bg-black/60 leading-tight",
+                "absolute bottom-0 left-0 right-0 text-center font-mono font-bold text-foreground bg-background/60 leading-tight",
                 sizes.timer
               ),
               children: formatDuration(duration)
@@ -44644,7 +44644,7 @@ function StatusEffect({
       "span",
       {
         className: cn(
-          "absolute flex items-center justify-center rounded-full bg-[var(--color-card)] text-[var(--color-foreground)] font-bold leading-none",
+          "absolute flex items-center justify-center rounded-full bg-card text-foreground font-bold leading-none",
           sizes.badge
         ),
         children: stacks
@@ -44663,9 +44663,9 @@ var init_StatusEffect = __esm({
       lg: { container: "w-12 h-12", icon: "text-lg", badge: "text-sm -top-1.5 -right-1.5 w-6 h-6", timer: "text-xs" }
     };
     variantStyles9 = {
-      buff: "border-green-500 bg-green-500/20",
-      debuff: "border-red-500 bg-red-500/20",
-      neutral: "border-gray-500 bg-gray-500/20"
+      buff: "border-success bg-success/20",
+      debuff: "border-error bg-error/20",
+      neutral: "border-muted bg-muted/20"
     };
     StatusEffect.displayName = "StatusEffect";
   }
@@ -45278,12 +45278,12 @@ function TimerDisplay({
     "div",
     {
       className: cn(
-        "inline-flex items-center justify-center rounded-lg",
-        "bg-[var(--color-card)]/80 border border-gray-600 font-mono font-bold tabular-nums",
+        "inline-flex items-center justify-center rounded-container",
+        "bg-card/80 border border-muted font-mono font-bold tabular-nums",
         sizeMap17[size],
-        running && "border-green-500/50",
-        isLow && "text-red-400 border-red-500/50 animate-pulse",
-        !isLow && "text-[var(--color-foreground)]",
+        running && "border-success/50",
+        isLow && "text-error border-error/50 animate-pulse",
+        !isLow && "text-foreground",
         className
       ),
       children: formatTime3(seconds, format)
@@ -46007,8 +46007,8 @@ function XPBar({
       "span",
       {
         className: cn(
-          "flex-shrink-0 rounded-md font-bold",
-          "bg-indigo-600 text-white border border-indigo-400",
+          "flex-shrink-0 rounded-interactive font-bold",
+          "bg-accent text-foreground border border-accent",
           sizes.badge
         ),
         children: [
@@ -46022,7 +46022,7 @@ function XPBar({
         "div",
         {
           className: cn(
-            "relative w-full overflow-hidden rounded-full bg-gray-700 border border-gray-600",
+            "relative w-full overflow-hidden rounded-full bg-muted border border-muted",
             sizes.bar
           ),
           children: /* @__PURE__ */ jsx(
@@ -46030,7 +46030,7 @@ function XPBar({
             {
               className: cn(
                 "absolute inset-y-0 left-0 rounded-full",
-                "bg-gradient-to-r from-indigo-600 to-purple-500",
+                "bg-gradient-to-r from-accent to-info",
                 animated && "transition-all duration-500 ease-out"
               ),
               style: { width: `${percentage}%` }
@@ -46038,7 +46038,7 @@ function XPBar({
           )
         }
       ),
-      showLabel && /* @__PURE__ */ jsxs("span", { className: cn("text-gray-400 tabular-nums", sizes.text), children: [
+      showLabel && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground tabular-nums", sizes.text), children: [
         current,
         " / ",
         max,
@@ -48335,7 +48335,7 @@ function CollapsibleSection({ title, expanded, onToggle, children, className })
 CollapsibleSection.displayName = "CollapsibleSection";
 function EditorSlider({ label, value, min, max, step = 0.1, onChange, className }) {
   return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-muted-foreground", children: label }),
     /* @__PURE__ */ jsx(Box, { className: "flex-1", children: /* @__PURE__ */ jsx(
       "input",
       {
@@ -48345,22 +48345,22 @@ function EditorSlider({ label, value, min, max, step = 0.1, onChange, className
         step,
         value,
         onChange: (e) => onChange(parseFloat(e.target.value)),
-        className: "w-full h-1.5 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
+        className: "w-full h-1.5 bg-muted rounded-interactive appearance-none cursor-pointer accent-primary"
       }
     ) }),
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[40px] text-right text-gray-400", children: typeof step === "number" && step < 1 ? value.toFixed(1) : value })
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[40px] text-right text-muted-foreground", children: typeof step === "number" && step < 1 ? value.toFixed(1) : value })
   ] });
 }
 EditorSlider.displayName = "EditorSlider";
 function EditorSelect({ label, value, options, onChange, className }) {
   return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-muted-foreground", children: label }),
     /* @__PURE__ */ jsx(Box, { className: "flex-1", children: /* @__PURE__ */ jsx(
       "select",
       {
         value,
         onChange: (e) => onChange(e.target.value),
-        className: "w-full px-2 py-1 text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded cursor-pointer",
+        className: "w-full px-2 py-1 text-xs bg-muted text-foreground border border-muted rounded cursor-pointer",
         children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
       }
     ) })
@@ -48369,14 +48369,14 @@ function EditorSelect({ label, value, options, onChange, className }) {
 EditorSelect.displayName = "EditorSelect";
 function EditorCheckbox({ label, checked, onChange, className }) {
   return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-muted-foreground", children: label }),
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       "input",
       {
         type: "checkbox",
         checked,
         onChange: (e) => onChange(e.target.checked),
-        className: "w-4 h-4 accent-blue-500 cursor-pointer"
+        className: "w-4 h-4 accent-primary cursor-pointer"
       }
     ) })
   ] });
@@ -48384,7 +48384,7 @@ function EditorCheckbox({ label, checked, onChange, className }) {
 EditorCheckbox.displayName = "EditorCheckbox";
 function EditorTextInput({ label, value, onChange, placeholder, className }) {
   return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-gray-300", children: label }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "min-w-[80px] text-muted-foreground", children: label }),
     /* @__PURE__ */ jsx(Box, { className: "flex-1", children: /* @__PURE__ */ jsx(
       "input",
       {
@@ -48392,30 +48392,30 @@ function EditorTextInput({ label, value, onChange, placeholder, className }) {
         value,
         onChange: (e) => onChange(e.target.value),
         placeholder,
-        className: "w-full px-2 py-1 text-xs bg-gray-700 text-gray-200 border border-gray-600 rounded"
+        className: "w-full px-2 py-1 text-xs bg-muted text-foreground border border-muted rounded"
       }
     ) })
   ] });
 }
 EditorTextInput.displayName = "EditorTextInput";
 function StatusBar({ hoveredTile, mode, gridSize, unitCount, featureCount, className }) {
-  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className: `px-3 py-1.5 bg-gray-800 border-t border-gray-700 ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", className: `px-3 py-1.5 bg-background border-t border-border ${className ?? ""}`, children: [
     /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", children: mode }),
-    /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-400", children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
       "Tile: ",
       hoveredTile ? `(${hoveredTile.x}, ${hoveredTile.y})` : "\u2014"
     ] }),
-    gridSize && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-500", children: [
+    gridSize && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
       "Grid: ",
       gridSize.width,
       "x",
       gridSize.height
     ] }),
-    unitCount !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-500", children: [
+    unitCount !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
       "Units: ",
       unitCount
     ] }),
-    featureCount !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-gray-500", children: [
+    featureCount !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-muted-foreground", children: [
       "Features: ",
       featureCount
     ] })
@@ -48427,8 +48427,8 @@ function TerrainPalette({ terrains, selectedTerrain, onSelect, className }) {
     Box,
     {
       onClick: () => onSelect(terrain),
-      className: `w-8 h-8 rounded cursor-pointer border-2 transition-all ${selectedTerrain === terrain ? "border-white scale-110 shadow-lg" : "border-gray-600 hover:border-gray-400"}`,
-      style: { backgroundColor: TERRAIN_COLORS[terrain] || "#555" },
+      className: `w-8 h-8 rounded cursor-pointer border-2 transition-all ${selectedTerrain === terrain ? "border-foreground scale-110 shadow-lg" : "border-muted hover:border-muted-foreground"}`,
+      style: { backgroundColor: TERRAIN_COLORS[terrain] || "var(--color-muted)" },
       title: terrain
     },
     terrain