@ebtgames/theme 0.1.4 → 0.1.6

package/dist/index.js

@@ -43,7 +43,9 @@ var colors = defineTokens.colors({
   // Border Colors (neutral gray)
   border: {
     subtle: { value: "var(--color-border-subtle)" },
-    strong: { value: "var(--color-border-strong)" }
+    strong: { value: "var(--color-border-strong)" },
+    soft: { value: "var(--color-border-soft)" },
+    contrast: { value: "var(--color-border-contrast)" }
   },
   // Status Colors
   status: {
@@ -62,6 +64,8 @@ var colors = defineTokens.colors({
     // Active
     heavy: { value: "var(--color-overlay-heavy)" },
     // Emphasis
+    primarySoft: { value: "var(--color-overlay-primary-soft)" },
+    secondarySoft: { value: "var(--color-overlay-secondary-soft)" },
     error: { value: "var(--color-overlay-error)" },
     // Error tint
     backdrop: {
@@ -154,6 +158,11 @@ var shadows = defineTokens5.shadows({
   md: { value: "var(--shadow-md)" },
   lg: { value: "var(--shadow-lg)" },
   xl: { value: "var(--shadow-xl)" },
+  elevation: {
+    1: { value: "var(--shadow-elevation-1)" },
+    2: { value: "var(--shadow-elevation-2)" },
+    3: { value: "var(--shadow-elevation-3)" }
+  },
   // Glow shadows (primary - purple)
   glow: {
     primary: { value: "var(--shadow-glow-primary)" },
@@ -178,6 +187,13 @@ var shadows = defineTokens5.shadows({
     primary: { value: "var(--shadow-inset-primary)" },
     subtle: { value: "var(--shadow-inset-subtle)" },
     deep: { value: "var(--shadow-inset-deep)" }
+  },
+  focus: {
+    primary: { value: "var(--shadow-focus-ring-primary)" },
+    secondary: { value: "var(--shadow-focus-ring-secondary)" }
+  },
+  press: {
+    inset: { value: "var(--shadow-press-inset)" }
   }
 });
 
@@ -210,7 +226,9 @@ var semanticColors = defineSemanticTokens.colors({
   // Border (for buttons, inputs, cards)
   border: {
     subtle: { value: "{colors.border.subtle}" },
-    strong: { value: "{colors.border.strong}" }
+    strong: { value: "{colors.border.strong}" },
+    control: { value: "{colors.border.soft}" },
+    emphasis: { value: "{colors.border.contrast}" }
   }
 });
 
@@ -219,16 +237,21 @@ import { defineSemanticTokens as defineSemanticTokens2 } from "@chakra-ui/react"
 var semanticShadows = defineSemanticTokens2.shadows({
   // Button shadows
   button: {
-    base: { value: "{shadows.sm}, {shadows.inset.subtle}" },
-    hover: { value: "{shadows.md}, {shadows.glow.primary-lg}" }
+    base: { value: "{shadows.elevation.1}, {shadows.inset.subtle}" },
+    hover: { value: "{shadows.elevation.2}, {shadows.inset.subtle}" },
+    active: { value: "{shadows.press.inset}" }
+  },
+  // Input shadows
+  input: {
+    focus: { value: "{shadows.focus.primary}" }
   },
   // Cell shadows (most complex - 4-layer stack for selected state)
   cell: {
     selected: {
-      value: "{shadows.inset.primary}, 0 0 0 {borderWidths.base} rgba(124, 91, 214, 0.55), {shadows.glow.primary}, 0 4px 12px rgba(124, 91, 214, 0.2)"
+      value: "{shadows.inset.primary}, 0 0 0 {borderWidths.base} rgba(155, 124, 255, 0.52), {shadows.glow.primary}, 0 4px 12px rgba(155, 124, 255, 0.18)"
     },
     conflict: {
-      value: "{shadows.glow.error}, 0 2px 6px rgba(216, 82, 77, 0.3)"
+      value: "{shadows.glow.error}, 0 2px 6px rgba(226, 102, 98, 0.26)"
     }
   }
 });
@@ -362,57 +385,62 @@ import { defineGlobalStyles } from "@chakra-ui/react";
 
 // src/cssVariables.ts
 var colorVariables = {
-  // Surface Colors (deep purple monochrome)
-  "--color-surface-0": "#1B0F26",
+  // Surface Colors (neutral dark foundation)
+  "--color-surface-0": "#0F1216",
   // Base background - darkest
-  "--color-surface-1": "#24122F",
+  "--color-surface-1": "#18202A",
   // Elevated surfaces
-  "--color-surface-2": "#2B173A",
+  "--color-surface-2": "#222C38",
   // Cards/panels
-  "--color-surface-3": "#342046",
+  "--color-surface-3": "#2F3B4A",
   // Raised/hover states
+  "--color-surface-card-top": "#31364A",
+  // subtle purple cast
+  "--color-surface-card-bottom": "#232B39",
+  "--color-surface-control-top": "#2A3341",
+  "--color-surface-control-bottom": "#1E2632",
   // Text Colors (WCAG AA verified against surface-0)
-  "--color-text-primary": "#F5F1FA",
-  // 16.49:1 contrast
-  "--color-text-secondary": "#D8D0E3",
-  // 12.29:1 contrast
-  "--color-text-muted": "#B9AEC9",
-  // 8.72:1 contrast
-  "--color-text-disabled": "#9E92B4",
-  // 6.32:1 contrast
+  "--color-text-primary": "#F3F6FB",
+  "--color-text-secondary": "#D7DEE9",
+  "--color-text-muted": "#AAB6C5",
+  "--color-text-disabled": "#7F8A99",
   // Interactive - Primary (Purple)
-  "--color-interactive-primary": "#7C5BD6",
-  "--color-interactive-primary-hover": "#6F4FCB",
+  "--color-interactive-primary": "#9B7CFF",
+  "--color-interactive-primary-hover": "#8A6EF0",
   // Interactive - Secondary (Teal)
-  "--color-interactive-secondary": "#2AB9B0",
-  "--color-interactive-secondary-hover": "#52D6CC",
+  "--color-interactive-secondary": "#34CBBF",
+  "--color-interactive-secondary-hover": "#5DD9CF",
   // Interactive - Accent (Rose)
-  "--color-interactive-accent": "#D86B9A",
+  "--color-interactive-accent": "#E282AE",
   // Border Colors
-  "--color-border-subtle": "#3A3341",
-  "--color-border-strong": "#4A4354",
+  "--color-border-subtle": "#334051",
+  "--color-border-strong": "#5D6D84",
+  "--color-border-soft": "#465365",
+  "--color-border-contrast": "#748AA4",
   // Status Colors
-  "--color-status-success": "#2AB9B0",
+  "--color-status-success": "#34CBBF",
   // Teal
-  "--color-status-warning": "#D9A24F",
+  "--color-status-warning": "#E0AD5D",
   // Amber
-  "--color-status-error": "#D8524D",
+  "--color-status-error": "#E26662",
   // Red
-  "--color-status-info": "#7C5BD6",
+  "--color-status-info": "#9B7CFF",
   // Purple
-  // Overlay Colors (purple-based transparency)
-  "--color-overlay-subtle": "rgba(124, 91, 214, 0.05)",
+  // Overlay Colors (neutral transparency with accent overlays)
+  "--color-overlay-subtle": "rgba(255, 255, 255, 0.03)",
   // Hover tint
-  "--color-overlay-light": "rgba(124, 91, 214, 0.1)",
+  "--color-overlay-light": "rgba(255, 255, 255, 0.06)",
   // Selected
-  "--color-overlay-medium": "rgba(124, 91, 214, 0.15)",
+  "--color-overlay-medium": "rgba(255, 255, 255, 0.1)",
   // Active
-  "--color-overlay-heavy": "rgba(124, 91, 214, 0.25)",
+  "--color-overlay-heavy": "rgba(255, 255, 255, 0.16)",
   // Emphasis
-  "--color-overlay-error": "rgba(216, 82, 77, 0.12)",
+  "--color-overlay-primary-soft": "rgba(155, 124, 255, 0.12)",
+  "--color-overlay-secondary-soft": "rgba(52, 203, 191, 0.12)",
+  "--color-overlay-error": "rgba(226, 102, 98, 0.14)",
   // Error tint
-  "--color-overlay-backdrop-light": "rgba(27, 15, 38, 0.8)",
-  "--color-overlay-backdrop-heavy": "rgba(27, 15, 38, 0.95)"
+  "--color-overlay-backdrop-light": "rgba(10, 12, 16, 0.78)",
+  "--color-overlay-backdrop-heavy": "rgba(10, 12, 16, 0.9)"
 };
 var typographyVariables = {
   // Font Families
@@ -484,22 +512,28 @@ var shadowVariables = {
   "--shadow-md": "0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4)",
   "--shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5)",
   "--shadow-xl": "0 16px 48px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6)",
+  "--shadow-elevation-1": "0 1px 2px rgba(0, 0, 0, 0.36), 0 3px 8px rgba(0, 0, 0, 0.22)",
+  "--shadow-elevation-2": "0 6px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2)",
+  "--shadow-elevation-3": "0 12px 28px rgba(0, 0, 0, 0.36), 0 6px 14px rgba(0, 0, 0, 0.24)",
   // Glow shadows - Primary (Purple)
-  "--shadow-glow-primary": "0 0 10px rgba(124, 91, 214, 0.4)",
-  "--shadow-glow-primary-lg": "0 0 20px rgba(124, 91, 214, 0.5), 0 0 40px rgba(124, 91, 214, 0.3)",
-  "--shadow-glow-primary-xl": "0 0 30px rgba(124, 91, 214, 0.6), 0 0 60px rgba(124, 91, 214, 0.4)",
+  "--shadow-glow-primary": "0 0 10px rgba(155, 124, 255, 0.24)",
+  "--shadow-glow-primary-lg": "0 0 20px rgba(155, 124, 255, 0.3), 0 0 40px rgba(155, 124, 255, 0.18)",
+  "--shadow-glow-primary-xl": "0 0 30px rgba(155, 124, 255, 0.38), 0 0 60px rgba(155, 124, 255, 0.24)",
   // Glow shadows - Secondary (Teal)
-  "--shadow-glow-secondary": "0 0 10px rgba(42, 185, 176, 0.3)",
-  "--shadow-glow-secondary-lg": "0 0 20px rgba(42, 185, 176, 0.4), 0 0 40px rgba(42, 185, 176, 0.2)",
+  "--shadow-glow-secondary": "0 0 10px rgba(52, 203, 191, 0.2)",
+  "--shadow-glow-secondary-lg": "0 0 20px rgba(52, 203, 191, 0.28), 0 0 40px rgba(52, 203, 191, 0.15)",
   // Glow shadows - Accent (Rose)
-  "--shadow-glow-accent": "0 0 10px rgba(216, 107, 154, 0.3)",
-  "--shadow-glow-accent-lg": "0 0 20px rgba(216, 107, 154, 0.4), 0 0 40px rgba(216, 107, 154, 0.2)",
+  "--shadow-glow-accent": "0 0 10px rgba(226, 130, 174, 0.2)",
+  "--shadow-glow-accent-lg": "0 0 20px rgba(226, 130, 174, 0.28), 0 0 40px rgba(226, 130, 174, 0.15)",
   // Glow shadows - Error
-  "--shadow-glow-error": "0 0 10px rgba(216, 82, 77, 0.4)",
+  "--shadow-glow-error": "0 0 10px rgba(226, 102, 98, 0.24)",
+  "--shadow-focus-ring-primary": "0 0 0 2px rgba(155, 124, 255, 0.55)",
+  "--shadow-focus-ring-secondary": "0 0 0 2px rgba(52, 203, 191, 0.55)",
   // Inset shadows
-  "--shadow-inset-primary": "inset 0 0 10px rgba(124, 91, 214, 0.3)",
+  "--shadow-inset-primary": "inset 0 0 10px rgba(155, 124, 255, 0.18)",
   "--shadow-inset-subtle": "inset 0 1px 3px rgba(0, 0, 0, 0.3)",
-  "--shadow-inset-deep": "inset 0 2px 8px rgba(0, 0, 0, 0.5)"
+  "--shadow-inset-deep": "inset 0 2px 8px rgba(0, 0, 0, 0.5)",
+  "--shadow-press-inset": "inset 0 2px 6px rgba(0, 0, 0, 0.45)"
 };
 var zIndexVariables = {
   "--z-index-base": "1",
@@ -593,8 +627,8 @@ var globalCss = defineGlobalStyles({
     position: "fixed",
     inset: 0,
     backgroundImage: `
-      radial-gradient(circle at 20% 50%, rgba(124, 91, 214, 0.03) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, rgba(42, 185, 176, 0.02) 0%, transparent 50%)
+      radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 55%),
+      radial-gradient(circle at 80% 80%, rgba(155, 124, 255, 0.03) 0%, transparent 45%)
     `,
     pointerEvents: "none",
     zIndex: 0
@@ -658,69 +692,74 @@ var buttonRecipe = defineRecipe({
     py: "sm",
     borderWidth: "base",
     borderStyle: "solid",
-    borderColor: "border.strong",
-    background: "linear-gradient(145deg, var(--chakra-colors-surface-1), var(--chakra-colors-surface-0))",
+    borderColor: "border.soft",
+    background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
     color: "text.primary",
     cursor: "pointer",
     pointerEvents: "auto",
     userSelect: "none",
-    transition: "all 200ms ease",
+    transition: "transform 160ms var(--easing-default), box-shadow 180ms var(--easing-default), border-color 180ms var(--easing-default), background 180ms var(--easing-default)",
     textTransform: "uppercase",
     letterSpacing: "tight",
     fontWeight: "medium",
     borderRadius: "md",
-    boxShadow: "var(--chakra-shadows-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
+    boxShadow: "button.base",
     _disabled: {
       opacity: 0.5,
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      transform: "none",
+      boxShadow: "button.base"
     },
     _focusVisible: {
-      outline: "var(--chakra-border-widths-base) solid var(--chakra-colors-primary)",
-      outlineOffset: "var(--chakra-border-widths-base)"
+      outline: "none",
+      boxShadow: "focus.primary, button.base"
     }
   },
   variants: {
     variant: {
       primary: {
-        borderColor: "primary",
+        borderColor: "primary.DEFAULT",
         color: "primary",
         _hover: {
-          background: "linear-gradient(145deg, var(--chakra-colors-primary-hover), var(--chakra-colors-primary))",
+          background: "linear-gradient(145deg, var(--color-interactive-primary-hover), var(--color-interactive-primary))",
+          borderColor: "primary.hover",
           color: "surface.0",
-          boxShadow: "var(--chakra-shadows-md), var(--chakra-shadows-glow-primary-lg)",
-          transform: "translateY(-2px)"
+          boxShadow: "button.hover",
+          transform: "translateY(-1px)"
         },
         _active: {
           transform: "translateY(0)",
-          boxShadow: "var(--chakra-shadows-xs), var(--chakra-shadows-glow-primary)"
+          boxShadow: "button.active"
         }
       },
       secondary: {
-        borderColor: "utility",
+        borderColor: "utility.DEFAULT",
         color: "utility",
         _hover: {
-          background: "linear-gradient(145deg, var(--chakra-colors-utility), var(--chakra-colors-utility-hover))",
+          background: "linear-gradient(145deg, var(--color-interactive-secondary), var(--color-interactive-secondary-hover))",
+          borderColor: "utility.hover",
           color: "surface.0",
-          boxShadow: "var(--chakra-shadows-md), var(--chakra-shadows-glow-utility-lg)",
-          transform: "translateY(-2px)"
+          boxShadow: "button.hover",
+          transform: "translateY(-1px)"
         },
         _active: {
           transform: "translateY(0)",
-          boxShadow: "var(--chakra-shadows-xs), var(--chakra-shadows-glow-utility)"
+          boxShadow: "button.active"
         }
       },
       danger: {
         borderColor: "status.error",
         color: "status.error",
         _hover: {
-          background: "linear-gradient(145deg, var(--chakra-colors-status-error), var(--chakra-colors-status-error))",
+          background: "linear-gradient(145deg, var(--color-status-error), var(--color-status-error))",
+          borderColor: "status.error",
           color: "surface.0",
-          boxShadow: "var(--chakra-shadows-md), var(--chakra-shadows-glow-error)",
-          transform: "translateY(-2px)"
+          boxShadow: "button.hover",
+          transform: "translateY(-1px)"
         },
         _active: {
           transform: "translateY(0)",
-          boxShadow: "var(--chakra-shadows-xs), var(--chakra-shadows-glow-error)"
+          boxShadow: "button.active"
         }
       }
     }
@@ -736,24 +775,24 @@ var cellRecipe = defineRecipe2({
   className: "ninefold-cell",
   base: {
     aspectRatio: "1",
-    background: "linear-gradient(145deg, {colors.surface.1}, {colors.surface.0})",
+    background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
     borderWidth: "thin",
-    borderColor: "border.subtle",
+    borderColor: "border.soft",
     borderStyle: "solid",
     color: "text.primary",
     fontFamily: "body",
     fontSize: "cell",
     cursor: "pointer",
-    transition: "all var(--transition-fast) var(--ease-default)",
+    transition: "all var(--timing-fast) var(--easing-default)",
     p: 0,
     position: "relative",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    boxShadow: "{shadows.inset.subtle}, 0 1px 2px rgba(0, 0, 0, 0.2)",
+    boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1)",
     _focusVisible: {
-      outline: "{borderWidths.base} solid {colors.primary.DEFAULT}",
-      outlineOffset: "-2px",
+      outline: "none",
+      boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1), var(--shadow-focus-ring-primary)",
       zIndex: "base"
     }
   },
@@ -761,43 +800,43 @@ var cellRecipe = defineRecipe2({
     state: {
       normal: {
         _hover: {
-          background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
+          background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
           borderColor: "primary.hover",
-          boxShadow: "{shadows.inset.subtle}, 0 2px 4px rgba(0, 0, 0, 0.3), {shadows.glow.primary}",
+          boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-2)",
           transform: "translateY(-1px)"
         }
       },
       given: {
         fontWeight: "bold",
-        background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
-        borderColor: "border.strong",
+        background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
+        borderColor: "border.contrast",
         cursor: "default",
-        boxShadow: "{shadows.inset.subtle}, 0 2px 4px rgba(0, 0, 0, 0.3)",
+        boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1)",
         _hover: {
-          background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
-          borderColor: "border.strong",
-          boxShadow: "{shadows.inset.subtle}, 0 2px 4px rgba(0, 0, 0, 0.3)",
+          background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
+          borderColor: "border.contrast",
+          boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1)",
           transform: "none"
         }
       },
       selected: {
-        background: "linear-gradient(145deg, rgba(124, 91, 214, 0.2), rgba(124, 91, 214, 0.1))",
+        background: "linear-gradient(145deg, var(--color-overlay-primary-soft), rgba(155, 124, 255, 0.05))",
         borderColor: "primary.DEFAULT",
         boxShadow: "cell.selected",
-        transform: "translateY(-2px)"
+        transform: "translateY(-1px)"
       },
       conflict: {
-        background: "linear-gradient(145deg, rgba(216, 82, 77, 0.2), rgba(216, 82, 77, 0.1))",
+        background: "linear-gradient(145deg, rgba(226, 102, 98, 0.16), rgba(226, 102, 98, 0.08))",
         borderColor: "status.error",
         color: "status.error",
         boxShadow: "cell.conflict"
       },
       selectedConflict: {
-        background: "linear-gradient(145deg, rgba(216, 82, 77, 0.2), rgba(216, 82, 77, 0.1))",
+        background: "linear-gradient(145deg, rgba(226, 102, 98, 0.16), rgba(226, 102, 98, 0.08))",
         borderColor: "status.error",
         color: "status.error",
         boxShadow: "cell.conflict",
-        transform: "translateY(-2px)"
+        transform: "translateY(-1px)"
       }
     }
   },
@@ -820,10 +859,10 @@ var timerRecipe = defineRecipe3({
     paddingX: "md",
     borderWidth: "base",
     borderStyle: "solid",
-    borderColor: "border.strong",
-    background: "surface.1",
+    borderColor: "border.contrast",
+    background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
     borderRadius: "md",
-    boxShadow: "var(--chakra-shadows-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
+    boxShadow: "var(--shadow-elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
     justifyContent: "center"
   }
 });
@@ -836,9 +875,12 @@ var loadingRecipe = defineRecipe4({
     display: "inline-block",
     width: "12px",
     height: "12px",
-    backgroundColor: "primary.DEFAULT",
     borderRadius: "50%",
-    animation: "bounce 1.4s infinite ease-in-out both"
+    animationName: "bounce",
+    animationDuration: "1.4s",
+    animationIterationCount: "infinite",
+    animationTimingFunction: "ease-in-out",
+    animationFillMode: "both"
   },
   variants: {
     size: {
@@ -857,13 +899,13 @@ var loadingRecipe = defineRecipe4({
     },
     color: {
       primary: {
-        backgroundColor: "primary.DEFAULT"
+        bg: "primary"
       },
       secondary: {
-        backgroundColor: "utility.DEFAULT"
+        bg: "utility"
       },
       accent: {
-        backgroundColor: "emphasis.DEFAULT"
+        bg: "emphasis"
       }
     }
   },
@@ -881,23 +923,24 @@ var inputRecipe = defineRecipe5({
     fontFamily: "body",
     fontSize: "base",
     color: "text.primary",
-    backgroundColor: "surface.0",
+    backgroundColor: "surface.1",
     borderWidth: "thin",
     borderStyle: "solid",
-    borderColor: "border.subtle",
+    borderColor: "border.soft",
     borderRadius: "md",
     padding: "sm",
     width: "100%",
-    transition: "all var(--timing-base) var(--easing-default)",
+    transition: "box-shadow var(--timing-base) var(--easing-default), border-color var(--timing-base) var(--easing-default), background-color var(--timing-base) var(--easing-default)",
+    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-inset-subtle)",
     _placeholder: {
       color: "text.muted"
     },
     _hover: {
-      borderColor: "border.strong"
+      borderColor: "border.contrast"
     },
     _focus: {
       borderColor: "primary.DEFAULT",
-      boxShadow: "var(--shadow-glow-primary)",
+      boxShadow: "input.focus, inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-inset-subtle)",
       outline: "none"
     },
     _disabled: {
@@ -907,7 +950,7 @@ var inputRecipe = defineRecipe5({
     },
     _invalid: {
       borderColor: "status.error",
-      boxShadow: "var(--shadow-glow-error)"
+      boxShadow: "0 0 0 var(--border-width-thin) rgba(226, 102, 98, 0.5), 0 0 4px rgba(226, 102, 98, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-inset-subtle)"
     }
   },
   variants: {
@@ -930,17 +973,18 @@ var inputRecipe = defineRecipe5({
     },
     variant: {
       outline: {
-        backgroundColor: "transparent",
-        borderColor: "border.subtle"
+        backgroundColor: "surface.1",
+        borderColor: "border.soft"
       },
       filled: {
-        backgroundColor: "surface.1",
-        borderColor: "transparent",
+        backgroundColor: "surface.2",
+        borderColor: "border.soft",
         _hover: {
+          borderColor: "border.contrast",
           backgroundColor: "surface.2"
         },
         _focus: {
-          backgroundColor: "surface.0",
+          backgroundColor: "surface.2",
           borderColor: "primary.DEFAULT"
         }
       }
@@ -1024,35 +1068,36 @@ import { defineRecipe as defineRecipe7 } from "@chakra-ui/react";
 var cardRecipe = defineRecipe7({
   className: "card",
   base: {
-    background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
+    background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
     borderWidth: "thin",
     borderStyle: "solid",
-    borderColor: "border.subtle",
+    borderColor: "border.soft",
     borderRadius: "md",
     padding: "lg",
-    boxShadow: "var(--shadow-sm)"
+    boxShadow: "var(--shadow-elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.04)",
+    transition: "box-shadow var(--timing-base) var(--easing-default), border-color var(--timing-base) var(--easing-default)"
   },
   variants: {
     variant: {
       subtle: {
-        background: "surface.1",
-        borderColor: "border.subtle",
-        boxShadow: "none"
+        background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
+        borderColor: "border.soft",
+        boxShadow: "var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.03)"
       },
       elevated: {
-        background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
-        borderColor: "border.strong",
-        boxShadow: "var(--shadow-md)"
+        background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
+        borderColor: "border.contrast",
+        boxShadow: "var(--shadow-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.06)"
       },
       outline: {
         background: "transparent",
-        borderColor: "border.strong",
+        borderColor: "border.contrast",
         boxShadow: "none"
       },
       glow: {
-        background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
+        background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
         borderColor: "primary.DEFAULT",
-        boxShadow: "var(--shadow-md), var(--shadow-glow-primary)"
+        boxShadow: "var(--shadow-elevation-2), var(--shadow-focus-ring-primary), inset 0 1px 0 rgba(255, 255, 255, 0.06)"
       }
     },
     size: {
@@ -1316,7 +1361,7 @@ var modalSlotRecipe = defineSlotRecipe({
     backdrop: {
       position: "fixed",
       inset: 0,
-      background: "{colors.overlay.backdrop.heavy}",
+      background: "var(--color-overlay-backdrop-heavy)",
       backdropFilter: "blur(8px)",
       display: "flex",
       alignItems: "center",
@@ -1325,23 +1370,23 @@ var modalSlotRecipe = defineSlotRecipe({
       padding: "md"
     },
     modal: {
-      background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
+      background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
       borderWidth: "base",
       borderStyle: "solid",
-      borderColor: "primary.DEFAULT",
+      borderColor: "border.contrast",
       maxWidth: "500px",
       width: "100%",
       maxHeight: "90vh",
       overflowY: "auto",
-      boxShadow: "{shadows.xl}, {shadows.glow.primary-xl}, inset 0 1px 0 rgba(255, 255, 255, 0.1)",
+      boxShadow: "var(--shadow-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-focus-ring-primary)",
       borderRadius: "md"
     },
     header: {
       padding: "lg",
       borderBottomWidth: "thin",
       borderBottomStyle: "solid",
-      borderBottomColor: "border.subtle",
-      background: "linear-gradient(180deg, {colors.overlay.light}, transparent)"
+      borderBottomColor: "border.soft",
+      background: "linear-gradient(180deg, var(--color-overlay-subtle), transparent)"
     },
     title: {
       margin: 0,
@@ -1383,7 +1428,6 @@ var switchSlotRecipe = defineSlotRecipe2({
       color: "text.primary",
       textTransform: "uppercase",
       letterSpacing: "wide",
-      textShadow: "0 1px 2px rgba(0, 0, 0, 0.4)",
       userSelect: "none"
     },
     control: {
@@ -1395,22 +1439,23 @@ var switchSlotRecipe = defineSlotRecipe2({
       borderRadius: "full",
       borderWidth: "base",
       borderStyle: "solid",
-      borderColor: "border.strong",
-      background: "linear-gradient(140deg, {colors.surface.2}, {colors.surface.1} 50%, {colors.surface.0})",
-      boxShadow: "{shadows.sm}, inset 0 1px 0 rgba(255, 255, 255, 0.06)",
+      borderColor: "border.soft",
+      background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
+      boxShadow: "var(--shadow-elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.06)",
       transition: "all 200ms ease",
+      cursor: "pointer",
       _checked: {
         borderColor: "primary.DEFAULT",
-        background: "linear-gradient(140deg, {colors.primary.hover}, {colors.primary.DEFAULT})",
-        boxShadow: "{shadows.md}, {shadows.glow.primary}, inset 0 1px 0 rgba(255, 255, 255, 0.1)"
+        background: "linear-gradient(145deg, var(--color-interactive-primary-hover), var(--color-interactive-primary))",
+        boxShadow: "var(--shadow-elevation-2), var(--shadow-glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
       }
     },
     thumb: {
       width: "var(--switch-height)",
       height: "var(--switch-height)",
       borderRadius: "full",
-      background: "surface.0",
-      boxShadow: "{shadows.sm}",
+      background: "surface.1",
+      boxShadow: "var(--shadow-elevation-1)",
       transitionProperty: "translate",
       transitionDuration: "fast",
       _checked: {
@@ -1446,16 +1491,16 @@ var victoryScreenSlotRecipe = defineSlotRecipe3({
       padding: "xl",
       borderWidth: "thick",
       borderStyle: "solid",
-      borderColor: "border.strong",
-      background: "surface.2",
-      boxShadow: "glow.primary-xl"
+      borderColor: "border.contrast",
+      background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
+      boxShadow: "var(--shadow-elevation-3), var(--shadow-focus-ring-primary)"
     },
     title: {
       fontFamily: "display",
       fontSize: "3xl",
       color: "text.primary",
       letterSpacing: "wide",
-      textShadow: "glow.emphasis-lg",
+      textShadow: "0 2px 8px rgba(0, 0, 0, 0.45)",
       animation: "pulse 2s ease-in-out infinite"
     },
     stats: {
@@ -1471,8 +1516,8 @@ var victoryScreenSlotRecipe = defineSlotRecipe3({
       padding: "md",
       borderWidth: "base",
       borderStyle: "solid",
-      borderColor: "emphasis",
-      background: "overlay.subtle",
+      borderColor: "primary.DEFAULT",
+      background: "overlay.primarySoft",
       animation: "glowHighlight 2s ease-in-out infinite"
     },
     actions: {
@@ -1495,7 +1540,7 @@ var accordionSlotRecipe = defineSlotRecipe4({
     item: {
       borderWidth: "thin",
       borderStyle: "solid",
-      borderColor: "border.subtle",
+      borderColor: "border.soft",
       borderRadius: "md",
       overflow: "hidden",
       marginBottom: "sm",
@@ -1509,7 +1554,7 @@ var accordionSlotRecipe = defineSlotRecipe4({
       justifyContent: "space-between",
       width: "100%",
       padding: "sm",
-      backgroundColor: "surface.0",
+      background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
       borderWidth: 0,
       borderBottomWidth: "thin",
       borderStyle: "solid",
@@ -1524,11 +1569,12 @@ var accordionSlotRecipe = defineSlotRecipe4({
       transition: "all var(--timing-base) var(--easing-default)",
       boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.06)",
       _hover: {
-        backgroundColor: "surface.1"
+        borderColor: "border.contrast",
+        background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))"
       },
       _expanded: {
-        borderBottomColor: "border.subtle",
-        backgroundColor: "surface.1"
+        borderBottomColor: "border.soft",
+        background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))"
       }
     },
     icon: {
@@ -1540,25 +1586,25 @@ var accordionSlotRecipe = defineSlotRecipe4({
     },
     content: {
       padding: "md",
-      backgroundColor: "surface.1"
+      backgroundColor: "surface.2"
     }
   },
   variants: {
     variant: {
       subtle: {
         item: {
-          borderColor: "border.subtle"
+          borderColor: "border.soft"
         },
         trigger: {
-          backgroundColor: "surface.0"
+          background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))"
         },
         content: {
-          backgroundColor: "surface.1"
+          backgroundColor: "surface.2"
         }
       },
       outline: {
         item: {
-          borderColor: "border.strong"
+          borderColor: "border.contrast"
         },
         trigger: {
           backgroundColor: "transparent",
@@ -1573,14 +1619,14 @@ var accordionSlotRecipe = defineSlotRecipe4({
       solid: {
         item: {
           borderColor: "primary.DEFAULT",
-          boxShadow: "var(--shadow-glow-primary)"
+          boxShadow: "var(--shadow-elevation-2), var(--shadow-glow-primary)"
         },
         trigger: {
-          backgroundColor: "surface.1",
+          background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
           borderBottomColor: "primary.DEFAULT"
         },
         content: {
-          backgroundColor: "surface.0"
+          backgroundColor: "surface.2"
         }
       }
     },
@@ -1633,7 +1679,7 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
       fontFamily: "body",
       fontSize: "base",
       fontWeight: "medium",
-      color: "primary.DEFAULT",
+      color: "text.secondary",
       textTransform: "uppercase",
       letterSpacing: "tight",
       marginBottom: "md"
@@ -1650,25 +1696,26 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
       padding: "sm",
       borderWidth: "thin",
       borderStyle: "solid",
-      borderColor: "border.subtle",
+      borderColor: "border.soft",
       borderRadius: "md",
-      backgroundColor: "transparent",
+      background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
       cursor: "pointer",
       transition: "all var(--timing-base) var(--easing-default)",
       _hover: {
-        borderColor: "primary.DEFAULT",
-        backgroundColor: "overlay.subtle"
+        borderColor: "border.contrast",
+        backgroundColor: "overlay.light"
       },
       _checked: {
         borderColor: "primary.DEFAULT",
-        backgroundColor: "overlay.light"
+        backgroundColor: "overlay.primarySoft",
+        boxShadow: "var(--shadow-focus-ring-primary)"
       },
       _disabled: {
         opacity: 0.5,
         cursor: "not-allowed",
         _hover: {
-          borderColor: "border.subtle",
-          backgroundColor: "transparent"
+          borderColor: "border.soft",
+          background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))"
         }
       }
     },
@@ -1680,7 +1727,7 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
       height: "18px",
       borderWidth: "base",
       borderStyle: "solid",
-      borderColor: "border.strong",
+      borderColor: "border.contrast",
       borderRadius: "50%",
       backgroundColor: "surface.0",
       flexShrink: 0,
@@ -1719,12 +1766,12 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
       },
       subtle: {
         item: {
-          backgroundColor: "surface.1",
+          backgroundColor: "surface.2",
           _hover: {
-            backgroundColor: "surface.2"
+            backgroundColor: "surface.3"
           },
           _checked: {
-            backgroundColor: "overlay.light"
+            backgroundColor: "overlay.primarySoft"
           }
         }
       },
@@ -1732,9 +1779,9 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
         item: {
           padding: "md",
           borderRadius: "md",
-          boxShadow: "var(--shadow-xs)",
+          boxShadow: "var(--shadow-elevation-1)",
           _checked: {
-            boxShadow: "var(--shadow-sm), var(--shadow-glow-primary)"
+            boxShadow: "var(--shadow-elevation-2), var(--shadow-focus-ring-primary)"
           }
         }
       }