@ebtgames/theme 0.1.3 → 0.1.5

package/dist/index.js

@@ -6,69 +6,67 @@ import { defineTokens } from "@chakra-ui/react";
 var colors = defineTokens.colors({
   // Surface Colors (deep purple monochrome)
   surface: {
-    0: { value: "#1B0F26" },
+    0: { value: "var(--color-surface-0)" },
     // Base background - darkest
-    1: { value: "#24122F" },
+    1: { value: "var(--color-surface-1)" },
     // Elevated surfaces
-    2: { value: "#2B173A" },
+    2: { value: "var(--color-surface-2)" },
     // Cards/panels
-    3: { value: "#342046" }
+    3: { value: "var(--color-surface-3)" }
     // Raised/hover states
   },
   // Text Colors (WCAG AA verified)
   text: {
-    primary: { value: "#F5F1FA" },
+    primary: { value: "var(--color-text-primary)" },
     // 16.49:1 contrast
-    secondary: { value: "#D8D0E3" },
+    secondary: { value: "var(--color-text-secondary)" },
     // 12.29:1 contrast
-    muted: { value: "#B9AEC9" },
+    muted: { value: "var(--color-text-muted)" },
     // 8.72:1 contrast
-    disabled: { value: "#9E92B4" }
+    disabled: { value: "var(--color-text-disabled)" }
     // 6.32:1 contrast
   },
   // Primary (Purple - interactive)
   primary: {
-    DEFAULT: { value: "#7C5BD6" },
-    hover: { value: "#6F4FCB" }
+    DEFAULT: { value: "var(--color-interactive-primary)" },
+    hover: { value: "var(--color-interactive-primary-hover)" }
   },
   // Utility (Teal - complementary)
   utility: {
-    DEFAULT: { value: "#2AB9B0" },
-    hover: { value: "#52D6CC" }
+    DEFAULT: { value: "var(--color-interactive-secondary)" },
+    hover: { value: "var(--color-interactive-secondary-hover)" }
   },
   // Emphasis (Rose - sparingly)
   emphasis: {
-    DEFAULT: { value: "#D86B9A" }
+    DEFAULT: { value: "var(--color-interactive-accent)" }
   },
   // Border Colors (neutral gray)
   border: {
-    subtle: { value: "#3A3341" },
-    strong: { value: "#4A4354" }
+    subtle: { value: "var(--color-border-subtle)" },
+    strong: { value: "var(--color-border-strong)" }
   },
   // Status Colors
   status: {
-    success: { value: "#2AB9B0" },
-    // Use teal
-    warning: { value: "#D9A24F" },
-    // Amber
-    error: { value: "#D8524D" }
-    // Red
+    success: { value: "var(--color-status-success)" },
+    warning: { value: "var(--color-status-warning)" },
+    error: { value: "var(--color-status-error)" },
+    info: { value: "var(--color-status-info)" }
   },
   // Overlays (purple-based transparency)
   overlay: {
-    subtle: { value: "rgba(124, 91, 214, 0.05)" },
-    // Purple hover tint
-    light: { value: "rgba(124, 91, 214, 0.1)" },
-    // Purple selected
-    medium: { value: "rgba(124, 91, 214, 0.15)" },
-    // Purple active
-    heavy: { value: "rgba(124, 91, 214, 0.25)" },
-    // Purple emphasis
-    error: { value: "rgba(216, 82, 77, 0.12)" },
+    subtle: { value: "var(--color-overlay-subtle)" },
+    // Hover tint
+    light: { value: "var(--color-overlay-light)" },
+    // Selected
+    medium: { value: "var(--color-overlay-medium)" },
+    // Active
+    heavy: { value: "var(--color-overlay-heavy)" },
+    // Emphasis
+    error: { value: "var(--color-overlay-error)" },
     // Error tint
     backdrop: {
-      light: { value: "rgba(27, 15, 38, 0.8)" },
-      heavy: { value: "rgba(27, 15, 38, 0.95)" }
+      light: { value: "var(--color-overlay-backdrop-light)" },
+      heavy: { value: "var(--color-overlay-backdrop-heavy)" }
     }
   }
 });
@@ -76,117 +74,122 @@ var colors = defineTokens.colors({
 // src/tokens/typography.ts
 import { defineTokens as defineTokens2 } from "@chakra-ui/react";
 var fonts = defineTokens2.fonts({
-  display: { value: "'Courier New', 'Courier', monospace" },
-  heading: { value: "'Courier New', 'Courier', monospace" },
-  body: { value: "'Courier New', 'Courier', monospace" }
+  display: { value: "var(--font-display)" },
+  heading: { value: "var(--font-heading)" },
+  body: { value: "var(--font-body)" }
 });
 var fontSizes = defineTokens2.fontSizes({
-  xs: { value: "0.75rem" },
+  xs: { value: "var(--font-size-xs)" },
   // 12px - helper text
-  sm: { value: "0.875rem" },
+  sm: { value: "var(--font-size-sm)" },
   // 14px - secondary labels
-  base: { value: "1rem" },
+  base: { value: "var(--font-size-base)" },
   // 16px - body text
-  md: { value: "1.125rem" },
+  md: { value: "var(--font-size-md)" },
   // 18px - emphasized body
-  lg: { value: "1.25rem" },
+  lg: { value: "var(--font-size-lg)" },
   // 20px - section headings
-  xl: { value: "1.5rem" },
+  xl: { value: "var(--font-size-xl)" },
   // 24px - modal titles
-  "2xl": { value: "2rem" },
+  "2xl": { value: "var(--font-size-2xl)" },
   // 32px - page titles
-  "3xl": { value: "3rem" },
+  "3xl": { value: "var(--font-size-3xl)" },
   // 48px - hero text
-  "4xl": { value: "4rem" },
+  "4xl": { value: "var(--font-size-4xl)" },
   // 64px - display text
   // Responsive sizes
-  cell: { value: "clamp(1rem, 3vw, 1.5rem)" },
-  hero: { value: "clamp(2.5rem, 8vw, 4rem)" },
-  subtitle: { value: "clamp(1rem, 3vw, 1.25rem)" }
+  cell: { value: "var(--font-size-cell)" },
+  hero: { value: "var(--font-size-hero)" },
+  subtitle: { value: "var(--font-size-subtitle)" }
 });
 var fontWeights = defineTokens2.fontWeights({
-  normal: { value: 400 },
-  medium: { value: 600 },
-  bold: { value: 700 }
+  normal: { value: "var(--font-weight-normal)" },
+  medium: { value: "var(--font-weight-medium)" },
+  bold: { value: "var(--font-weight-bold)" }
 });
 var letterSpacings = defineTokens2.letterSpacings({
-  tight: { value: "0.05em" },
-  normal: { value: "0.1em" },
-  wide: { value: "0.2em" }
+  tight: { value: "var(--letter-spacing-tight)" },
+  normal: { value: "var(--letter-spacing-normal)" },
+  wide: { value: "var(--letter-spacing-wide)" }
 });
 
 // src/tokens/spacing.ts
 import { defineTokens as defineTokens3 } from "@chakra-ui/react";
 var spacing = defineTokens3.spacing({
-  "2xs": { value: "0.125rem" },
+  "2xs": { value: "var(--spacing-2xs)" },
   // 2px - micro gaps
-  xs: { value: "0.25rem" },
+  xs: { value: "var(--spacing-xs)" },
   // 4px
-  sm: { value: "0.5rem" },
+  sm: { value: "var(--spacing-sm)" },
   // 8px
-  md: { value: "1rem" },
+  md: { value: "var(--spacing-md)" },
   // 16px
-  lg: { value: "1.5rem" },
+  lg: { value: "var(--spacing-lg)" },
   // 24px
-  xl: { value: "2rem" },
+  xl: { value: "var(--spacing-xl)" },
   // 32px
-  "2xl": { value: "3rem" }
+  "2xl": { value: "var(--spacing-2xl)" }
   // 48px
 });
 
 // src/tokens/borders.ts
 import { defineTokens as defineTokens4 } from "@chakra-ui/react";
 var borderWidths = defineTokens4.borderWidths({
-  thin: { value: "1px" },
-  base: { value: "2px" },
-  thick: { value: "3px" }
+  thin: { value: "var(--border-width-thin)" },
+  base: { value: "var(--border-width-base)" },
+  thick: { value: "var(--border-width-thick)" }
 });
 var radii = defineTokens4.radii({
-  sm: { value: "2px" },
-  md: { value: "4px" },
-  lg: { value: "6px" }
+  sm: { value: "var(--radius-sm)" },
+  md: { value: "var(--radius-md)" },
+  lg: { value: "var(--radius-lg)" }
 });
 
 // src/tokens/shadows.ts
 import { defineTokens as defineTokens5 } from "@chakra-ui/react";
 var shadows = defineTokens5.shadows({
   // Depth shadows (layered)
-  xs: { value: "0 1px 2px rgba(0, 0, 0, 0.4)" },
-  sm: { value: "0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3)" },
-  md: { value: "0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4)" },
-  lg: { value: "0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5)" },
-  xl: { value: "0 16px 48px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6)" },
+  xs: { value: "var(--shadow-xs)" },
+  sm: { value: "var(--shadow-sm)" },
+  md: { value: "var(--shadow-md)" },
+  lg: { value: "var(--shadow-lg)" },
+  xl: { value: "var(--shadow-xl)" },
   // Glow shadows (primary - purple)
   glow: {
-    primary: { value: "0 0 10px rgba(124, 91, 214, 0.4)" },
-    "primary-lg": { value: "0 0 20px rgba(124, 91, 214, 0.5), 0 0 40px rgba(124, 91, 214, 0.3)" },
-    "primary-xl": { value: "0 0 30px rgba(124, 91, 214, 0.6), 0 0 60px rgba(124, 91, 214, 0.4)" },
-    // Utility (teal)
-    utility: { value: "0 0 10px rgba(42, 185, 176, 0.3)" },
-    "utility-lg": { value: "0 0 20px rgba(42, 185, 176, 0.4), 0 0 40px rgba(42, 185, 176, 0.2)" },
-    // Emphasis (rose)
-    emphasis: { value: "0 0 10px rgba(216, 107, 154, 0.3)" },
-    "emphasis-lg": { value: "0 0 20px rgba(216, 107, 154, 0.4), 0 0 40px rgba(216, 107, 154, 0.2)" },
+    primary: { value: "var(--shadow-glow-primary)" },
+    "primary-lg": { value: "var(--shadow-glow-primary-lg)" },
+    "primary-xl": { value: "var(--shadow-glow-primary-xl)" },
+    // Secondary (teal)
+    secondary: { value: "var(--shadow-glow-secondary)" },
+    "secondary-lg": { value: "var(--shadow-glow-secondary-lg)" },
+    // Accent (rose)
+    accent: { value: "var(--shadow-glow-accent)" },
+    "accent-lg": { value: "var(--shadow-glow-accent-lg)" },
+    // Legacy aliases for backward compatibility
+    utility: { value: "var(--shadow-glow-secondary)" },
+    "utility-lg": { value: "var(--shadow-glow-secondary-lg)" },
+    emphasis: { value: "var(--shadow-glow-accent)" },
+    "emphasis-lg": { value: "var(--shadow-glow-accent-lg)" },
     // Error (red)
-    error: { value: "0 0 10px rgba(216, 82, 77, 0.4)" }
+    error: { value: "var(--shadow-glow-error)" }
   },
   // Inset shadows
   inset: {
-    primary: { value: "inset 0 0 10px rgba(124, 91, 214, 0.3)" },
-    subtle: { value: "inset 0 1px 3px rgba(0, 0, 0, 0.3)" },
-    deep: { value: "inset 0 2px 8px rgba(0, 0, 0, 0.5)" }
+    primary: { value: "var(--shadow-inset-primary)" },
+    subtle: { value: "var(--shadow-inset-subtle)" },
+    deep: { value: "var(--shadow-inset-deep)" }
   }
 });
 
 // src/tokens/zIndex.ts
 import { defineTokens as defineTokens6 } from "@chakra-ui/react";
 var zIndex = defineTokens6.zIndex({
-  base: { value: 1 },
-  dropdown: { value: 100 },
-  overlay: { value: 500 },
-  modal: { value: 1e3 },
-  toast: { value: 1500 },
-  fullscreen: { value: 2e3 }
+  base: { value: "var(--z-index-base)" },
+  dropdown: { value: "var(--z-index-dropdown)" },
+  overlay: { value: "var(--z-index-overlay)" },
+  modal: { value: "var(--z-index-modal)" },
+  toast: { value: "var(--z-index-toast)" },
+  fullscreen: { value: "var(--z-index-fullscreen)" }
 });
 
 // src/semanticTokens/colors.ts
@@ -259,18 +262,35 @@ var keyframes = defineKeyframes({
   },
   glow: {
     "0%, 100%": {
-      boxShadow: "0 0 10px rgba(124, 91, 214, 0.4)"
+      boxShadow: "var(--shadow-glow-primary)"
     },
     "50%": {
-      boxShadow: "0 0 20px rgba(124, 91, 214, 0.5), 0 0 40px rgba(124, 91, 214, 0.3)"
+      boxShadow: "var(--shadow-glow-primary-lg)"
     }
   },
+  glowSecondary: {
+    "0%, 100%": {
+      boxShadow: "var(--shadow-glow-secondary)"
+    },
+    "50%": {
+      boxShadow: "var(--shadow-glow-secondary-lg)"
+    }
+  },
+  glowAccent: {
+    "0%, 100%": {
+      boxShadow: "var(--shadow-glow-accent)"
+    },
+    "50%": {
+      boxShadow: "var(--shadow-glow-accent-lg)"
+    }
+  },
+  // Legacy alias for backward compatibility
   glowHighlight: {
     "0%, 100%": {
-      boxShadow: "0 0 10px rgba(216, 107, 154, 0.3)"
+      boxShadow: "var(--shadow-glow-accent)"
     },
     "50%": {
-      boxShadow: "0 0 20px rgba(216, 107, 154, 0.4), 0 0 40px rgba(216, 107, 154, 0.2)"
+      boxShadow: "var(--shadow-glow-accent-lg)"
     }
   },
   blink: {
@@ -296,16 +316,277 @@ var keyframes = defineKeyframes({
       transform: "scale(1)",
       opacity: "1"
     }
+  },
+  scaleOut: {
+    from: {
+      transform: "scale(1)",
+      opacity: "1"
+    },
+    to: {
+      transform: "scale(0.8)",
+      opacity: "0"
+    }
+  },
+  slideInUp: {
+    from: {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    to: {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInDown: {
+    from: {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    to: {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  spin: {
+    from: {
+      transform: "rotate(0deg)"
+    },
+    to: {
+      transform: "rotate(360deg)"
+    }
   }
 });
 
 // src/globalStyles.ts
 import { defineGlobalStyles } from "@chakra-ui/react";
+
+// src/cssVariables.ts
+var colorVariables = {
+  // Surface Colors (deep purple monochrome)
+  "--color-surface-0": "#1B0F26",
+  // Base background - darkest
+  "--color-surface-1": "#24122F",
+  // Elevated surfaces
+  "--color-surface-2": "#2B173A",
+  // Cards/panels
+  "--color-surface-3": "#342046",
+  // Raised/hover states
+  // 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
+  // Interactive - Primary (Purple)
+  "--color-interactive-primary": "#7C5BD6",
+  "--color-interactive-primary-hover": "#6F4FCB",
+  // Interactive - Secondary (Teal)
+  "--color-interactive-secondary": "#2AB9B0",
+  "--color-interactive-secondary-hover": "#52D6CC",
+  // Interactive - Accent (Rose)
+  "--color-interactive-accent": "#D86B9A",
+  // Border Colors
+  "--color-border-subtle": "#3A3341",
+  "--color-border-strong": "#4A4354",
+  // Status Colors
+  "--color-status-success": "#2AB9B0",
+  // Teal
+  "--color-status-warning": "#D9A24F",
+  // Amber
+  "--color-status-error": "#D8524D",
+  // Red
+  "--color-status-info": "#7C5BD6",
+  // Purple
+  // Overlay Colors (purple-based transparency)
+  "--color-overlay-subtle": "rgba(124, 91, 214, 0.05)",
+  // Hover tint
+  "--color-overlay-light": "rgba(124, 91, 214, 0.1)",
+  // Selected
+  "--color-overlay-medium": "rgba(124, 91, 214, 0.15)",
+  // Active
+  "--color-overlay-heavy": "rgba(124, 91, 214, 0.25)",
+  // Emphasis
+  "--color-overlay-error": "rgba(216, 82, 77, 0.12)",
+  // Error tint
+  "--color-overlay-backdrop-light": "rgba(27, 15, 38, 0.8)",
+  "--color-overlay-backdrop-heavy": "rgba(27, 15, 38, 0.95)"
+};
+var typographyVariables = {
+  // Font Families
+  "--font-display": "'Courier New', 'Courier', monospace",
+  "--font-heading": "'Courier New', 'Courier', monospace",
+  "--font-body": "'Courier New', 'Courier', monospace",
+  // Font Sizes (static scale)
+  "--font-size-xs": "0.75rem",
+  // 12px
+  "--font-size-sm": "0.875rem",
+  // 14px
+  "--font-size-base": "1rem",
+  // 16px
+  "--font-size-md": "1.125rem",
+  // 18px
+  "--font-size-lg": "1.25rem",
+  // 20px
+  "--font-size-xl": "1.5rem",
+  // 24px
+  "--font-size-2xl": "2rem",
+  // 32px
+  "--font-size-3xl": "3rem",
+  // 48px
+  "--font-size-4xl": "4rem",
+  // 64px
+  // Font Sizes (responsive)
+  "--font-size-cell": "clamp(1rem, 3vw, 1.5rem)",
+  "--font-size-hero": "clamp(2.5rem, 8vw, 4rem)",
+  "--font-size-subtitle": "clamp(1rem, 3vw, 1.25rem)",
+  // Font Weights
+  "--font-weight-normal": "400",
+  "--font-weight-medium": "600",
+  "--font-weight-bold": "700",
+  // Letter Spacing
+  "--letter-spacing-tight": "0.05em",
+  "--letter-spacing-normal": "0.1em",
+  "--letter-spacing-wide": "0.2em"
+};
+var spacingVariables = {
+  "--spacing-2xs": "0.125rem",
+  // 2px
+  "--spacing-xs": "0.25rem",
+  // 4px
+  "--spacing-sm": "0.5rem",
+  // 8px
+  "--spacing-md": "1rem",
+  // 16px
+  "--spacing-lg": "1.5rem",
+  // 24px
+  "--spacing-xl": "2rem",
+  // 32px
+  "--spacing-2xl": "3rem"
+  // 48px
+};
+var borderVariables = {
+  // Border Widths
+  "--border-width-thin": "1px",
+  "--border-width-base": "2px",
+  "--border-width-thick": "3px",
+  // Border Radii
+  "--radius-sm": "2px",
+  "--radius-md": "4px",
+  "--radius-lg": "6px"
+};
+var shadowVariables = {
+  // Depth shadows (layered)
+  "--shadow-xs": "0 1px 2px rgba(0, 0, 0, 0.4)",
+  "--shadow-sm": "0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3)",
+  "--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)",
+  // 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)",
+  // 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)",
+  // 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)",
+  // Glow shadows - Error
+  "--shadow-glow-error": "0 0 10px rgba(216, 82, 77, 0.4)",
+  // Inset shadows
+  "--shadow-inset-primary": "inset 0 0 10px rgba(124, 91, 214, 0.3)",
+  "--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)"
+};
+var zIndexVariables = {
+  "--z-index-base": "1",
+  "--z-index-dropdown": "100",
+  "--z-index-overlay": "500",
+  "--z-index-modal": "1000",
+  "--z-index-toast": "1500",
+  "--z-index-fullscreen": "2000"
+};
+var timingVariables = {
+  // Durations
+  "--timing-fast": "150ms",
+  "--timing-base": "200ms",
+  "--timing-slow": "300ms",
+  // Easing functions
+  "--easing-default": "ease",
+  "--easing-out": "ease-out",
+  "--easing-in-out": "ease-in-out"
+};
+var breakpointVariables = {
+  "--breakpoint-mobile": "767px",
+  "--breakpoint-tablet": "768px",
+  "--breakpoint-desktop": "1024px"
+};
+var legacyAliases = {
+  // Color aliases
+  "--color-primary": "var(--color-interactive-primary)",
+  "--color-primary-hover": "var(--color-interactive-primary-hover)",
+  "--color-utility": "var(--color-interactive-secondary)",
+  "--color-utility-hover": "var(--color-interactive-secondary-hover)",
+  "--color-emphasis": "var(--color-interactive-accent)",
+  "--color-success": "var(--color-status-success)",
+  "--color-warning": "var(--color-status-warning)",
+  "--color-error": "var(--color-status-error)",
+  // Shadow glow aliases
+  "--shadow-glow-utility": "var(--shadow-glow-secondary)",
+  "--shadow-glow-utility-lg": "var(--shadow-glow-secondary-lg)",
+  "--shadow-glow-emphasis": "var(--shadow-glow-accent)",
+  "--shadow-glow-emphasis-lg": "var(--shadow-glow-accent-lg)",
+  // Border radius aliases
+  "--border-radius-sm": "var(--radius-sm)",
+  "--border-radius-md": "var(--radius-md)",
+  "--border-radius-lg": "var(--radius-lg)",
+  // Timing aliases
+  "--transition-fast": "var(--timing-fast)",
+  "--transition-base": "var(--timing-base)",
+  "--transition-slow": "var(--timing-slow)",
+  "--ease-default": "var(--easing-default)",
+  "--ease-out": "var(--easing-out)"
+};
+var allCssVariables = {
+  ...colorVariables,
+  ...typographyVariables,
+  ...spacingVariables,
+  ...borderVariables,
+  ...shadowVariables,
+  ...zIndexVariables,
+  ...timingVariables,
+  ...breakpointVariables,
+  ...legacyAliases
+};
+function getCssVariable(name) {
+  return allCssVariables[name];
+}
+function cssVar(name) {
+  return `var(${name})`;
+}
+function generateCssVariablesString() {
+  return Object.entries(allCssVariables).map(([key, value]) => `${key}: ${value};`).join("\n  ");
+}
+
+// src/globalStyles.ts
 var globalCss = defineGlobalStyles({
+  // Inject CSS variables into :root
+  ":root": allCssVariables,
   // Universal reset
   "*, *::before, *::after": {
     boxSizing: "border-box"
   },
+  // Body base styles
+  body: {
+    backgroundColor: "var(--color-surface-0)",
+    color: "var(--color-text-primary)",
+    fontFamily: "var(--font-body)",
+    fontSize: "var(--font-size-base)",
+    lineHeight: "1.5"
+  },
   // Body pseudo-elements for background effects
   "body::before": {
     content: '""',
@@ -333,28 +614,28 @@ var globalCss = defineGlobalStyles({
     height: "8px"
   },
   "::-webkit-scrollbar-track": {
-    background: "{colors.surface.1}"
+    background: "var(--color-surface-1)"
   },
   "::-webkit-scrollbar-thumb": {
-    background: "{colors.utility.DEFAULT}",
-    borderRadius: "{radii.sm}"
+    background: "var(--color-interactive-secondary)",
+    borderRadius: "var(--radius-sm)"
   },
   "::-webkit-scrollbar-thumb:hover": {
-    background: "{colors.utility.hover}"
+    background: "var(--color-interactive-secondary-hover)"
   },
   // Firefox scrollbar
   "*": {
     scrollbarWidth: "thin",
-    scrollbarColor: "{colors.utility.DEFAULT} {colors.surface.1}"
+    scrollbarColor: "var(--color-interactive-secondary) var(--color-surface-1)"
   },
   // Selection styling
   "::selection": {
-    background: "{colors.primary.DEFAULT}",
-    color: "{colors.text.primary}"
+    background: "var(--color-interactive-primary)",
+    color: "var(--color-text-primary)"
   },
   // Focus visible outline
   ":focus-visible": {
-    outline: "2px solid {colors.primary.DEFAULT}",
+    outline: "2px solid var(--color-interactive-primary)",
     outlineOffset: "2px"
   }
 });
@@ -378,7 +659,7 @@ var buttonRecipe = defineRecipe({
     borderWidth: "base",
     borderStyle: "solid",
     borderColor: "border.strong",
-    background: "linear-gradient(145deg, var(--chakra-colors-surface-1), var(--chakra-colors-surface-0))",
+    background: "linear-gradient(145deg, var(--color-surface-1), var(--color-surface-0))",
     color: "text.primary",
     cursor: "pointer",
     pointerEvents: "auto",
@@ -388,14 +669,14 @@ var buttonRecipe = defineRecipe({
     letterSpacing: "tight",
     fontWeight: "medium",
     borderRadius: "md",
-    boxShadow: "var(--chakra-shadows-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
+    boxShadow: "var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
     _disabled: {
       opacity: 0.5,
       cursor: "not-allowed"
     },
     _focusVisible: {
-      outline: "var(--chakra-border-widths-base) solid var(--chakra-colors-primary)",
-      outlineOffset: "var(--chakra-border-widths-base)"
+      outline: "var(--border-width-base) solid var(--color-interactive-primary)",
+      outlineOffset: "var(--border-width-base)"
     }
   },
   variants: {
@@ -404,42 +685,42 @@ var buttonRecipe = defineRecipe({
         borderColor: "primary",
         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))",
           color: "surface.0",
-          boxShadow: "var(--chakra-shadows-md), var(--chakra-shadows-glow-primary-lg)",
+          boxShadow: "var(--shadow-md), var(--shadow-glow-primary-lg)",
           transform: "translateY(-2px)"
         },
         _active: {
           transform: "translateY(0)",
-          boxShadow: "var(--chakra-shadows-xs), var(--chakra-shadows-glow-primary)"
+          boxShadow: "var(--shadow-xs), var(--shadow-glow-primary)"
         }
       },
       secondary: {
         borderColor: "utility",
         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))",
           color: "surface.0",
-          boxShadow: "var(--chakra-shadows-md), var(--chakra-shadows-glow-utility-lg)",
+          boxShadow: "var(--shadow-md), var(--shadow-glow-secondary-lg)",
           transform: "translateY(-2px)"
         },
         _active: {
           transform: "translateY(0)",
-          boxShadow: "var(--chakra-shadows-xs), var(--chakra-shadows-glow-utility)"
+          boxShadow: "var(--shadow-xs), var(--shadow-glow-secondary)"
         }
       },
       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))",
           color: "surface.0",
-          boxShadow: "var(--chakra-shadows-md), var(--chakra-shadows-glow-error)",
+          boxShadow: "var(--shadow-md), var(--shadow-glow-error)",
           transform: "translateY(-2px)"
         },
         _active: {
           transform: "translateY(0)",
-          boxShadow: "var(--chakra-shadows-xs), var(--chakra-shadows-glow-error)"
+          boxShadow: "var(--shadow-xs), var(--shadow-glow-error)"
         }
       }
     }
@@ -455,7 +736,7 @@ 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-1), var(--color-surface-0))",
     borderWidth: "thin",
     borderColor: "border.subtle",
     borderStyle: "solid",
@@ -463,15 +744,15 @@ var cellRecipe = defineRecipe2({
     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), 0 1px 2px rgba(0, 0, 0, 0.2)",
     _focusVisible: {
-      outline: "{borderWidths.base} solid {colors.primary.DEFAULT}",
+      outline: "var(--border-width-base) solid var(--color-interactive-primary)",
       outlineOffset: "-2px",
       zIndex: "base"
     }
@@ -480,22 +761,22 @@ var cellRecipe = defineRecipe2({
     state: {
       normal: {
         _hover: {
-          background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
+          background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
           borderColor: "primary.hover",
-          boxShadow: "{shadows.inset.subtle}, 0 2px 4px rgba(0, 0, 0, 0.3), {shadows.glow.primary}",
+          boxShadow: "var(--shadow-inset-subtle), 0 2px 4px rgba(0, 0, 0, 0.3), var(--shadow-glow-primary)",
           transform: "translateY(-1px)"
         }
       },
       given: {
         fontWeight: "bold",
-        background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
+        background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
         borderColor: "border.strong",
         cursor: "default",
-        boxShadow: "{shadows.inset.subtle}, 0 2px 4px rgba(0, 0, 0, 0.3)",
+        boxShadow: "var(--shadow-inset-subtle), 0 2px 4px rgba(0, 0, 0, 0.3)",
         _hover: {
-          background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
+          background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
           borderColor: "border.strong",
-          boxShadow: "{shadows.inset.subtle}, 0 2px 4px rgba(0, 0, 0, 0.3)",
+          boxShadow: "var(--shadow-inset-subtle), 0 2px 4px rgba(0, 0, 0, 0.3)",
           transform: "none"
         }
       },
@@ -542,16 +823,491 @@ var timerRecipe = defineRecipe3({
     borderColor: "border.strong",
     background: "surface.1",
     borderRadius: "md",
-    boxShadow: "var(--chakra-shadows-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
+    boxShadow: "var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
     justifyContent: "center"
   }
 });
 
+// src/recipes/loading.ts
+import { defineRecipe as defineRecipe4 } from "@chakra-ui/react";
+var loadingRecipe = defineRecipe4({
+  className: "loading",
+  base: {
+    display: "inline-block",
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    animationName: "bounce",
+    animationDuration: "1.4s",
+    animationIterationCount: "infinite",
+    animationTimingFunction: "ease-in-out",
+    animationFillMode: "both"
+  },
+  variants: {
+    size: {
+      sm: {
+        width: "8px",
+        height: "8px"
+      },
+      md: {
+        width: "12px",
+        height: "12px"
+      },
+      lg: {
+        width: "16px",
+        height: "16px"
+      }
+    },
+    color: {
+      primary: {
+        bg: "primary"
+      },
+      secondary: {
+        bg: "utility"
+      },
+      accent: {
+        bg: "emphasis"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
+// src/recipes/input.ts
+import { defineRecipe as defineRecipe5 } from "@chakra-ui/react";
+var inputRecipe = defineRecipe5({
+  className: "input",
+  base: {
+    fontFamily: "body",
+    fontSize: "base",
+    color: "text.primary",
+    backgroundColor: "surface.0",
+    borderWidth: "thin",
+    borderStyle: "solid",
+    borderColor: "border.subtle",
+    borderRadius: "md",
+    padding: "sm",
+    width: "100%",
+    transition: "all var(--timing-base) var(--easing-default)",
+    _placeholder: {
+      color: "text.muted"
+    },
+    _hover: {
+      borderColor: "border.strong"
+    },
+    _focus: {
+      borderColor: "primary.DEFAULT",
+      boxShadow: "var(--shadow-glow-primary)",
+      outline: "none"
+    },
+    _disabled: {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      backgroundColor: "surface.1"
+    },
+    _invalid: {
+      borderColor: "status.error",
+      boxShadow: "var(--shadow-glow-error)"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: "sm",
+        padding: "xs",
+        borderRadius: "sm"
+      },
+      md: {
+        fontSize: "base",
+        padding: "sm",
+        borderRadius: "md"
+      },
+      lg: {
+        fontSize: "md",
+        padding: "md",
+        borderRadius: "md"
+      }
+    },
+    variant: {
+      outline: {
+        backgroundColor: "transparent",
+        borderColor: "border.subtle"
+      },
+      filled: {
+        backgroundColor: "surface.1",
+        borderColor: "transparent",
+        _hover: {
+          backgroundColor: "surface.2"
+        },
+        _focus: {
+          backgroundColor: "surface.0",
+          borderColor: "primary.DEFAULT"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+// src/recipes/link.ts
+import { defineRecipe as defineRecipe6 } from "@chakra-ui/react";
+var linkRecipe = defineRecipe6({
+  className: "link",
+  base: {
+    color: "primary.DEFAULT",
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: "all var(--timing-fast) var(--easing-default)",
+    _hover: {
+      color: "primary.hover",
+      textDecoration: "underline"
+    },
+    _active: {
+      color: "primary.hover"
+    },
+    _focusVisible: {
+      outline: "2px solid var(--color-interactive-primary)",
+      outlineOffset: "2px",
+      borderRadius: "sm"
+    }
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: "primary.DEFAULT",
+        _hover: {
+          color: "primary.hover"
+        }
+      },
+      secondary: {
+        color: "utility.DEFAULT",
+        _hover: {
+          color: "utility.hover"
+        }
+      },
+      muted: {
+        color: "text.muted",
+        _hover: {
+          color: "text.primary"
+        }
+      }
+    },
+    underline: {
+      always: {
+        textDecoration: "underline"
+      },
+      hover: {
+        textDecoration: "none",
+        _hover: {
+          textDecoration: "underline"
+        }
+      },
+      none: {
+        textDecoration: "none",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    underline: "hover"
+  }
+});
+
+// src/recipes/card.ts
+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))",
+    borderWidth: "thin",
+    borderStyle: "solid",
+    borderColor: "border.subtle",
+    borderRadius: "md",
+    padding: "lg",
+    boxShadow: "var(--shadow-sm)"
+  },
+  variants: {
+    variant: {
+      subtle: {
+        background: "surface.1",
+        borderColor: "border.subtle",
+        boxShadow: "none"
+      },
+      elevated: {
+        background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
+        borderColor: "border.strong",
+        boxShadow: "var(--shadow-md)"
+      },
+      outline: {
+        background: "transparent",
+        borderColor: "border.strong",
+        boxShadow: "none"
+      },
+      glow: {
+        background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
+        borderColor: "primary.DEFAULT",
+        boxShadow: "var(--shadow-md), var(--shadow-glow-primary)"
+      }
+    },
+    size: {
+      sm: {
+        padding: "sm",
+        borderRadius: "sm"
+      },
+      md: {
+        padding: "md",
+        borderRadius: "md"
+      },
+      lg: {
+        padding: "lg",
+        borderRadius: "lg"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "elevated",
+    size: "md"
+  }
+});
+
+// src/recipes/badge.ts
+import { defineRecipe as defineRecipe8 } from "@chakra-ui/react";
+var badgeRecipe = defineRecipe8({
+  className: "badge",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontFamily: "body",
+    fontSize: "xs",
+    fontWeight: "medium",
+    textTransform: "uppercase",
+    letterSpacing: "tight",
+    borderRadius: "sm",
+    whiteSpace: "nowrap"
+  },
+  variants: {
+    variant: {
+      solid: {
+        color: "surface.0"
+      },
+      subtle: {
+        borderWidth: "thin",
+        borderStyle: "solid"
+      },
+      outline: {
+        backgroundColor: "transparent",
+        borderWidth: "thin",
+        borderStyle: "solid"
+      }
+    },
+    colorScheme: {
+      primary: {},
+      secondary: {},
+      accent: {},
+      success: {},
+      warning: {},
+      error: {}
+    },
+    size: {
+      sm: {
+        fontSize: "xs",
+        paddingX: "xs",
+        paddingY: "2xs"
+      },
+      md: {
+        fontSize: "xs",
+        paddingX: "sm",
+        paddingY: "xs"
+      },
+      lg: {
+        fontSize: "sm",
+        paddingX: "md",
+        paddingY: "xs"
+      }
+    }
+  },
+  compoundVariants: [
+    // Solid variants
+    {
+      variant: "solid",
+      colorScheme: "primary",
+      css: {
+        backgroundColor: "primary.DEFAULT",
+        color: "surface.0"
+      }
+    },
+    {
+      variant: "solid",
+      colorScheme: "secondary",
+      css: {
+        backgroundColor: "utility.DEFAULT",
+        color: "surface.0"
+      }
+    },
+    {
+      variant: "solid",
+      colorScheme: "accent",
+      css: {
+        backgroundColor: "emphasis.DEFAULT",
+        color: "surface.0"
+      }
+    },
+    {
+      variant: "solid",
+      colorScheme: "success",
+      css: {
+        backgroundColor: "status.success",
+        color: "surface.0"
+      }
+    },
+    {
+      variant: "solid",
+      colorScheme: "warning",
+      css: {
+        backgroundColor: "status.warning",
+        color: "surface.0"
+      }
+    },
+    {
+      variant: "solid",
+      colorScheme: "error",
+      css: {
+        backgroundColor: "status.error",
+        color: "surface.0"
+      }
+    },
+    // Subtle variants
+    {
+      variant: "subtle",
+      colorScheme: "primary",
+      css: {
+        backgroundColor: "overlay.light",
+        color: "primary.DEFAULT",
+        borderColor: "primary.DEFAULT"
+      }
+    },
+    {
+      variant: "subtle",
+      colorScheme: "secondary",
+      css: {
+        backgroundColor: "rgba(42, 185, 176, 0.1)",
+        color: "utility.DEFAULT",
+        borderColor: "utility.DEFAULT"
+      }
+    },
+    {
+      variant: "subtle",
+      colorScheme: "accent",
+      css: {
+        backgroundColor: "rgba(216, 107, 154, 0.1)",
+        color: "emphasis.DEFAULT",
+        borderColor: "emphasis.DEFAULT"
+      }
+    },
+    {
+      variant: "subtle",
+      colorScheme: "success",
+      css: {
+        backgroundColor: "rgba(42, 185, 176, 0.1)",
+        color: "status.success",
+        borderColor: "status.success"
+      }
+    },
+    {
+      variant: "subtle",
+      colorScheme: "warning",
+      css: {
+        backgroundColor: "rgba(217, 162, 79, 0.1)",
+        color: "status.warning",
+        borderColor: "status.warning"
+      }
+    },
+    {
+      variant: "subtle",
+      colorScheme: "error",
+      css: {
+        backgroundColor: "overlay.error",
+        color: "status.error",
+        borderColor: "status.error"
+      }
+    },
+    // Outline variants
+    {
+      variant: "outline",
+      colorScheme: "primary",
+      css: {
+        color: "primary.DEFAULT",
+        borderColor: "primary.DEFAULT"
+      }
+    },
+    {
+      variant: "outline",
+      colorScheme: "secondary",
+      css: {
+        color: "utility.DEFAULT",
+        borderColor: "utility.DEFAULT"
+      }
+    },
+    {
+      variant: "outline",
+      colorScheme: "accent",
+      css: {
+        color: "emphasis.DEFAULT",
+        borderColor: "emphasis.DEFAULT"
+      }
+    },
+    {
+      variant: "outline",
+      colorScheme: "success",
+      css: {
+        color: "status.success",
+        borderColor: "status.success"
+      }
+    },
+    {
+      variant: "outline",
+      colorScheme: "warning",
+      css: {
+        color: "status.warning",
+        borderColor: "status.warning"
+      }
+    },
+    {
+      variant: "outline",
+      colorScheme: "error",
+      css: {
+        color: "status.error",
+        borderColor: "status.error"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "subtle",
+    colorScheme: "primary",
+    size: "md"
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   button: buttonRecipe,
   cell: cellRecipe,
-  timer: timerRecipe
+  timer: timerRecipe,
+  loading: loadingRecipe,
+  input: inputRecipe,
+  link: linkRecipe,
+  card: cardRecipe,
+  badge: badgeRecipe
 };
 
 // src/slotRecipes/modal.ts
@@ -563,7 +1319,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",
@@ -572,7 +1328,7 @@ var modalSlotRecipe = defineSlotRecipe({
       padding: "md"
     },
     modal: {
-      background: "linear-gradient(145deg, {colors.surface.2}, {colors.surface.1})",
+      background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
       borderWidth: "base",
       borderStyle: "solid",
       borderColor: "primary.DEFAULT",
@@ -580,7 +1336,7 @@ var modalSlotRecipe = defineSlotRecipe({
       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-xl), var(--shadow-glow-primary-xl), inset 0 1px 0 rgba(255, 255, 255, 0.1)",
       borderRadius: "md"
     },
     header: {
@@ -588,7 +1344,7 @@ var modalSlotRecipe = defineSlotRecipe({
       borderBottomWidth: "thin",
       borderBottomStyle: "solid",
       borderBottomColor: "border.subtle",
-      background: "linear-gradient(180deg, {colors.overlay.light}, transparent)"
+      background: "linear-gradient(180deg, var(--color-overlay-light), transparent)"
     },
     title: {
       margin: 0,
@@ -643,13 +1399,14 @@ var switchSlotRecipe = defineSlotRecipe2({
       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)",
+      background: "linear-gradient(140deg, var(--color-surface-2), var(--color-surface-1) 50%, var(--color-surface-0))",
+      boxShadow: "var(--shadow-sm), 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)"
+        borderColor: "primary",
+        background: "linear-gradient(140deg, var(--color-interactive-primary-hover), var(--color-interactive-primary))",
+        boxShadow: "var(--shadow-md), var(--shadow-glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
       }
     },
     thumb: {
@@ -657,7 +1414,7 @@ var switchSlotRecipe = defineSlotRecipe2({
       height: "var(--switch-height)",
       borderRadius: "full",
       background: "surface.0",
-      boxShadow: "{shadows.sm}",
+      boxShadow: "var(--shadow-sm)",
       transitionProperty: "translate",
       transitionDuration: "fast",
       _checked: {
@@ -730,13 +1487,429 @@ var victoryScreenSlotRecipe = defineSlotRecipe3({
   }
 });
 
+// src/slotRecipes/accordion.ts
+import { defineSlotRecipe as defineSlotRecipe4 } from "@chakra-ui/react";
+var accordionSlotRecipe = defineSlotRecipe4({
+  className: "accordion",
+  slots: ["root", "item", "trigger", "icon", "content"],
+  base: {
+    root: {
+      width: "100%"
+    },
+    item: {
+      borderWidth: "thin",
+      borderStyle: "solid",
+      borderColor: "border.subtle",
+      borderRadius: "md",
+      overflow: "hidden",
+      marginBottom: "sm",
+      _last: {
+        marginBottom: 0
+      }
+    },
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      padding: "sm",
+      backgroundColor: "surface.0",
+      borderWidth: 0,
+      borderBottomWidth: "thin",
+      borderStyle: "solid",
+      borderColor: "transparent",
+      cursor: "pointer",
+      fontFamily: "body",
+      fontSize: "sm",
+      fontWeight: "medium",
+      color: "primary.DEFAULT",
+      textTransform: "uppercase",
+      letterSpacing: "wide",
+      transition: "all var(--timing-base) var(--easing-default)",
+      boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.06)",
+      _hover: {
+        backgroundColor: "surface.1"
+      },
+      _expanded: {
+        borderBottomColor: "border.subtle",
+        backgroundColor: "surface.1"
+      }
+    },
+    icon: {
+      transition: "transform var(--timing-base) var(--easing-default)",
+      color: "text.muted",
+      _expanded: {
+        transform: "rotate(180deg)"
+      }
+    },
+    content: {
+      padding: "md",
+      backgroundColor: "surface.1"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: {
+          borderColor: "border.subtle"
+        },
+        trigger: {
+          backgroundColor: "surface.0"
+        },
+        content: {
+          backgroundColor: "surface.1"
+        }
+      },
+      outline: {
+        item: {
+          borderColor: "border.strong"
+        },
+        trigger: {
+          backgroundColor: "transparent",
+          _hover: {
+            backgroundColor: "overlay.subtle"
+          }
+        },
+        content: {
+          backgroundColor: "transparent"
+        }
+      },
+      solid: {
+        item: {
+          borderColor: "primary.DEFAULT",
+          boxShadow: "var(--shadow-glow-primary)"
+        },
+        trigger: {
+          backgroundColor: "surface.1",
+          borderBottomColor: "primary.DEFAULT"
+        },
+        content: {
+          backgroundColor: "surface.0"
+        }
+      }
+    },
+    size: {
+      sm: {
+        trigger: {
+          padding: "xs",
+          fontSize: "xs"
+        },
+        content: {
+          padding: "sm"
+        }
+      },
+      md: {
+        trigger: {
+          padding: "sm",
+          fontSize: "sm"
+        },
+        content: {
+          padding: "md"
+        }
+      },
+      lg: {
+        trigger: {
+          padding: "md",
+          fontSize: "base"
+        },
+        content: {
+          padding: "lg"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle",
+    size: "md"
+  }
+});
+
+// src/slotRecipes/radioGroup.ts
+import { defineSlotRecipe as defineSlotRecipe5 } from "@chakra-ui/react";
+var radioGroupSlotRecipe = defineSlotRecipe5({
+  className: "radioGroup",
+  slots: ["root", "label", "group", "item", "indicator", "text", "description"],
+  base: {
+    root: {
+      width: "100%"
+    },
+    label: {
+      fontFamily: "body",
+      fontSize: "base",
+      fontWeight: "medium",
+      color: "primary.DEFAULT",
+      textTransform: "uppercase",
+      letterSpacing: "tight",
+      marginBottom: "md"
+    },
+    group: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "sm"
+    },
+    item: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "sm",
+      padding: "sm",
+      borderWidth: "thin",
+      borderStyle: "solid",
+      borderColor: "border.subtle",
+      borderRadius: "md",
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      transition: "all var(--timing-base) var(--easing-default)",
+      _hover: {
+        borderColor: "primary.DEFAULT",
+        backgroundColor: "overlay.subtle"
+      },
+      _checked: {
+        borderColor: "primary.DEFAULT",
+        backgroundColor: "overlay.light"
+      },
+      _disabled: {
+        opacity: 0.5,
+        cursor: "not-allowed",
+        _hover: {
+          borderColor: "border.subtle",
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    indicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "18px",
+      height: "18px",
+      borderWidth: "base",
+      borderStyle: "solid",
+      borderColor: "border.strong",
+      borderRadius: "50%",
+      backgroundColor: "surface.0",
+      flexShrink: 0,
+      marginTop: "2px",
+      transition: "all var(--timing-fast) var(--easing-default)",
+      _checked: {
+        borderColor: "primary.DEFAULT",
+        backgroundColor: "primary.DEFAULT",
+        _after: {
+          content: '""',
+          display: "block",
+          width: "8px",
+          height: "8px",
+          borderRadius: "50%",
+          backgroundColor: "surface.0"
+        }
+      }
+    },
+    text: {
+      fontSize: "base",
+      fontWeight: "medium",
+      color: "text.primary"
+    },
+    description: {
+      fontSize: "sm",
+      color: "text.muted",
+      marginTop: "2xs"
+    }
+  },
+  variants: {
+    variant: {
+      outline: {
+        item: {
+          backgroundColor: "transparent"
+        }
+      },
+      subtle: {
+        item: {
+          backgroundColor: "surface.1",
+          _hover: {
+            backgroundColor: "surface.2"
+          },
+          _checked: {
+            backgroundColor: "overlay.light"
+          }
+        }
+      },
+      cards: {
+        item: {
+          padding: "md",
+          borderRadius: "md",
+          boxShadow: "var(--shadow-xs)",
+          _checked: {
+            boxShadow: "var(--shadow-sm), var(--shadow-glow-primary)"
+          }
+        }
+      }
+    },
+    orientation: {
+      vertical: {
+        group: {
+          flexDirection: "column"
+        }
+      },
+      horizontal: {
+        group: {
+          flexDirection: "row",
+          flexWrap: "wrap"
+        },
+        item: {
+          flex: "1 1 auto"
+        }
+      }
+    },
+    size: {
+      sm: {
+        item: {
+          padding: "xs"
+        },
+        indicator: {
+          width: "14px",
+          height: "14px",
+          _checked: {
+            _after: {
+              width: "6px",
+              height: "6px"
+            }
+          }
+        },
+        text: {
+          fontSize: "sm"
+        },
+        description: {
+          fontSize: "xs"
+        }
+      },
+      md: {
+        item: {
+          padding: "sm"
+        },
+        indicator: {
+          width: "18px",
+          height: "18px"
+        },
+        text: {
+          fontSize: "base"
+        },
+        description: {
+          fontSize: "sm"
+        }
+      },
+      lg: {
+        item: {
+          padding: "md"
+        },
+        indicator: {
+          width: "22px",
+          height: "22px",
+          _checked: {
+            _after: {
+              width: "10px",
+              height: "10px"
+            }
+          }
+        },
+        text: {
+          fontSize: "md"
+        },
+        description: {
+          fontSize: "base"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    orientation: "vertical",
+    size: "md"
+  }
+});
+
 // src/slotRecipes/index.ts
 var slotRecipes = {
   modal: modalSlotRecipe,
   switch: switchSlotRecipe,
-  victoryScreen: victoryScreenSlotRecipe
+  victoryScreen: victoryScreenSlotRecipe,
+  accordion: accordionSlotRecipe,
+  radioGroup: radioGroupSlotRecipe
 };
 
+// src/utils/contrast.ts
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
+}
+function relativeLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const sRGB = c / 255;
+    return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function contrastRatio(color1, color2) {
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
+  const l1 = relativeLuminance(rgb1.r, rgb1.g, rgb1.b);
+  const l2 = relativeLuminance(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function formatContrastRatio(ratio) {
+  return `${ratio.toFixed(2)}:1`;
+}
+function getWcagLevel(ratio, isLargeText = false) {
+  if (isLargeText) {
+    if (ratio >= 4.5) return "AAA";
+    if (ratio >= 3) return "AA";
+    return "fail";
+  } else {
+    if (ratio >= 7) return "AAA";
+    if (ratio >= 4.5) return "AA";
+    if (ratio >= 3) return "AA-large";
+    return "fail";
+  }
+}
+function getWcagDescription(level) {
+  switch (level) {
+    case "AAA":
+      return "Enhanced accessibility (AAA)";
+    case "AA":
+      return "Minimum accessibility (AA)";
+    case "AA-large":
+      return "Large text only (AA)";
+    case "fail":
+      return "Does not meet WCAG standards";
+  }
+}
+function meetsWcagAA(ratio, isLargeText = false) {
+  const level = getWcagLevel(ratio, isLargeText);
+  return level === "AAA" || level === "AA";
+}
+function getContrastPairs(foregrounds, backgrounds) {
+  const pairs = [];
+  for (const [fgName, fgColor] of Object.entries(foregrounds)) {
+    for (const [bgName, bgColor] of Object.entries(backgrounds)) {
+      const ratio = contrastRatio(fgColor, bgColor);
+      pairs.push({
+        foreground: fgName,
+        background: bgName,
+        ratio,
+        level: getWcagLevel(ratio)
+      });
+    }
+  }
+  return pairs;
+}
+
 // src/index.ts
 var system = createSystem(defaultConfig, {
   theme: {
@@ -761,6 +1934,26 @@ var system = createSystem(defaultConfig, {
   globalCss
 });
 export {
-  system
+  allCssVariables,
+  borderVariables,
+  breakpointVariables,
+  colorVariables,
+  contrastRatio,
+  cssVar,
+  formatContrastRatio,
+  generateCssVariablesString,
+  getContrastPairs,
+  getCssVariable,
+  getWcagDescription,
+  getWcagLevel,
+  hexToRgb,
+  meetsWcagAA,
+  relativeLuminance,
+  shadowVariables,
+  spacingVariables,
+  system,
+  timingVariables,
+  typographyVariables,
+  zIndexVariables
 };
 //# sourceMappingURL=index.js.map