@tenerife.music/ui 1.0.15 → 1.1.0

package/dist/theme/index.cjs

@@ -121,6 +121,1261 @@ var init_default = __esm({
   }
 });
 
+// src/FOUNDATION/tokens/colors.ts
+var primaryColors = {
+  50: "210 40% 98%",
+  // Lightest blue
+  100: "210 40% 96%",
+  200: "217 32.6% 17.5%",
+  300: "216 28% 26%",
+  400: "215 25% 30%",
+  // Adjusted for better progression
+  500: "215 20% 38%",
+  // Adjusted for better progression
+  600: "215 16% 45%",
+  // Adjusted for better progression
+  700: "216 12% 35%",
+  // Rebalanced for semantic strength (L* ~35)
+  800: "217 10% 28%",
+  // Adjusted for proper progression
+  900: "222 47.4% 18%",
+  // Adjusted for better progression
+  950: "222 84% 4.9%"
+  // Darkest blue
+};
+var accentColors = {
+  50: "280 100% 98%",
+  100: "280 65% 96%",
+  200: "280 60% 85%",
+  300: "280 55% 75%",
+  400: "280 50% 65%",
+  500: "280 65% 72%",
+  // Adjusted for WCAG AA contrast (4.5:1) with dark text in night mode
+  600: "259 65% 59%",
+  // Default accent - lightened for better contrast vs secondary (L* ~59, was 52, 15 delta from secondary-600)
+  700: "259 60% 44%",
+  // Active state - rebalanced for semantic strength (L* ~44, 12 delta from secondary-700)
+  800: "259 55% 38%",
+  // Adjusted for proper progression
+  900: "259 50% 32%",
+  950: "259 45% 30%"
+};
+var secondaryColors = {
+  50: "173 100% 98%",
+  100: "173 100% 95%",
+  200: "173 100% 85%",
+  300: "173 100% 70%",
+  400: "173 100% 55%",
+  500: "173 100% 45%",
+  // Adjusted for better scale progression
+  600: "173 100% 44%",
+  // Default secondary - rebalanced for better contrast vs primary (L* ~44, was 38)
+  700: "173 95% 32%",
+  // Active state - rebalanced for semantic strength (L* ~32)
+  800: "173 90% 22%",
+  // Primary variant - darkened for dominance (L* ~22, was 26)
+  900: "173 85% 20%",
+  950: "173 80% 12%"
+};
+var surfaceColors = {
+  day: {
+    base: "0 0% 100%",
+    // White background
+    elevated1: "0 0% 98%",
+    // Slightly elevated
+    elevated2: "0 0% 96%",
+    // More elevated
+    elevated3: "0 0% 94%",
+    // Most elevated
+    overlay: "0 0% 0% / 0.5",
+    // Overlay backdrop
+    glass: "0 0% 100% / 0.8"
+    // Glass effect
+  },
+  night: {
+    base: "240 10% 3.9%",
+    // Dark background (#0b0b10)
+    elevated1: "240 10% 5.1%",
+    // #0e1016
+    elevated2: "240 10% 6.3%",
+    // Slightly lighter
+    elevated3: "240 10% 7.5%",
+    // Even lighter
+    overlay: "0 0% 0% / 0.7",
+    // Darker overlay
+    glass: "240 10% 10% / 0.9"
+    // Dark glass effect
+  }
+};
+var semanticColors = {
+  day: {
+    success: "142 70% 28%",
+    // Darker green for better contrast
+    successForeground: "0 0% 100%",
+    error: "0 80% 40%",
+    // Richer red for contrast
+    errorForeground: "0 0% 100%",
+    warning: "38 92% 50%",
+    // Orange
+    warningForeground: "0 0% 9%",
+    info: "199 89% 48%",
+    // Blue
+    infoForeground: "0 0% 100%"
+  },
+  night: {
+    success: "142 70% 45%",
+    successForeground: "0 0% 100%",
+    error: "0 62.8% 30.6%",
+    // Darker red
+    errorForeground: "0 0% 98%",
+    warning: "38 92% 33%",
+    // Darker orange for WCAG AA contrast with white text
+    warningForeground: "0 0% 100%",
+    // Light foreground for dark theme readability
+    info: "199 89% 35%",
+    // Darker blue for WCAG AA contrast with white text
+    infoForeground: "0 0% 100%"
+    // Light foreground for dark theme readability
+  }
+};
+var chartColors = {
+  day: {
+    chart1: "12 76% 61%",
+    // Orange-red
+    chart2: "173 58% 39%",
+    // Teal-cyan
+    chart3: "197 37% 24%",
+    // Dark blue
+    chart4: "43 74% 66%",
+    // Yellow
+    chart5: "27 87% 67%"
+    // Orange
+  },
+  night: {
+    chart1: "220 70% 50%",
+    // Blue
+    chart2: "160 60% 45%",
+    // Teal
+    chart3: "30 80% 55%",
+    // Orange
+    chart4: "280 65% 60%",
+    // Purple
+    chart5: "340 75% 55%"
+    // Pink
+  }
+};
+var textColors = {
+  day: {
+    primary: "0 0% 9%",
+    // Almost black (neutral-900 equivalent)
+    secondary: "0 0% 45%",
+    // Medium gray
+    tertiary: "0 0% 65%",
+    // Light gray
+    muted: "0 0% 42%",
+    // Muted gray - adjusted for WCAG AA contrast (4.5:1) on surface.elevated2
+    inverse: "0 0% 100%"
+    // White (for dark backgrounds)
+  },
+  night: {
+    primary: "0 0% 89.8%",
+    // Light gray (#e5e7eb)
+    secondary: "240 5% 64.9%",
+    // Medium gray
+    tertiary: "240 5% 50%",
+    // Darker gray
+    muted: "240 5% 64.9%",
+    // Muted gray
+    inverse: "0 0% 9%"
+    // Almost black (for light backgrounds)
+  }
+};
+var baseColors = {
+  day: {
+    background: "0 0% 100%",
+    foreground: "0 0% 9%",
+    card: "0 0% 100%",
+    cardForeground: "0 0% 9%",
+    popover: "0 0% 100%",
+    popoverForeground: "0 0% 9%",
+    border: "0 0% 89.8%",
+    input: "0 0% 89.8%",
+    ring: "0 0% 3.9%"
+  },
+  night: {
+    background: "240 10% 3.9%",
+    // #0b0b10
+    foreground: "0 0% 89.8%",
+    // #e5e7eb
+    card: "240 10% 3.9%",
+    cardForeground: "0 0% 89.8%",
+    popover: "240 10% 5.1%",
+    // #0e1016
+    popoverForeground: "0 0% 89.8%",
+    border: "240 3.7% 15.9%",
+    input: "240 3.7% 15.9%",
+    ring: "240 4.9% 83.9%"
+  }
+};
+var cssVariableColorTokens = {
+  day: {
+    ...baseColors.day,
+    primary: "hsl(var(--tm-primary))",
+    primaryForeground: "hsl(var(--tm-primary-foreground))",
+    secondary: "hsl(var(--tm-secondary))",
+    secondaryForeground: "hsl(var(--tm-secondary-foreground))",
+    muted: "hsl(var(--muted))",
+    mutedForeground: "hsl(var(--muted-foreground))",
+    accent: "hsl(var(--tm-accent))",
+    accentForeground: "hsl(var(--tm-accent-foreground))",
+    destructive: `hsl(${semanticColors.day.error})`,
+    destructiveForeground: semanticColors.day.errorForeground,
+    chart1: `hsl(${chartColors.day.chart1})`,
+    chart2: `hsl(${chartColors.day.chart2})`,
+    chart3: `hsl(${chartColors.day.chart3})`,
+    chart4: `hsl(${chartColors.day.chart4})`,
+    chart5: `hsl(${chartColors.day.chart5})`
+  },
+  night: {
+    ...baseColors.night,
+    primary: "hsl(var(--tm-primary))",
+    primaryForeground: "hsl(var(--tm-primary-foreground))",
+    secondary: "hsl(var(--tm-secondary))",
+    secondaryForeground: "hsl(var(--tm-secondary-foreground))",
+    muted: "hsl(var(--muted))",
+    mutedForeground: "hsl(var(--muted-foreground))",
+    accent: "hsl(var(--tm-accent))",
+    accentForeground: "hsl(var(--tm-accent-foreground))",
+    destructive: `hsl(${semanticColors.night.error})`,
+    destructiveForeground: semanticColors.night.errorForeground,
+    chart1: `hsl(${chartColors.night.chart1})`,
+    chart2: `hsl(${chartColors.night.chart2})`,
+    chart3: `hsl(${chartColors.night.chart3})`,
+    chart4: `hsl(${chartColors.night.chart4})`,
+    chart5: `hsl(${chartColors.night.chart5})`
+  }
+};
+({
+  // Primary scale
+  "--primary-50": primaryColors[50],
+  "--primary-100": primaryColors[100],
+  "--primary-200": primaryColors[200],
+  "--primary-300": primaryColors[300],
+  "--primary-400": primaryColors[400],
+  "--primary-500": primaryColors[500],
+  "--primary-600": primaryColors[600],
+  "--primary-700": primaryColors[700],
+  "--primary-800": primaryColors[800],
+  "--primary-900": primaryColors[900],
+  "--primary-950": primaryColors[950],
+  // Accent scale
+  "--accent-50": accentColors[50],
+  "--accent-100": accentColors[100],
+  "--accent-200": accentColors[200],
+  "--accent-300": accentColors[300],
+  "--accent-400": accentColors[400],
+  "--accent-500": accentColors[500],
+  "--accent-600": accentColors[600],
+  "--accent-700": accentColors[700],
+  "--accent-800": accentColors[800],
+  "--accent-900": accentColors[900],
+  "--accent-950": accentColors[950],
+  // Secondary scale
+  "--secondary-50": secondaryColors[50],
+  "--secondary-100": secondaryColors[100],
+  "--secondary-200": secondaryColors[200],
+  "--secondary-300": secondaryColors[300],
+  "--secondary-400": secondaryColors[400],
+  "--secondary-500": secondaryColors[500],
+  "--secondary-600": secondaryColors[600],
+  "--secondary-700": secondaryColors[700],
+  "--secondary-800": secondaryColors[800],
+  "--secondary-900": secondaryColors[900],
+  "--secondary-950": secondaryColors[950]
+  // Surface colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+  // Semantic colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+  // Text colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+  // Chart colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+});
+var tailwindThemeColors = {
+  // Base colors
+  background: "hsl(var(--background))",
+  foreground: "hsl(var(--foreground))",
+  // Card colors
+  card: {
+    DEFAULT: "hsl(var(--card))",
+    foreground: "hsl(var(--card-foreground))"
+  },
+  // Popover colors
+  popover: {
+    DEFAULT: "hsl(var(--popover))",
+    foreground: "hsl(var(--popover-foreground))"
+  },
+  // Primary colors (using CSS variables)
+  primary: {
+    DEFAULT: "hsl(var(--tm-primary))",
+    foreground: "hsl(var(--tm-primary-foreground))",
+    50: `hsl(var(--primary-50))`,
+    100: `hsl(var(--primary-100))`,
+    200: `hsl(var(--primary-200))`,
+    300: `hsl(var(--primary-300))`,
+    400: `hsl(var(--primary-400))`,
+    500: `hsl(var(--primary-500))`,
+    600: `hsl(var(--primary-600))`,
+    700: `hsl(var(--primary-700))`,
+    800: `hsl(var(--primary-800))`,
+    900: `hsl(var(--primary-900))`,
+    950: `hsl(var(--primary-950))`
+  },
+  // Secondary colors
+  secondary: {
+    DEFAULT: "hsl(var(--tm-secondary))",
+    foreground: "hsl(var(--tm-secondary-foreground))",
+    50: `hsl(var(--secondary-50))`,
+    100: `hsl(var(--secondary-100))`,
+    200: `hsl(var(--secondary-200))`,
+    300: `hsl(var(--secondary-300))`,
+    400: `hsl(var(--secondary-400))`,
+    500: `hsl(var(--secondary-500))`,
+    600: `hsl(var(--secondary-600))`,
+    700: `hsl(var(--secondary-700))`,
+    800: `hsl(var(--secondary-800))`,
+    900: `hsl(var(--secondary-900))`,
+    950: `hsl(var(--secondary-950))`
+  },
+  // Accent colors
+  accent: {
+    DEFAULT: "hsl(var(--tm-accent))",
+    foreground: "hsl(var(--tm-accent-foreground))",
+    50: `hsl(var(--accent-50))`,
+    100: `hsl(var(--accent-100))`,
+    200: `hsl(var(--accent-200))`,
+    300: `hsl(var(--accent-300))`,
+    400: `hsl(var(--accent-400))`,
+    500: `hsl(var(--accent-500))`,
+    600: `hsl(var(--accent-600))`,
+    700: `hsl(var(--accent-700))`,
+    800: `hsl(var(--accent-800))`,
+    900: `hsl(var(--accent-900))`,
+    950: `hsl(var(--accent-950))`
+  },
+  // Muted colors
+  muted: {
+    DEFAULT: "hsl(var(--muted))",
+    foreground: "hsl(var(--muted-foreground))"
+  },
+  // Destructive colors (semantic error)
+  destructive: {
+    DEFAULT: "hsl(var(--destructive))",
+    foreground: "hsl(var(--destructive-foreground))"
+  },
+  // Semantic colors
+  success: {
+    DEFAULT: `hsl(var(--semantic-success))`,
+    foreground: `hsl(var(--semantic-success-foreground))`
+  },
+  error: {
+    DEFAULT: `hsl(var(--semantic-error))`,
+    foreground: `hsl(var(--semantic-error-foreground))`
+  },
+  warning: {
+    DEFAULT: `hsl(var(--semantic-warning))`,
+    foreground: `hsl(var(--semantic-warning-foreground))`
+  },
+  info: {
+    DEFAULT: `hsl(var(--semantic-info))`,
+    foreground: `hsl(var(--semantic-info-foreground))`
+  },
+  // Surface colors
+  surface: {
+    base: `hsl(var(--surface-base))`,
+    elevated1: `hsl(var(--surface-elevated1))`,
+    elevated2: `hsl(var(--surface-elevated2))`,
+    elevated3: `hsl(var(--surface-elevated3))`,
+    overlay: `hsl(var(--surface-overlay))`,
+    glass: `hsl(var(--surface-glass))`
+  },
+  // Text colors
+  text: {
+    primary: `hsl(var(--text-primary))`,
+    secondary: `hsl(var(--text-secondary))`,
+    tertiary: `hsl(var(--text-tertiary))`,
+    muted: `hsl(var(--text-muted))`,
+    destructive: `hsl(var(--destructive))`,
+    accent: `hsl(var(--tm-accent))`,
+    inverse: `hsl(var(--text-inverse))`
+  },
+  // Border and input
+  border: "hsl(var(--border))",
+  input: "hsl(var(--input))",
+  ring: "hsl(var(--ring))",
+  // Chart colors (using CSS variables)
+  chart: {
+    1: `hsl(var(--chart-1))`,
+    2: `hsl(var(--chart-2))`,
+    3: `hsl(var(--chart-3))`,
+    4: `hsl(var(--chart-4))`,
+    5: `hsl(var(--chart-5))`
+  }
+};
+
+// src/FOUNDATION/tokens/motion/v2.ts
+var motionV2Durations = {
+  fast: "150ms",
+  // Quick interactions
+  normal: "250ms",
+  // Default transitions
+  slow: "350ms",
+  // Emphasized animations
+  reduced: "0ms"
+  // For prefers-reduced-motion
+};
+var motionV2Easings = {
+  soft: "cubic-bezier(0.22, 1, 0.36, 1)",
+  // Gentle, smooth
+  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Material Design standard
+  emphasized: "cubic-bezier(0.2, 0, 0, 1)"
+  // Strong, decisive
+};
+var motionV2Transitions = {
+  fast: `${motionV2Durations.fast} ${motionV2Easings.standard}`,
+  normal: `${motionV2Durations.normal} ${motionV2Easings.standard}`,
+  slow: `${motionV2Durations.slow} ${motionV2Easings.emphasized}`,
+  soft: `${motionV2Durations.normal} ${motionV2Easings.soft}`,
+  reduced: `${motionV2Durations.reduced} linear`
+};
+var motionV2CSSVariables = {
+  // Durations
+  "--motion-duration-fast": motionV2Durations.fast,
+  "--motion-duration-normal": motionV2Durations.normal,
+  "--motion-duration-slow": motionV2Durations.slow,
+  "--motion-duration-reduced": motionV2Durations.reduced,
+  // Easings
+  "--motion-easing-soft": motionV2Easings.soft,
+  "--motion-easing-standard": motionV2Easings.standard,
+  "--motion-easing-emphasized": motionV2Easings.emphasized,
+  // Transitions
+  "--motion-transition-fast": motionV2Transitions.fast,
+  "--motion-transition-normal": motionV2Transitions.normal,
+  "--motion-transition-slow": motionV2Transitions.slow,
+  "--motion-transition-soft": motionV2Transitions.soft,
+  "--motion-transition-reduced": motionV2Transitions.reduced
+};
+
+// src/FOUNDATION/tokens/motion.ts
+var durations = {
+  instant: "0ms",
+  fast: "150ms",
+  // 1.5 × base (quick interactions)
+  normal: "300ms",
+  // 3 × base (default)
+  slow: "500ms",
+  // 5 × base (emphasized)
+  slower: "700ms",
+  // 7 × base (very emphasized)
+  slowest: "1000ms",
+  // 10 × base (maximum emphasis)
+  // Additional granular durations
+  "75": "75ms",
+  // Ultra-fast
+  "100": "100ms",
+  // Base unit
+  "200": "200ms",
+  // Fast-normal
+  "250": "250ms",
+  // Between fast and normal
+  "400": "400ms",
+  // Between normal and slow
+  "600": "600ms",
+  // Between slow and slower
+  "800": "800ms"
+  // Between slower and slowest
+};
+var easings = {
+  // Linear (no easing)
+  linear: "linear",
+  // Ease-in (accelerate) - cubic-bezier
+  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+  // Ease-out (decelerate) - recommended for most UI - cubic-bezier
+  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+  // Ease-in-out (accelerate and decelerate)
+  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Advanced easing functions
+  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  // Material Design easing
+  "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
+  "ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
+  "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)"
+};
+var transitions = {
+  // Fast transitions (quick interactions)
+  fast: `${durations.fast} ${easings["ease-out"]}`,
+  "fast-in": `${durations.fast} ${easings["ease-in"]}`,
+  "fast-out": `${durations.fast} ${easings["ease-out"]}`,
+  "fast-in-out": `${durations.fast} ${easings["ease-in-out"]}`,
+  // Normal transitions (default)
+  normal: `${durations.normal} ${easings["ease-in-out"]}`,
+  "normal-in": `${durations.normal} ${easings["ease-in"]}`,
+  "normal-out": `${durations.normal} ${easings["ease-out"]}`,
+  "normal-in-out": `${durations.normal} ${easings["ease-in-out"]}`,
+  // Slow transitions (emphasized)
+  slow: `${durations.slow} ${easings["ease-in-out"]}`,
+  "slow-in": `${durations.slow} ${easings["ease-in"]}`,
+  "slow-out": `${durations.slow} ${easings["ease-out"]}`,
+  "slow-in-out": `${durations.slow} ${easings["ease-in-out"]}`,
+  // Special transitions
+  bounce: `${durations.normal} ${easings.bounce}`,
+  elastic: `${durations.slow} ${easings.elastic}`,
+  // Default (normal)
+  DEFAULT: `${durations.normal} ${easings["ease-in-out"]}`
+};
+var motionCSSVariables = {
+  // Durations
+  "--duration-instant": durations.instant,
+  "--duration-fast": durations.fast,
+  "--duration-normal": durations.normal,
+  "--duration-slow": durations.slow,
+  "--duration-slower": durations.slower,
+  "--duration-slowest": durations.slowest,
+  // Additional granular durations
+  "--duration-75": durations["75"],
+  "--duration-100": durations["100"],
+  "--duration-200": durations["200"],
+  "--duration-250": durations["250"],
+  "--duration-400": durations["400"],
+  "--duration-600": durations["600"],
+  "--duration-800": durations["800"],
+  // Easings
+  "--ease-linear": easings.linear,
+  "--ease-in": easings["ease-in"],
+  "--ease-out": easings["ease-out"],
+  "--ease-in-out": easings["ease-in-out"],
+  "--ease-bounce": easings.bounce,
+  "--ease-elastic": easings.elastic,
+  "--ease-out-cubic": easings["ease-out-cubic"],
+  "--ease-in-cubic": easings["ease-in-cubic"],
+  "--ease-in-out-cubic": easings["ease-in-out-cubic"],
+  // Transitions
+  "--transition-fast": transitions.fast,
+  "--transition-normal": transitions.normal,
+  "--transition-slow": transitions.slow,
+  "--transition-default": transitions.DEFAULT,
+  "--transition-fast-in": transitions["fast-in"],
+  "--transition-fast-out": transitions["fast-out"],
+  "--transition-fast-in-out": transitions["fast-in-out"],
+  "--transition-normal-in": transitions["normal-in"],
+  "--transition-normal-out": transitions["normal-out"],
+  "--transition-normal-in-out": transitions["normal-in-out"],
+  "--transition-slow-in": transitions["slow-in"],
+  "--transition-slow-out": transitions["slow-out"],
+  "--transition-slow-in-out": transitions["slow-in-out"],
+  "--transition-bounce": transitions.bounce,
+  "--transition-elastic": transitions.elastic
+};
+
+// src/FOUNDATION/tokens/radius.ts
+var borderRadius = {
+  // No radius
+  none: "0",
+  // Extra small radius
+  xs: "0.125rem",
+  // 2px
+  // Small radius
+  sm: "0.25rem",
+  // 4px (same as sm)
+  base: "0.25rem",
+  // 4px (alias)
+  // Medium radius
+  md: "0.375rem",
+  // 6px
+  // Large radius
+  lg: "0.5rem",
+  // 8px (2 × base)
+  // Extra large radius
+  xl: "0.75rem",
+  // 12px (3 × base)
+  // 2XL radius
+  "2xl": "1rem",
+  // 16px (4 × base)
+  // 3XL radius
+  "3xl": "1.5rem",
+  // 24px (6 × base)
+  // Full radius (circular)
+  full: "9999px"
+};
+var componentRadius = {
+  // Button radius standards
+  button: {
+    // 4px (compact buttons)
+    md: borderRadius.md},
+  // Card radius standards
+  card: {
+    // 4px (compact cards)
+    md: borderRadius.md},
+  // Input/Form field radius standards
+  input: {
+    // 4px (compact inputs)
+    md: borderRadius.md},
+  // Badge/Status radius standards
+  badge: {
+    // 2px (compact badges)
+    md: borderRadius.sm},
+  // Modal/Dialog radius standards
+  modal: {
+    // 6px (small modals)
+    md: borderRadius.lg},
+  // Tooltip radius standards
+  tooltip: {
+    sm: borderRadius.sm},
+  // Toast/Notification radius standards
+  toast: {
+    // 6px (compact toasts)
+    md: borderRadius.lg},
+  // Chip/Tag radius standards
+  chip: {
+    // 2px (compact chips)
+    md: borderRadius.sm},
+  // Image/Media radius standards
+  image: {
+    // 4px (subtle rounding)
+    md: borderRadius.md}
+};
+var radiusCSSVariables = {
+  // Border radius scale
+  "--radius-none": borderRadius.none,
+  "--radius-xs": borderRadius.xs,
+  "--radius-sm": borderRadius.sm,
+  "--radius-base": borderRadius.base,
+  "--radius-md": borderRadius.md,
+  "--radius-lg": borderRadius.lg,
+  "--radius-xl": borderRadius.xl,
+  "--radius-2xl": borderRadius["2xl"],
+  "--radius-3xl": borderRadius["3xl"],
+  "--radius-full": borderRadius.full,
+  // Default radius variable (commonly used)
+  "--radius": borderRadius.md,
+  // Default to medium (6px)
+  // Component-specific radius variables
+  "--radius-button": componentRadius.button.md,
+  "--radius-card": componentRadius.card.md,
+  "--radius-input": componentRadius.input.md,
+  "--radius-badge": componentRadius.badge.md,
+  "--radius-modal": componentRadius.modal.md,
+  "--radius-tooltip": componentRadius.tooltip.sm,
+  "--radius-toast": componentRadius.toast.md,
+  "--radius-chip": componentRadius.chip.md,
+  "--radius-image": componentRadius.image.md
+};
+
+// src/FOUNDATION/tokens/shadows.ts
+var shadowBase = {
+  black: "0 0 0"};
+var shadowOpacity = {
+  xs: "0.05",
+  sm: "0.1",
+  md: "0.1",
+  lg: "0.1",
+  xl: "0.1",
+  "2xl": "0.25"};
+var elevationShadows = {
+  none: "none",
+  xs: `0 1px 2px 0 rgb(${shadowBase.black} / ${shadowOpacity.xs})`,
+  sm: `0 1px 3px 0 rgb(${shadowBase.black} / ${shadowOpacity.sm}), 0 1px 2px -1px rgb(${shadowBase.black} / ${shadowOpacity.sm})`,
+  md: `0 4px 6px -1px rgb(${shadowBase.black} / ${shadowOpacity.md}), 0 2px 4px -2px rgb(${shadowBase.black} / ${shadowOpacity.md})`,
+  lg: `0 10px 15px -3px rgb(${shadowBase.black} / ${shadowOpacity.lg}), 0 4px 6px -4px rgb(${shadowBase.black} / ${shadowOpacity.lg})`,
+  xl: `0 20px 25px -5px rgb(${shadowBase.black} / ${shadowOpacity.xl}), 0 8px 10px -6px rgb(${shadowBase.black} / ${shadowOpacity.xl})`,
+  "2xl": `0 25px 50px -12px rgb(${shadowBase.black} / ${shadowOpacity["2xl"]})`
+};
+var primaryColoredShadows = {
+  xs: "0 1px 2px 0 hsl(var(--primary-500) / 0.15)",
+  sm: "0 2px 4px 0 hsl(var(--primary-500) / 0.2)",
+  md: "0 4px 8px 0 hsl(var(--primary-500) / 0.3)",
+  lg: "0 8px 16px 0 hsl(var(--primary-500) / 0.4)",
+  xl: "0 12px 24px 0 hsl(var(--primary-500) / 0.5)",
+  "2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)"
+};
+var accentColoredShadows = {
+  xs: "0 1px 2px 0 hsl(var(--accent-500) / 0.15)",
+  sm: "0 2px 4px 0 hsl(var(--accent-500) / 0.2)",
+  md: "0 4px 8px 0 hsl(var(--accent-500) / 0.3)",
+  lg: "0 8px 16px 0 hsl(var(--accent-500) / 0.4)",
+  xl: "0 12px 24px 0 hsl(var(--accent-500) / 0.5)",
+  "2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)"
+};
+var glowEffects = {
+  // Primary glow effects
+  "glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)",
+  "glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)",
+  "glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)",
+  "glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)",
+  // Accent glow effects
+  "glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)",
+  "glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)",
+  "glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)",
+  "glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)"
+};
+var focusRings = {
+  default: "0 0 0 3px hsl(var(--ring) / 0.5)",
+  primary: "0 0 0 3px hsl(var(--primary-500) / 0.3)",
+  accent: "0 0 0 3px hsl(var(--accent-500) / 0.3)",
+  "focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)",
+  "focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)"
+};
+var shadowCSSVariables = {
+  // Elevation shadows
+  "--shadow-none": elevationShadows.none,
+  "--shadow-xs": elevationShadows.xs,
+  "--shadow-sm": elevationShadows.sm,
+  "--shadow-md": elevationShadows.md,
+  "--shadow-lg": elevationShadows.lg,
+  "--shadow-xl": elevationShadows.xl,
+  "--shadow-2xl": elevationShadows["2xl"],
+  // Primary colored shadows
+  "--shadow-primary-xs": primaryColoredShadows.xs,
+  "--shadow-primary-sm": primaryColoredShadows.sm,
+  "--shadow-primary-md": primaryColoredShadows.md,
+  "--shadow-primary-lg": primaryColoredShadows.lg,
+  "--shadow-primary-xl": primaryColoredShadows.xl,
+  "--shadow-primary-2xl": primaryColoredShadows["2xl"],
+  // Accent colored shadows
+  "--shadow-accent-xs": accentColoredShadows.xs,
+  "--shadow-accent-sm": accentColoredShadows.sm,
+  "--shadow-accent-md": accentColoredShadows.md,
+  "--shadow-accent-lg": accentColoredShadows.lg,
+  "--shadow-accent-xl": accentColoredShadows.xl,
+  "--shadow-accent-2xl": accentColoredShadows["2xl"],
+  // Glow effects
+  "--glow-primary": glowEffects["glow-primary"],
+  "--glow-primary-subtle": glowEffects["glow-primary-subtle"],
+  "--glow-primary-medium": glowEffects["glow-primary-medium"],
+  "--glow-primary-strong": glowEffects["glow-primary-strong"],
+  "--glow-accent": glowEffects["glow-accent"],
+  "--glow-accent-subtle": glowEffects["glow-accent-subtle"],
+  "--glow-accent-medium": glowEffects["glow-accent-medium"],
+  "--glow-accent-strong": glowEffects["glow-accent-strong"],
+  // Focus rings
+  "--focus-ring-default": focusRings.default,
+  "--focus-ring-primary": focusRings.primary,
+  "--focus-ring-accent": focusRings.accent,
+  "--focus-primary": focusRings["focus-primary"],
+  "--focus-accent": focusRings["focus-accent"]
+};
+
+// src/FOUNDATION/tokens/spacing.ts
+var spacing = {
+  // Zero spacing
+  0: "0",
+  px: "1px",
+  // Half unit (4px)
+  0.5: "0.125rem",
+  // 4px
+  // Base unit multiples (8px increments)
+  1: "0.25rem",
+  // 4px (half unit, common)
+  1.5: "0.375rem",
+  // 6px (rare, for fine adjustments)
+  2: "0.5rem",
+  // 8px (base unit)
+  2.5: "0.625rem",
+  // 10px (rare)
+  3: "0.75rem",
+  // 12px (1.5 × base)
+  3.5: "0.875rem",
+  // 14px (rare)
+  4: "1rem",
+  // 16px (2 × base)
+  5: "1.25rem",
+  // 20px (2.5 × base)
+  6: "1.5rem",
+  // 24px (3 × base)
+  7: "1.75rem",
+  // 28px (3.5 × base)
+  8: "2rem",
+  // 32px (4 × base)
+  9: "2.25rem",
+  // 36px (4.5 × base)
+  10: "2.5rem",
+  // 40px (5 × base)
+  11: "2.75rem",
+  // 44px (5.5 × base)
+  12: "3rem",
+  // 48px (6 × base)
+  14: "3.5rem",
+  // 56px (7 × base)
+  16: "4rem",
+  // 64px (8 × base)
+  20: "5rem",
+  // 80px (10 × base)
+  24: "6rem"};
+var semanticSpacing = {
+  // Extra small spacing (tight, minimal)
+  xs: spacing[1],
+  // 4px (0.25rem)
+  // Small spacing (compact)
+  sm: spacing[2],
+  // 8px (0.5rem)
+  // Medium spacing (default)
+  md: spacing[4],
+  // 16px (1rem)
+  // Large spacing (spacious)
+  lg: spacing[6],
+  // 24px (1.5rem)
+  // Extra large spacing (very spacious)
+  xl: spacing[8],
+  // 32px (2rem)
+  // 2XL spacing (section-level)
+  "2xl": spacing[12],
+  // 48px (3rem)
+  // 3XL spacing (major sections)
+  "3xl": spacing[16],
+  // 64px (4rem)
+  // 4XL spacing (page sections)
+  "4xl": spacing[20],
+  // 80px (5rem)
+  // 5XL spacing (hero sections)
+  "5xl": spacing[24],
+  // 96px (6rem)
+  // None (no spacing)
+  none: spacing[0]
+  // 0
+};
+var layoutSpacing = {
+  // Section spacing (vertical spacing between major sections)
+  section: {
+    xs: spacing[6],
+    // 24px (compact sections)
+    sm: spacing[8],
+    // 32px (small sections)
+    md: spacing[12],
+    // 48px (default sections)
+    lg: spacing[16],
+    // 64px (large sections)
+    xl: spacing[20],
+    // 80px (extra large sections)
+    "2xl": spacing[24]
+    // 96px (hero sections)
+  },
+  // Container spacing (padding inside containers)
+  container: {
+    xs: spacing[2],
+    // 8px (tight containers)
+    sm: spacing[4],
+    // 16px (compact containers)
+    md: spacing[6],
+    // 24px (default containers)
+    lg: spacing[8],
+    // 32px (spacious containers)
+    xl: spacing[12]
+    // 48px (very spacious containers)
+  },
+  // Grid spacing (gap between grid items)
+  grid: {
+    xs: spacing[2],
+    // 8px (tight grids)
+    sm: spacing[4],
+    // 16px (compact grids)
+    md: spacing[6],
+    // 24px (default grids)
+    lg: spacing[8],
+    // 32px (spacious grids)
+    xl: spacing[12]
+    // 48px (very spacious grids)
+  },
+  // Stack spacing (gap between stacked items)
+  stack: {
+    xs: spacing[1],
+    // 4px (tight stacks)
+    sm: spacing[2],
+    // 8px (compact stacks)
+    md: spacing[4],
+    // 16px (default stacks)
+    lg: spacing[6],
+    // 24px (spacious stacks)
+    xl: spacing[8]
+    // 32px (very spacious stacks)
+  },
+  // Component internal spacing (padding inside components)
+  component: {
+    xs: spacing[1],
+    // 4px (tight components)
+    sm: spacing[2],
+    // 8px (compact components)
+    md: spacing[4],
+    // 16px (default components)
+    lg: spacing[6],
+    // 24px (spacious components)
+    xl: spacing[8]
+    // 32px (extra spacious components)
+  }
+};
+var spacingCSSVariables = {
+  // Base spacing scale
+  "--spacing-0": spacing[0],
+  "--spacing-px": spacing.px,
+  "--spacing-0-5": spacing[0.5],
+  "--spacing-1": spacing[1],
+  "--spacing-1-5": spacing[1.5],
+  "--spacing-2": spacing[2],
+  "--spacing-2-5": spacing[2.5],
+  "--spacing-3": spacing[3],
+  "--spacing-3-5": spacing[3.5],
+  "--spacing-4": spacing[4],
+  "--spacing-5": spacing[5],
+  "--spacing-6": spacing[6],
+  "--spacing-7": spacing[7],
+  "--spacing-8": spacing[8],
+  "--spacing-9": spacing[9],
+  "--spacing-10": spacing[10],
+  "--spacing-11": spacing[11],
+  "--spacing-12": spacing[12],
+  "--spacing-14": spacing[14],
+  "--spacing-16": spacing[16],
+  "--spacing-20": spacing[20],
+  "--spacing-24": spacing[24],
+  // Semantic spacing
+  "--spacing-xs": semanticSpacing.xs,
+  "--spacing-sm": semanticSpacing.sm,
+  "--spacing-md": semanticSpacing.md,
+  "--spacing-lg": semanticSpacing.lg,
+  "--spacing-xl": semanticSpacing.xl,
+  "--spacing-2xl": semanticSpacing["2xl"],
+  "--spacing-3xl": semanticSpacing["3xl"],
+  "--spacing-4xl": semanticSpacing["4xl"],
+  "--spacing-5xl": semanticSpacing["5xl"],
+  "--spacing-none": semanticSpacing.none,
+  // Layout spacing - sections
+  "--layout-section-xs": layoutSpacing.section.xs,
+  "--layout-section-sm": layoutSpacing.section.sm,
+  "--layout-section-md": layoutSpacing.section.md,
+  "--layout-section-lg": layoutSpacing.section.lg,
+  "--layout-section-xl": layoutSpacing.section.xl,
+  "--layout-section-2xl": layoutSpacing.section["2xl"],
+  // Layout spacing - containers
+  "--layout-container-xs": layoutSpacing.container.xs,
+  "--layout-container-sm": layoutSpacing.container.sm,
+  "--layout-container-md": layoutSpacing.container.md,
+  "--layout-container-lg": layoutSpacing.container.lg,
+  "--layout-container-xl": layoutSpacing.container.xl,
+  // Layout spacing - grids
+  "--layout-grid-xs": layoutSpacing.grid.xs,
+  "--layout-grid-sm": layoutSpacing.grid.sm,
+  "--layout-grid-md": layoutSpacing.grid.md,
+  "--layout-grid-lg": layoutSpacing.grid.lg,
+  "--layout-grid-xl": layoutSpacing.grid.xl,
+  // Layout spacing - stacks
+  "--layout-stack-xs": layoutSpacing.stack.xs,
+  "--layout-stack-sm": layoutSpacing.stack.sm,
+  "--layout-stack-md": layoutSpacing.stack.md,
+  "--layout-stack-lg": layoutSpacing.stack.lg,
+  "--layout-stack-xl": layoutSpacing.stack.xl,
+  // Layout spacing - components
+  "--layout-component-xs": layoutSpacing.component.xs,
+  "--layout-component-sm": layoutSpacing.component.sm,
+  "--layout-component-md": layoutSpacing.component.md,
+  "--layout-component-lg": layoutSpacing.component.lg,
+  "--layout-component-xl": layoutSpacing.component.xl
+};
+
+// src/FOUNDATION/tokens/typography.ts
+var fontFamily = {
+  // Primary font - Inter (default sans)
+  sans: [
+    "Inter",
+    "ui-sans-serif",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "Helvetica Neue",
+    "Arial",
+    "Noto Sans",
+    "sans-serif",
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"
+  ],
+  // Optional font - Satoshi
+  satoshi: [
+    "Satoshi",
+    "Inter",
+    "ui-sans-serif",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "sans-serif"
+  ],
+  // Display font - Clash Display (for headings and hero sections)
+  display: [
+    "Clash Display",
+    "Inter",
+    "ui-sans-serif",
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "sans-serif"
+  ],
+  // Serif font family
+  serif: ["ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
+  // Monospace font family
+  mono: [
+    "ui-monospace",
+    "SFMono-Regular",
+    "Menlo",
+    "Monaco",
+    "Consolas",
+    "Liberation Mono",
+    "Courier New",
+    "monospace"
+  ]
+};
+var fontSize = {
+  // text-xs: 12px base, scales from 0.75rem to 0.875rem
+  xs: [
+    "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)",
+    { lineHeight: "1rem", letterSpacing: "0.05em" }
+  ],
+  // text-sm: 14px base, scales from 0.875rem to 1rem
+  sm: [
+    "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
+    { lineHeight: "1.25rem", letterSpacing: "0.025em" }
+  ],
+  // text-base: 16px base, scales from 1rem to 1.125rem
+  base: ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", { lineHeight: "1.5rem", letterSpacing: "0em" }],
+  // text-lg: 18px base, scales from 1.125rem to 1.25rem
+  lg: [
+    "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
+    { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
+  ],
+  // text-xl: 20px base, scales from 1.25rem to 1.5rem
+  xl: [
+    "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
+    { lineHeight: "1.75rem", letterSpacing: "-0.025em" }
+  ],
+  // text-2xl: 24px base, scales from 1.5rem to 2rem
+  "2xl": [
+    "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
+    { lineHeight: "2rem", letterSpacing: "-0.05em" }
+  ],
+  // text-3xl: 30px base, scales from 1.875rem to 2.5rem
+  "3xl": [
+    "clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)",
+    { lineHeight: "2.25rem", letterSpacing: "-0.05em" }
+  ],
+  // text-4xl: 36px base, scales from 2.25rem to 3rem
+  "4xl": [
+    "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)",
+    { lineHeight: "2.5rem", letterSpacing: "-0.025em" }
+  ],
+  // text-5xl: 48px base, scales from 3rem to 4rem
+  "5xl": ["clamp(3rem, 2rem + 5vw, 4rem)", { lineHeight: "1", letterSpacing: "-0.025em" }],
+  // text-6xl: 60px base, scales from 3.75rem to 5rem
+  "6xl": ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
+  // text-7xl: 72px base (optional, for hero sections)
+  "7xl": ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
+  // text-8xl: 96px base (optional, for hero sections)
+  "8xl": ["clamp(6rem, 4rem + 10vw, 8rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
+  // text-9xl: 128px base (optional, for hero sections)
+  "9xl": ["clamp(8rem, 5rem + 15vw, 12rem)", { lineHeight: "1", letterSpacing: "-0.05em" }]
+};
+var fontWeight = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+var lineHeight = {
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  loose: "2"
+};
+var letterSpacing = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+var typographyCSSVariables = {
+  // Font families
+  "--font-sans": fontFamily.sans.join(", "),
+  "--font-satoshi": fontFamily.satoshi.join(", "),
+  "--font-display": fontFamily.display.join(", "),
+  "--font-serif": fontFamily.serif.join(", "),
+  "--font-mono": fontFamily.mono.join(", "),
+  // Font sizes (using clamp values)
+  "--font-size-xs": fontSize.xs[0],
+  "--font-size-sm": fontSize.sm[0],
+  "--font-size-base": fontSize.base[0],
+  "--font-size-lg": fontSize.lg[0],
+  "--font-size-xl": fontSize.xl[0],
+  "--font-size-2xl": fontSize["2xl"][0],
+  "--font-size-3xl": fontSize["3xl"][0],
+  "--font-size-4xl": fontSize["4xl"][0],
+  "--font-size-5xl": fontSize["5xl"][0],
+  "--font-size-6xl": fontSize["6xl"][0],
+  // Font weights
+  "--font-weight-thin": fontWeight.thin,
+  "--font-weight-extralight": fontWeight.extralight,
+  "--font-weight-light": fontWeight.light,
+  "--font-weight-normal": fontWeight.normal,
+  "--font-weight-medium": fontWeight.medium,
+  "--font-weight-semibold": fontWeight.semibold,
+  "--font-weight-bold": fontWeight.bold,
+  "--font-weight-extrabold": fontWeight.extrabold,
+  "--font-weight-black": fontWeight.black,
+  // Line heights
+  "--line-height-none": lineHeight.none,
+  "--line-height-tight": lineHeight.tight,
+  "--line-height-snug": lineHeight.snug,
+  "--line-height-normal": lineHeight.normal,
+  "--line-height-relaxed": lineHeight.relaxed,
+  "--line-height-loose": lineHeight.loose,
+  // Letter spacing
+  "--letter-spacing-tighter": letterSpacing.tighter,
+  "--letter-spacing-tight": letterSpacing.tight,
+  "--letter-spacing-normal": letterSpacing.normal,
+  "--letter-spacing-wide": letterSpacing.wide,
+  "--letter-spacing-wider": letterSpacing.wider,
+  "--letter-spacing-widest": letterSpacing.widest
+};
+({
+  // Display styles (for hero sections)
+  display: {
+    fontSize: fontSize["6xl"][0]},
+  // Heading styles
+  h1: {
+    fontSize: fontSize["5xl"][0]},
+  h2: {
+    fontSize: fontSize["4xl"][0]},
+  h3: {
+    fontSize: fontSize["3xl"][0]},
+  h4: {
+    fontSize: fontSize["2xl"][0]},
+  h5: {
+    fontSize: fontSize.xl[0]},
+  h6: {
+    fontSize: fontSize.lg[0]},
+  // Body text styles
+  body: {
+    fontSize: fontSize.base[0]},
+  "body-sm": {
+    fontSize: fontSize.sm[0]},
+  "body-xs": {
+    fontSize: fontSize.xs[0]},
+  // Label styles
+  label: {
+    fontSize: fontSize.sm[0]},
+  "label-sm": {
+    fontSize: fontSize.xs[0]},
+  // Caption styles
+  caption: {
+    fontSize: fontSize.xs[0]}
+});
+({
+  fontSize: {
+    xs: [
+      fontSize.xs[0],
+      { lineHeight: fontSize.xs[1].lineHeight, letterSpacing: fontSize.xs[1].letterSpacing }
+    ],
+    sm: [
+      fontSize.sm[0],
+      { lineHeight: fontSize.sm[1].lineHeight, letterSpacing: fontSize.sm[1].letterSpacing }
+    ],
+    md: [
+      fontSize.base[0],
+      { lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
+    ],
+    base: [
+      fontSize.base[0],
+      { lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
+    ],
+    lg: [
+      fontSize.lg[0],
+      { lineHeight: fontSize.lg[1].lineHeight, letterSpacing: fontSize.lg[1].letterSpacing }
+    ],
+    xl: [
+      fontSize.xl[0],
+      { lineHeight: fontSize.xl[1].lineHeight, letterSpacing: fontSize.xl[1].letterSpacing }
+    ],
+    "2xl": [
+      fontSize["2xl"][0],
+      {
+        lineHeight: fontSize["2xl"][1].lineHeight,
+        letterSpacing: fontSize["2xl"][1].letterSpacing
+      }
+    ],
+    "3xl": [
+      fontSize["3xl"][0],
+      {
+        lineHeight: fontSize["3xl"][1].lineHeight,
+        letterSpacing: fontSize["3xl"][1].letterSpacing
+      }
+    ],
+    "4xl": [
+      fontSize["4xl"][0],
+      {
+        lineHeight: fontSize["4xl"][1].lineHeight,
+        letterSpacing: fontSize["4xl"][1].letterSpacing
+      }
+    ],
+    "5xl": [
+      fontSize["5xl"][0],
+      {
+        lineHeight: fontSize["5xl"][1].lineHeight,
+        letterSpacing: fontSize["5xl"][1].letterSpacing
+      }
+    ],
+    "6xl": [
+      fontSize["6xl"][0],
+      {
+        lineHeight: fontSize["6xl"][1].lineHeight,
+        letterSpacing: fontSize["6xl"][1].letterSpacing
+      }
+    ],
+    "7xl": [
+      fontSize["7xl"][0],
+      {
+        lineHeight: fontSize["7xl"][1].lineHeight,
+        letterSpacing: fontSize["7xl"][1].letterSpacing
+      }
+    ],
+    "8xl": [
+      fontSize["8xl"][0],
+      {
+        lineHeight: fontSize["8xl"][1].lineHeight,
+        letterSpacing: fontSize["8xl"][1].letterSpacing
+      }
+    ],
+    "9xl": [
+      fontSize["9xl"][0],
+      {
+        lineHeight: fontSize["9xl"][1].lineHeight,
+        letterSpacing: fontSize["9xl"][1].letterSpacing
+      }
+    ]
+  }});
+
 // src/themes/minimal.ts
 var minimalBrand = {
   id: "minimal",
@@ -1128,19 +2383,19 @@ function applyBrandOverrides(brand, mode) {
       });
     }
     if (overrides.radius.componentRadius) {
-      const { componentRadius } = overrides.radius;
-      if (componentRadius.button) {
-        Object.entries(componentRadius.button).forEach(([key, value]) => {
+      const { componentRadius: componentRadius2 } = overrides.radius;
+      if (componentRadius2.button) {
+        Object.entries(componentRadius2.button).forEach(([key, value]) => {
           root.style.setProperty(`--brand-${namespace}-radius-button-${key}`, value);
         });
       }
-      if (componentRadius.card) {
-        Object.entries(componentRadius.card).forEach(([key, value]) => {
+      if (componentRadius2.card) {
+        Object.entries(componentRadius2.card).forEach(([key, value]) => {
           root.style.setProperty(`--brand-${namespace}-radius-card-${key}`, value);
         });
       }
-      if (componentRadius.input) {
-        Object.entries(componentRadius.input).forEach(([key, value]) => {
+      if (componentRadius2.input) {
+        Object.entries(componentRadius2.input).forEach(([key, value]) => {
           root.style.setProperty(`--brand-${namespace}-radius-input-${key}`, value);
         });
       }
@@ -1154,541 +2409,275 @@ function removeBrandOverrides(namespace) {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
   const { style } = root;
-  const propsToRemove = [];
-  for (let i = 0; i < style.length; i++) {
-    const prop = style.item(i);
-    if (prop && prop.startsWith(`--brand-${namespace}-`)) {
-      propsToRemove.push(prop);
-    }
-  }
-  propsToRemove.forEach((prop) => {
-    style.removeProperty(prop);
-  });
-  root.removeAttribute("data-brand");
-  root.removeAttribute("data-brand-namespace");
-  if (activeNamespace === namespace) {
-    clearActiveBrand();
-  }
-}
-
-// src/themes/index.ts
-var themes = {
-  default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
-  dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
-  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
-};
-async function getTheme(name) {
-  const themeLoader = themes[name];
-  if (!themeLoader) {
-    throw new Error(`Theme "${name}" not found`);
-  }
-  return await themeLoader();
-}
-
-// src/tokens/colors.ts
-var primaryColors = {
-  50: "210 40% 98%",
-  // Lightest blue
-  100: "210 40% 96%",
-  200: "217 32.6% 17.5%",
-  300: "216 28% 26%",
-  400: "215 25% 27%",
-  500: "215 20% 35%",
-  // Base primary
-  600: "215 16% 47%",
-  700: "216 12% 54%",
-  800: "217 10% 62%",
-  900: "222 47.4% 11.2%",
-  950: "222 84% 4.9%"
-  // Darkest blue
-};
-var accentColors = {
-  50: "280 100% 98%",
-  100: "280 65% 96%",
-  200: "280 60% 85%",
-  300: "280 55% 75%",
-  400: "280 50% 65%",
-  500: "280 70% 67%",
-  // Base accent (night mode primary)
-  600: "259 65% 58%",
-  700: "259 60% 50%",
-  800: "259 55% 45%",
-  900: "259 50% 40%",
-  950: "259 45% 30%"
-};
-var secondaryColors = {
-  50: "173 100% 98%",
-  100: "173 100% 95%",
-  200: "173 100% 85%",
-  300: "173 100% 70%",
-  400: "173 100% 55%",
-  500: "173 100% 37%",
-  // Base secondary (Tenerife #00bfa6)
-  600: "173 100% 32%",
-  700: "173 95% 27%",
-  800: "173 90% 22%",
-  900: "173 85% 17%",
-  950: "173 80% 12%"
-};
-var surfaceColors = {
-  day: {
-    base: "0 0% 100%",
-    // White background
-    elevated1: "0 0% 98%",
-    // Slightly elevated
-    elevated2: "0 0% 96%",
-    // More elevated
-    elevated3: "0 0% 94%",
-    // Most elevated
-    overlay: "0 0% 0% / 0.5",
-    // Overlay backdrop
-    glass: "0 0% 100% / 0.8"
-    // Glass effect
-  },
-  night: {
-    base: "240 10% 3.9%",
-    // Dark background (#0b0b10)
-    elevated1: "240 10% 5.1%",
-    // #0e1016
-    elevated2: "240 10% 6.3%",
-    // Slightly lighter
-    elevated3: "240 10% 7.5%",
-    // Even lighter
-    overlay: "0 0% 0% / 0.7",
-    // Darker overlay
-    glass: "240 10% 10% / 0.9"
-    // Dark glass effect
-  }
-};
-var semanticColors = {
-  day: {
-    success: "142 70% 28%",
-    // Darker green for better contrast
-    successForeground: "0 0% 100%",
-    error: "0 80% 40%",
-    // Richer red for contrast
-    errorForeground: "0 0% 100%",
-    warning: "38 92% 50%",
-    // Orange
-    warningForeground: "0 0% 9%",
-    info: "199 89% 48%",
-    // Blue
-    infoForeground: "0 0% 100%"
-  },
-  night: {
-    success: "142 70% 45%",
-    successForeground: "0 0% 100%",
-    error: "0 62.8% 30.6%",
-    // Darker red
-    errorForeground: "0 0% 98%",
-    warning: "38 92% 33%",
-    // Darker orange for WCAG AA contrast with white text
-    warningForeground: "0 0% 100%",
-    // Light foreground for dark theme readability
-    info: "199 89% 35%",
-    // Darker blue for WCAG AA contrast with white text
-    infoForeground: "0 0% 100%"
-    // Light foreground for dark theme readability
-  }
-};
-var chartColors = {
-  day: {
-    chart1: "12 76% 61%",
-    // Orange-red
-    chart2: "173 58% 39%",
-    // Teal-cyan
-    chart3: "197 37% 24%",
-    // Dark blue
-    chart4: "43 74% 66%",
-    // Yellow
-    chart5: "27 87% 67%"
-    // Orange
-  },
-  night: {
-    chart1: "220 70% 50%",
-    // Blue
-    chart2: "160 60% 45%",
-    // Teal
-    chart3: "30 80% 55%",
-    // Orange
-    chart4: "280 65% 60%",
-    // Purple
-    chart5: "340 75% 55%"
-    // Pink
-  }
-};
-var textColors = {
-  day: {
-    primary: "0 0% 9%",
-    // Almost black
-    secondary: "0 0% 45%",
-    // Medium gray
-    tertiary: "0 0% 65%",
-    // Light gray
-    muted: "0 0% 38%",
-    // Muted gray with stronger contrast
-    inverse: "0 0% 100%"
-    // White (for dark backgrounds)
-  },
-  night: {
-    primary: "0 0% 89.8%",
-    // Light gray (#e5e7eb)
-    secondary: "240 5% 64.9%",
-    // Medium gray
-    tertiary: "240 5% 50%",
-    // Darker gray
-    muted: "240 5% 64.9%",
-    // Muted gray
-    inverse: "0 0% 9%"
-    // Almost black (for light backgrounds)
+  const propsToRemove = [];
+  for (let i = 0; i < style.length; i++) {
+    const prop = style.item(i);
+    if (prop && prop.startsWith(`--brand-${namespace}-`)) {
+      propsToRemove.push(prop);
+    }
   }
-};
-var baseColors = {
-  day: {
-    background: "0 0% 100%",
-    foreground: "0 0% 9%",
-    card: "0 0% 100%",
-    cardForeground: "0 0% 9%",
-    popover: "0 0% 100%",
-    popoverForeground: "0 0% 9%",
-    border: "0 0% 89.8%",
-    input: "0 0% 89.8%",
-    ring: "0 0% 3.9%"
-  },
-  night: {
-    background: "240 10% 3.9%",
-    // #0b0b10
-    foreground: "0 0% 89.8%",
-    // #e5e7eb
-    card: "240 10% 3.9%",
-    cardForeground: "0 0% 89.8%",
-    popover: "240 10% 5.1%",
-    // #0e1016
-    popoverForeground: "0 0% 89.8%",
-    border: "240 3.7% 15.9%",
-    input: "240 3.7% 15.9%",
-    ring: "240 4.9% 83.9%"
+  propsToRemove.forEach((prop) => {
+    style.removeProperty(prop);
+  });
+  root.removeAttribute("data-brand");
+  root.removeAttribute("data-brand-namespace");
+  if (activeNamespace === namespace) {
+    clearActiveBrand();
   }
+}
+
+// src/themes/index.ts
+var themes = {
+  default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
+  dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
+  brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
 };
-var cssVariableColorTokens = {
-  day: {
-    ...baseColors.day,
-    primary: "hsl(var(--tm-primary))",
-    primaryForeground: "hsl(var(--tm-primary-foreground))",
-    secondary: "hsl(var(--tm-secondary))",
-    secondaryForeground: "hsl(var(--tm-secondary-foreground))",
-    muted: "hsl(var(--muted))",
-    mutedForeground: "hsl(var(--muted-foreground))",
-    accent: "hsl(var(--tm-accent))",
-    accentForeground: "hsl(var(--tm-accent-foreground))",
-    destructive: `hsl(${semanticColors.day.error})`,
-    destructiveForeground: semanticColors.day.errorForeground,
-    chart1: `hsl(${chartColors.day.chart1})`,
-    chart2: `hsl(${chartColors.day.chart2})`,
-    chart3: `hsl(${chartColors.day.chart3})`,
-    chart4: `hsl(${chartColors.day.chart4})`,
-    chart5: `hsl(${chartColors.day.chart5})`
-  },
-  night: {
-    ...baseColors.night,
-    primary: "hsl(var(--tm-primary))",
-    primaryForeground: "hsl(var(--tm-primary-foreground))",
-    secondary: "hsl(var(--tm-secondary))",
-    secondaryForeground: "hsl(var(--tm-secondary-foreground))",
-    muted: "hsl(var(--muted))",
-    mutedForeground: "hsl(var(--muted-foreground))",
-    accent: "hsl(var(--tm-accent))",
-    accentForeground: "hsl(var(--tm-accent-foreground))",
-    destructive: `hsl(${semanticColors.night.error})`,
-    destructiveForeground: semanticColors.night.errorForeground,
-    chart1: `hsl(${chartColors.night.chart1})`,
-    chart2: `hsl(${chartColors.night.chart2})`,
-    chart3: `hsl(${chartColors.night.chart3})`,
-    chart4: `hsl(${chartColors.night.chart4})`,
-    chart5: `hsl(${chartColors.night.chart5})`
+async function getTheme(name) {
+  const themeLoader = themes[name];
+  if (!themeLoader) {
+    throw new Error(`Theme "${name}" not found`);
   }
-};
-({
-  // Primary scale
-  "--primary-50": primaryColors[50],
-  "--primary-100": primaryColors[100],
-  "--primary-200": primaryColors[200],
-  "--primary-300": primaryColors[300],
-  "--primary-400": primaryColors[400],
-  "--primary-500": primaryColors[500],
-  "--primary-600": primaryColors[600],
-  "--primary-700": primaryColors[700],
-  "--primary-800": primaryColors[800],
-  "--primary-900": primaryColors[900],
-  "--primary-950": primaryColors[950],
-  // Accent scale
-  "--accent-50": accentColors[50],
-  "--accent-100": accentColors[100],
-  "--accent-200": accentColors[200],
-  "--accent-300": accentColors[300],
-  "--accent-400": accentColors[400],
-  "--accent-500": accentColors[500],
-  "--accent-600": accentColors[600],
-  "--accent-700": accentColors[700],
-  "--accent-800": accentColors[800],
-  "--accent-900": accentColors[900],
-  "--accent-950": accentColors[950],
-  // Secondary scale
-  "--secondary-50": secondaryColors[50],
-  "--secondary-100": secondaryColors[100],
-  "--secondary-200": secondaryColors[200],
-  "--secondary-300": secondaryColors[300],
-  "--secondary-400": secondaryColors[400],
-  "--secondary-500": secondaryColors[500],
-  "--secondary-600": secondaryColors[600],
-  "--secondary-700": secondaryColors[700],
-  "--secondary-800": secondaryColors[800],
-  "--secondary-900": secondaryColors[900],
-  "--secondary-950": secondaryColors[950]
-  // Surface colors (mode-dependent, set dynamically by theme system)
-  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
-  // Semantic colors (mode-dependent, set dynamically by theme system)
-  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
-  // Text colors (mode-dependent, set dynamically by theme system)
-  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
-  // Chart colors (mode-dependent, set dynamically by theme system)
-  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
-});
-var tailwindThemeColors = {
-  // Base colors
-  background: "hsl(var(--background))",
-  foreground: "hsl(var(--foreground))",
-  // Card colors
-  card: {
-    DEFAULT: "hsl(var(--card))",
-    foreground: "hsl(var(--card-foreground))"
-  },
-  // Popover colors
-  popover: {
-    DEFAULT: "hsl(var(--popover))",
-    foreground: "hsl(var(--popover-foreground))"
-  },
-  // Primary colors (using CSS variables)
-  primary: {
-    DEFAULT: "hsl(var(--tm-primary))",
-    foreground: "hsl(var(--tm-primary-foreground))",
-    50: `hsl(var(--primary-50))`,
-    100: `hsl(var(--primary-100))`,
-    200: `hsl(var(--primary-200))`,
-    300: `hsl(var(--primary-300))`,
-    400: `hsl(var(--primary-400))`,
-    500: `hsl(var(--primary-500))`,
-    600: `hsl(var(--primary-600))`,
-    700: `hsl(var(--primary-700))`,
-    800: `hsl(var(--primary-800))`,
-    900: `hsl(var(--primary-900))`,
-    950: `hsl(var(--primary-950))`
-  },
-  // Secondary colors
-  secondary: {
-    DEFAULT: "hsl(var(--tm-secondary))",
-    foreground: "hsl(var(--tm-secondary-foreground))",
-    50: `hsl(var(--secondary-50))`,
-    100: `hsl(var(--secondary-100))`,
-    200: `hsl(var(--secondary-200))`,
-    300: `hsl(var(--secondary-300))`,
-    400: `hsl(var(--secondary-400))`,
-    500: `hsl(var(--secondary-500))`,
-    600: `hsl(var(--secondary-600))`,
-    700: `hsl(var(--secondary-700))`,
-    800: `hsl(var(--secondary-800))`,
-    900: `hsl(var(--secondary-900))`,
-    950: `hsl(var(--secondary-950))`
-  },
-  // Accent colors
-  accent: {
-    DEFAULT: "hsl(var(--tm-accent))",
-    foreground: "hsl(var(--tm-accent-foreground))",
-    50: `hsl(var(--accent-50))`,
-    100: `hsl(var(--accent-100))`,
-    200: `hsl(var(--accent-200))`,
-    300: `hsl(var(--accent-300))`,
-    400: `hsl(var(--accent-400))`,
-    500: `hsl(var(--accent-500))`,
-    600: `hsl(var(--accent-600))`,
-    700: `hsl(var(--accent-700))`,
-    800: `hsl(var(--accent-800))`,
-    900: `hsl(var(--accent-900))`,
-    950: `hsl(var(--accent-950))`
-  },
-  // Muted colors
-  muted: {
-    DEFAULT: "hsl(var(--muted))",
-    foreground: "hsl(var(--muted-foreground))"
-  },
-  // Destructive colors (semantic error)
-  destructive: {
-    DEFAULT: "hsl(var(--destructive))",
-    foreground: "hsl(var(--destructive-foreground))"
-  },
-  // Semantic colors
-  success: {
-    DEFAULT: `hsl(var(--semantic-success))`,
-    foreground: `hsl(var(--semantic-success-foreground))`
-  },
-  error: {
-    DEFAULT: `hsl(var(--semantic-error))`,
-    foreground: `hsl(var(--semantic-error-foreground))`
-  },
-  warning: {
-    DEFAULT: `hsl(var(--semantic-warning))`,
-    foreground: `hsl(var(--semantic-warning-foreground))`
-  },
-  info: {
-    DEFAULT: `hsl(var(--semantic-info))`,
-    foreground: `hsl(var(--semantic-info-foreground))`
-  },
-  // Surface colors
-  surface: {
-    base: `hsl(var(--surface-base))`,
-    elevated1: `hsl(var(--surface-elevated1))`,
-    elevated2: `hsl(var(--surface-elevated2))`,
-    elevated3: `hsl(var(--surface-elevated3))`,
-    overlay: `hsl(var(--surface-overlay))`,
-    glass: `hsl(var(--surface-glass))`
-  },
-  // Text colors
-  text: {
-    primary: `hsl(var(--text-primary))`,
-    secondary: `hsl(var(--text-secondary))`,
-    tertiary: `hsl(var(--text-tertiary))`,
-    muted: `hsl(var(--text-muted))`,
-    destructive: `hsl(var(--destructive))`,
-    accent: `hsl(var(--tm-accent))`,
-    inverse: `hsl(var(--text-inverse))`
-  },
-  // Border and input
-  border: "hsl(var(--border))",
-  input: "hsl(var(--input))",
-  ring: "hsl(var(--ring))",
-  // Chart colors (using CSS variables)
-  chart: {
-    1: `hsl(var(--chart-1))`,
-    2: `hsl(var(--chart-2))`,
-    3: `hsl(var(--chart-3))`,
-    4: `hsl(var(--chart-4))`,
-    5: `hsl(var(--chart-5))`
+  return await themeLoader();
+}
+
+// src/FOUNDATION/tokens/state-matrix.ts
+function getStateVariableName(component, variant, state, property) {
+  const propertyMap = {
+    background: "bg",
+    text: "text",
+    border: "border",
+    outline: "outline",
+    shadow: "shadow"
+  };
+  const propertySuffix = propertyMap[property];
+  return `--${component}-${variant}-${state}-${propertySuffix}`;
+}
+function flattenStateMatrix(stateMatrix) {
+  const variables = /* @__PURE__ */ new Map();
+  for (const [componentName, componentStates] of Object.entries(stateMatrix)) {
+    for (const [variantName, variantStates] of Object.entries(componentStates)) {
+      for (const [state, stateProperties] of Object.entries(variantStates)) {
+        if (stateProperties && typeof stateProperties === "object") {
+          for (const [property, value] of Object.entries(stateProperties)) {
+            if (value && typeof value === "string") {
+              const varName = getStateVariableName(
+                componentName,
+                variantName,
+                state,
+                property
+              );
+              variables.set(varName, value);
+            }
+          }
+        }
+      }
+    }
   }
-};
+  return variables;
+}
 
-// src/tokens/motion.ts
-var durations = {
-  instant: "0ms",
-  fast: "150ms",
-  // 1.5 × base (quick interactions)
-  normal: "300ms",
-  // 3 × base (default)
-  slow: "500ms",
-  // 5 × base (emphasized)
-  slower: "700ms",
-  // 7 × base (very emphasized)
-  slowest: "1000ms",
-  // 10 × base (maximum emphasis)
-  // Additional granular durations
-  "75": "75ms",
-  // Ultra-fast
-  "100": "100ms",
-  // Base unit
-  "200": "200ms",
-  // Fast-normal
-  "250": "250ms",
-  // Between fast and normal
-  "400": "400ms",
-  // Between normal and slow
-  "600": "600ms",
-  // Between slow and slower
-  "800": "800ms"
-  // Between slower and slowest
-};
-var easings = {
-  // Linear (no easing)
-  linear: "linear",
-  // Ease-in (accelerate) - cubic-bezier
-  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-  // Ease-out (decelerate) - recommended for most UI - cubic-bezier
-  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
-  // Ease-in-out (accelerate and decelerate)
-  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
-  // Advanced easing functions
-  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
-  elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
-  // Material Design easing
-  "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
-  "ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
-  "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)"
-};
-var transitions = {
-  // Fast transitions (quick interactions)
-  fast: `${durations.fast} ${easings["ease-out"]}`,
-  "fast-in": `${durations.fast} ${easings["ease-in"]}`,
-  "fast-out": `${durations.fast} ${easings["ease-out"]}`,
-  "fast-in-out": `${durations.fast} ${easings["ease-in-out"]}`,
-  // Normal transitions (default)
-  normal: `${durations.normal} ${easings["ease-in-out"]}`,
-  "normal-in": `${durations.normal} ${easings["ease-in"]}`,
-  "normal-out": `${durations.normal} ${easings["ease-out"]}`,
-  "normal-in-out": `${durations.normal} ${easings["ease-in-out"]}`,
-  // Slow transitions (emphasized)
-  slow: `${durations.slow} ${easings["ease-in-out"]}`,
-  "slow-in": `${durations.slow} ${easings["ease-in"]}`,
-  "slow-out": `${durations.slow} ${easings["ease-out"]}`,
-  "slow-in-out": `${durations.slow} ${easings["ease-in-out"]}`,
-  // Special transitions
-  bounce: `${durations.normal} ${easings.bounce}`,
-  elastic: `${durations.slow} ${easings.elastic}`,
-  // Default (normal)
-  DEFAULT: `${durations.normal} ${easings["ease-in-out"]}`
-};
-var motionCSSVariables = {
-  // Durations
-  "--duration-instant": durations.instant,
-  "--duration-fast": durations.fast,
-  "--duration-normal": durations.normal,
-  "--duration-slow": durations.slow,
-  "--duration-slower": durations.slower,
-  "--duration-slowest": durations.slowest,
-  // Additional granular durations
-  "--duration-75": durations["75"],
-  "--duration-100": durations["100"],
-  "--duration-200": durations["200"],
-  "--duration-250": durations["250"],
-  "--duration-400": durations["400"],
-  "--duration-600": durations["600"],
-  "--duration-800": durations["800"],
-  // Easings
-  "--ease-linear": easings.linear,
-  "--ease-in": easings["ease-in"],
-  "--ease-out": easings["ease-out"],
-  "--ease-in-out": easings["ease-in-out"],
-  "--ease-bounce": easings.bounce,
-  "--ease-elastic": easings.elastic,
-  "--ease-out-cubic": easings["ease-out-cubic"],
-  "--ease-in-cubic": easings["ease-in-cubic"],
-  "--ease-in-out-cubic": easings["ease-in-out-cubic"],
-  // Transitions
-  "--transition-fast": transitions.fast,
-  "--transition-normal": transitions.normal,
-  "--transition-slow": transitions.slow,
-  "--transition-default": transitions.DEFAULT,
-  "--transition-fast-in": transitions["fast-in"],
-  "--transition-fast-out": transitions["fast-out"],
-  "--transition-fast-in-out": transitions["fast-in-out"],
-  "--transition-normal-in": transitions["normal-in"],
-  "--transition-normal-out": transitions["normal-out"],
-  "--transition-normal-in-out": transitions["normal-in-out"],
-  "--transition-slow-in": transitions["slow-in"],
-  "--transition-slow-out": transitions["slow-out"],
-  "--transition-slow-in-out": transitions["slow-in-out"],
-  "--transition-bounce": transitions.bounce,
-  "--transition-elastic": transitions.elastic
-};
+// src/FOUNDATION/tokens/states.ts
+function getButtonStateMatrix(mode, baseColors2, surfaceColors2) {
+  const primaryBase = primaryColors[600];
+  const primaryHover = primaryColors[700];
+  const primaryActive = primaryColors[800];
+  const primaryFocus = primaryColors[600];
+  const primaryDisabledBg = primaryColors[300];
+  const primaryDisabledText = primaryColors[400];
+  const primaryLoading = primaryColors[600];
+  const secondaryHover = secondaryColors[700];
+  const secondaryActive = secondaryColors[800];
+  const secondaryDisabledBg = secondaryColors[300];
+  const secondaryDisabledText = secondaryColors[400];
+  const accentHover = accentColors[700];
+  const accentActive = accentColors[800];
+  const accentDisabledBg = accentColors[300];
+  const accentDisabledText = accentColors[400];
+  const outlineHoverBg = accentColors[600];
+  const outlineHoverText = accentColors[950];
+  const outlineHoverBorder = accentColors[600];
+  const outlineActiveBg = accentColors[700];
+  const outlineActiveText = accentColors[950];
+  const outlineActiveBorder = accentColors[700];
+  const outlineDisabledBg = baseColors2.background;
+  const outlineDisabledText = baseColors2.foreground;
+  const outlineDisabledBorder = baseColors2.border;
+  const ghostHoverBg = surfaceColors2.elevated1;
+  const ghostHoverText = baseColors2.foreground;
+  const ghostActiveBg = surfaceColors2.elevated2;
+  const ghostActiveText = baseColors2.foreground;
+  const ghostDisabledBg = "transparent";
+  const ghostDisabledText = baseColors2.foreground;
+  const destructiveHover = semanticColors[mode].error;
+  const destructiveActive = semanticColors[mode].error;
+  const destructiveDisabledBg = semanticColors[mode].error;
+  const destructiveDisabledText = semanticColors[mode].errorForeground;
+  return {
+    button: {
+      primary: {
+        base: {
+          background: primaryBase
+        },
+        hover: {
+          background: primaryHover
+        },
+        active: {
+          background: primaryActive
+        },
+        focus: {
+          background: primaryFocus
+        },
+        disabled: {
+          background: primaryDisabledBg,
+          text: primaryDisabledText
+        },
+        loading: {
+          background: primaryLoading
+        }
+      },
+      secondary: {
+        hover: {
+          background: secondaryHover
+        },
+        active: {
+          background: secondaryActive
+        },
+        disabled: {
+          background: secondaryDisabledBg,
+          text: secondaryDisabledText
+        }
+      },
+      accent: {
+        hover: {
+          background: accentHover
+        },
+        active: {
+          background: accentActive
+        },
+        disabled: {
+          background: accentDisabledBg,
+          text: accentDisabledText
+        }
+      },
+      outline: {
+        hover: {
+          background: outlineHoverBg,
+          text: outlineHoverText,
+          border: outlineHoverBorder
+        },
+        active: {
+          background: outlineActiveBg,
+          text: outlineActiveText,
+          border: outlineActiveBorder
+        },
+        disabled: {
+          background: outlineDisabledBg,
+          text: outlineDisabledText,
+          border: outlineDisabledBorder
+        }
+      },
+      ghost: {
+        hover: {
+          background: ghostHoverBg,
+          text: ghostHoverText
+        },
+        active: {
+          background: ghostActiveBg,
+          text: ghostActiveText
+        },
+        disabled: {
+          background: ghostDisabledBg,
+          text: ghostDisabledText
+        }
+      },
+      destructive: {
+        hover: {
+          background: destructiveHover
+        },
+        active: {
+          background: destructiveActive
+        },
+        disabled: {
+          background: destructiveDisabledBg,
+          text: destructiveDisabledText
+        }
+      }
+    }
+  };
+}
+
+// src/FOUNDATION/theme/applyStateMatrix.ts
+function getMergedBaseTokens(_mode) {
+  return {
+    baseColors,
+    surfaceColors
+  };
+}
+function getAllStateMatrices(mode) {
+  const { baseColors: baseColors2, surfaceColors: surfaceColors2 } = getMergedBaseTokens();
+  const buttonMatrix = getButtonStateMatrix(mode, baseColors2[mode], surfaceColors2[mode]);
+  return {
+    ...buttonMatrix
+    // Add other component matrices here as they are implemented
+    // input: getInputStateMatrix(mode, baseColors[mode], surfaceColors[mode]),
+    // select: getSelectStateMatrix(mode, baseColors[mode], surfaceColors[mode]),
+  };
+}
+function updateStateMatrixFromTokens(mode) {
+  if (typeof document === "undefined" || !document.documentElement) return;
+  const root = document.documentElement;
+  let stateMatrix;
+  try {
+    stateMatrix = getAllStateMatrices(mode);
+  } catch (error) {
+    console.error("[State Matrix] Failed to get state matrices:", error);
+    return;
+  }
+  let variables;
+  try {
+    variables = flattenStateMatrix(stateMatrix);
+  } catch (error) {
+    console.error("[State Matrix] Failed to flatten state matrix:", error);
+    return;
+  }
+  const hoverVars = {};
+  variables.forEach((value, varName) => {
+    try {
+      root.style.setProperty(varName, value);
+      if (varName.includes("hover") || varName.includes("active") || varName.includes("disabled")) {
+        hoverVars[varName] = value;
+      }
+    } catch (error) {
+      console.error(`[State Matrix] Failed to set variable ${varName}:`, error);
+    }
+  });
+  if (typeof window !== "undefined") {
+    const primaryHoverVar = root.style.getPropertyValue("--button-primary-hover-bg");
+    const primaryHoverComputed = typeof getComputedStyle !== "undefined" ? getComputedStyle(root).getPropertyValue("--button-primary-hover-bg") : "N/A";
+    fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        location: "applyStateMatrix.ts:103",
+        message: "State variables set check",
+        data: {
+          totalVars: variables.size,
+          hoverVarsCount: Object.keys(hoverVars).length,
+          primaryHoverVar,
+          primaryHoverComputed,
+          sampleHoverVars: Object.fromEntries(Object.entries(hoverVars).slice(0, 5))
+        },
+        timestamp: Date.now(),
+        sessionId: "debug-session",
+        runId: "run1",
+        hypothesisId: "B"
+      })
+    }).catch(() => {
+    });
+  }
+}
 
-// src/theme/applyMode.ts
+// src/FOUNDATION/theme/applyMode.ts
 var MODE_ATTRIBUTE = "data-mode";
 var THEME_ATTRIBUTE = "data-theme-name";
 var MODE_THEME_ATTRIBUTE = "data-theme";
@@ -1781,9 +2770,30 @@ function getMergedTokens(_mode) {
   };
 }
 function updateCSSVariablesFromTokens(mode) {
-  if (typeof document === "undefined") return;
+  if (typeof document === "undefined" || !document.documentElement) return;
   const root = document.documentElement;
-  const tokens = getMergedTokens();
+  let tokens;
+  try {
+    tokens = getMergedTokens(mode);
+  } catch (error) {
+    console.error("[Theme] Failed to get merged tokens:", error);
+    return;
+  }
+  const secondary800 = tokens.secondaryColors[800];
+  fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      location: "applyMode.ts:188",
+      message: "tokens retrieved",
+      data: { hasTokens: !!tokens, secondary800, hasSecondary800: !!secondary800 },
+      timestamp: Date.now(),
+      sessionId: "debug-session",
+      runId: "run1",
+      hypothesisId: "B"
+    })
+  }).catch(() => {
+  });
   const {
     primaryColors: primaryColors2,
     accentColors: accentColors2,
@@ -1794,99 +2804,192 @@ function updateCSSVariablesFromTokens(mode) {
     textColors: textColors2,
     chartColors: chartColors2
   } = tokens;
-  const base = baseColors2[mode];
-  root.style.setProperty("--background", base.background);
-  root.style.setProperty("--foreground", base.foreground);
-  root.style.setProperty("--card", base.card);
-  root.style.setProperty("--card-foreground", base.cardForeground);
-  root.style.setProperty("--popover", base.popover);
-  root.style.setProperty("--popover-foreground", base.popoverForeground);
-  root.style.setProperty("--border", base.border);
-  root.style.setProperty("--input", base.input);
-  root.style.setProperty("--ring", base.ring);
-  const surface = surfaceColors2[mode];
-  root.style.setProperty("--surface-base", surface.base);
-  root.style.setProperty("--surface-elevated1", surface.elevated1);
-  root.style.setProperty("--surface-elevated2", surface.elevated2);
-  root.style.setProperty("--surface-elevated3", surface.elevated3);
-  root.style.setProperty("--surface-overlay", surface.overlay);
-  root.style.setProperty("--surface-glass", surface.glass);
-  const semantic = semanticColors2[mode];
-  root.style.setProperty("--semantic-success", semantic.success);
-  root.style.setProperty("--semantic-success-foreground", semantic.successForeground);
-  root.style.setProperty("--semantic-error", semantic.error);
-  root.style.setProperty("--semantic-error-foreground", semantic.errorForeground);
-  root.style.setProperty("--semantic-warning", semantic.warning);
-  root.style.setProperty("--semantic-warning-foreground", semantic.warningForeground);
-  root.style.setProperty("--semantic-info", semantic.info);
-  root.style.setProperty("--semantic-info-foreground", semantic.infoForeground);
-  const text = textColors2[mode];
-  root.style.setProperty("--text-primary", text.primary);
-  root.style.setProperty("--text-secondary", text.secondary);
-  root.style.setProperty("--text-tertiary", text.tertiary);
-  root.style.setProperty("--text-muted", text.muted);
-  root.style.setProperty("--text-inverse", text.inverse);
-  const chart = chartColors2[mode];
-  root.style.setProperty("--chart-1", chart.chart1);
-  root.style.setProperty("--chart-2", chart.chart2);
-  root.style.setProperty("--chart-3", chart.chart3);
-  root.style.setProperty("--chart-4", chart.chart4);
-  root.style.setProperty("--chart-5", chart.chart5);
-  root.style.setProperty("--primary-50", primaryColors2[50]);
-  root.style.setProperty("--primary-100", primaryColors2[100]);
-  root.style.setProperty("--primary-200", primaryColors2[200]);
-  root.style.setProperty("--primary-300", primaryColors2[300]);
-  root.style.setProperty("--primary-400", primaryColors2[400]);
-  root.style.setProperty("--primary-500", primaryColors2[500]);
-  root.style.setProperty("--primary-600", primaryColors2[600]);
-  root.style.setProperty("--primary-700", primaryColors2[700]);
-  root.style.setProperty("--primary-800", primaryColors2[800]);
-  root.style.setProperty("--primary-900", primaryColors2[900]);
-  root.style.setProperty("--primary-950", primaryColors2[950]);
-  root.style.setProperty("--accent-50", accentColors2[50]);
-  root.style.setProperty("--accent-100", accentColors2[100]);
-  root.style.setProperty("--accent-200", accentColors2[200]);
-  root.style.setProperty("--accent-300", accentColors2[300]);
-  root.style.setProperty("--accent-400", accentColors2[400]);
-  root.style.setProperty("--accent-500", accentColors2[500]);
-  root.style.setProperty("--accent-600", accentColors2[600]);
-  root.style.setProperty("--accent-700", accentColors2[700]);
-  root.style.setProperty("--accent-800", accentColors2[800]);
-  root.style.setProperty("--accent-900", accentColors2[900]);
-  root.style.setProperty("--accent-950", accentColors2[950]);
-  root.style.setProperty("--secondary-50", secondaryColors2[50]);
-  root.style.setProperty("--secondary-100", secondaryColors2[100]);
-  root.style.setProperty("--secondary-200", secondaryColors2[200]);
-  root.style.setProperty("--secondary-300", secondaryColors2[300]);
-  root.style.setProperty("--secondary-400", secondaryColors2[400]);
-  root.style.setProperty("--secondary-500", secondaryColors2[500]);
-  root.style.setProperty("--secondary-600", secondaryColors2[600]);
-  root.style.setProperty("--secondary-700", secondaryColors2[700]);
-  root.style.setProperty("--secondary-800", secondaryColors2[800]);
-  root.style.setProperty("--secondary-900", secondaryColors2[900]);
-  root.style.setProperty("--secondary-950", secondaryColors2[950]);
-  if (mode === "day") {
-    root.style.setProperty("--tm-primary", secondaryColors2[500]);
-    root.style.setProperty("--tm-primary-foreground", "0 0% 100%");
-    root.style.setProperty("--tm-secondary", "0 0% 95.7%");
-    root.style.setProperty("--tm-secondary-foreground", "0 0% 6.7%");
-    root.style.setProperty("--tm-accent", "0 0% 89.8%");
-    root.style.setProperty("--tm-accent-foreground", "0 0% 6.7%");
-  } else {
-    root.style.setProperty("--tm-primary", accentColors2[600]);
-    root.style.setProperty("--tm-primary-foreground", "0 0% 100%");
-    root.style.setProperty("--tm-secondary", "240 10% 7%");
-    root.style.setProperty("--tm-secondary-foreground", "0 0% 89.8%");
-    root.style.setProperty("--tm-accent", "240 10% 10%");
-    root.style.setProperty("--tm-accent-foreground", "0 0% 89.8%");
-  }
-  root.style.setProperty("--muted", base.card);
-  root.style.setProperty("--muted-foreground", base.cardForeground);
-  root.style.setProperty("--destructive", semantic.error);
-  root.style.setProperty("--destructive-foreground", semantic.errorForeground);
-  Object.entries(motionCSSVariables).forEach(([key, value]) => {
-    root.style.setProperty(key, value);
-  });
+  try {
+    const base = baseColors2[mode];
+    root.style.setProperty("--background", base.background);
+    root.style.setProperty("--foreground", base.foreground);
+    root.style.setProperty("--card", base.card);
+    root.style.setProperty("--card-foreground", base.cardForeground);
+    root.style.setProperty("--popover", base.popover);
+    root.style.setProperty("--popover-foreground", base.popoverForeground);
+    root.style.setProperty("--border", base.border);
+    root.style.setProperty("--input", base.input);
+    root.style.setProperty("--ring", base.ring);
+  } catch (error) {
+    console.error("[Theme] Failed to set base colors:", error);
+  }
+  try {
+    const surface = surfaceColors2[mode];
+    root.style.setProperty("--surface-base", surface.base);
+    root.style.setProperty("--surface-elevated1", surface.elevated1);
+    root.style.setProperty("--surface-elevated2", surface.elevated2);
+    root.style.setProperty("--surface-elevated3", surface.elevated3);
+    root.style.setProperty("--surface-overlay", surface.overlay);
+    root.style.setProperty("--surface-glass", surface.glass);
+  } catch (error) {
+    console.error("[Theme] Failed to set surface colors:", error);
+  }
+  try {
+    const semantic = semanticColors2[mode];
+    root.style.setProperty("--semantic-success", semantic.success);
+    root.style.setProperty("--semantic-success-foreground", semantic.successForeground);
+    root.style.setProperty("--semantic-error", semantic.error);
+    root.style.setProperty("--semantic-error-foreground", semantic.errorForeground);
+    root.style.setProperty("--semantic-warning", semantic.warning);
+    root.style.setProperty("--semantic-warning-foreground", semantic.warningForeground);
+    root.style.setProperty("--semantic-info", semantic.info);
+    root.style.setProperty("--semantic-info-foreground", semantic.infoForeground);
+  } catch (error) {
+    console.error("[Theme] Failed to set semantic colors:", error);
+  }
+  try {
+    const text = textColors2[mode];
+    root.style.setProperty("--text-primary", text.primary);
+    root.style.setProperty("--text-secondary", text.secondary);
+    root.style.setProperty("--text-tertiary", text.tertiary);
+    root.style.setProperty("--text-muted", text.muted);
+    root.style.setProperty("--text-inverse", text.inverse);
+  } catch (error) {
+    console.error("[Theme] Failed to set text colors:", error);
+  }
+  try {
+    const chart = chartColors2[mode];
+    root.style.setProperty("--chart-1", chart.chart1);
+    root.style.setProperty("--chart-2", chart.chart2);
+    root.style.setProperty("--chart-3", chart.chart3);
+    root.style.setProperty("--chart-4", chart.chart4);
+    root.style.setProperty("--chart-5", chart.chart5);
+  } catch (error) {
+    console.error("[Theme] Failed to set chart colors:", error);
+  }
+  try {
+    root.style.setProperty("--primary-50", primaryColors2[50]);
+    root.style.setProperty("--primary-100", primaryColors2[100]);
+    root.style.setProperty("--primary-200", primaryColors2[200]);
+    root.style.setProperty("--primary-300", primaryColors2[300]);
+    root.style.setProperty("--primary-400", primaryColors2[400]);
+    root.style.setProperty("--primary-500", primaryColors2[500]);
+    root.style.setProperty("--primary-600", primaryColors2[600]);
+    root.style.setProperty("--primary-700", primaryColors2[700]);
+    root.style.setProperty("--primary-800", primaryColors2[800]);
+    root.style.setProperty("--primary-900", primaryColors2[900]);
+    root.style.setProperty("--primary-950", primaryColors2[950]);
+  } catch (error) {
+    console.error("[Theme] Failed to set primary color scale:", error);
+  }
+  try {
+    root.style.setProperty("--accent-50", accentColors2[50]);
+    root.style.setProperty("--accent-100", accentColors2[100]);
+    root.style.setProperty("--accent-200", accentColors2[200]);
+    root.style.setProperty("--accent-300", accentColors2[300]);
+    root.style.setProperty("--accent-400", accentColors2[400]);
+    root.style.setProperty("--accent-500", accentColors2[500]);
+    root.style.setProperty("--accent-600", accentColors2[600]);
+    root.style.setProperty("--accent-700", accentColors2[700]);
+    root.style.setProperty("--accent-800", accentColors2[800]);
+    root.style.setProperty("--accent-900", accentColors2[900]);
+    root.style.setProperty("--accent-950", accentColors2[950]);
+  } catch (error) {
+    console.error("[Theme] Failed to set accent color scale:", error);
+  }
+  try {
+    root.style.setProperty("--secondary-50", secondaryColors2[50]);
+    root.style.setProperty("--secondary-100", secondaryColors2[100]);
+    root.style.setProperty("--secondary-200", secondaryColors2[200]);
+    root.style.setProperty("--secondary-300", secondaryColors2[300]);
+    root.style.setProperty("--secondary-400", secondaryColors2[400]);
+    root.style.setProperty("--secondary-500", secondaryColors2[500]);
+    root.style.setProperty("--secondary-600", secondaryColors2[600]);
+    root.style.setProperty("--secondary-700", secondaryColors2[700]);
+    root.style.setProperty("--secondary-800", secondaryColors2[800]);
+    root.style.setProperty("--secondary-900", secondaryColors2[900]);
+    root.style.setProperty("--secondary-950", secondaryColors2[950]);
+  } catch (error) {
+    console.error("[Theme] Failed to set secondary color scale:", error);
+  }
+  try {
+    if (mode === "day") {
+      root.style.setProperty("--tm-primary", secondaryColors2[800]);
+      root.style.setProperty("--tm-primary-foreground", "0 0% 100%");
+      root.style.setProperty("--tm-secondary", secondaryColors2[600]);
+      root.style.setProperty("--tm-secondary-foreground", "0 0% 100%");
+      root.style.setProperty("--tm-accent", accentColors2[600]);
+      root.style.setProperty("--tm-accent-foreground", "0 0% 100%");
+    } else {
+      root.style.setProperty("--tm-primary", accentColors2[600]);
+      root.style.setProperty("--tm-primary-foreground", "0 0% 100%");
+      root.style.setProperty("--tm-secondary", "240 10% 7%");
+      root.style.setProperty("--tm-secondary-foreground", "0 0% 89.8%");
+      root.style.setProperty("--tm-accent", "240 10% 10%");
+      root.style.setProperty("--tm-accent-foreground", "0 0% 89.8%");
+    }
+  } catch (error) {
+    console.error("[Theme] Failed to set Tenerife brand colors:", error);
+  }
+  try {
+    const base = baseColors2[mode];
+    root.style.setProperty("--muted", base.card);
+    root.style.setProperty("--muted-foreground", base.cardForeground);
+  } catch (error) {
+    console.error("[Theme] Failed to set muted colors:", error);
+  }
+  try {
+    const accentValue = mode === "day" ? accentColors2[600] : "240 10% 10%";
+    const accentForegroundValue = mode === "day" ? "0 0% 100%" : "0 0% 89.8%";
+    root.style.setProperty("--accent", accentValue);
+    root.style.setProperty("--accent-foreground", accentForegroundValue);
+  } catch (error) {
+    console.error("[Theme] Failed to set accent aliases:", error);
+  }
+  try {
+    const semantic = semanticColors2[mode];
+    root.style.setProperty("--destructive", semantic.error);
+    root.style.setProperty("--destructive-foreground", semantic.errorForeground);
+  } catch (error) {
+    console.error("[Theme] Failed to set destructive colors:", error);
+  }
+  try {
+    Object.entries(motionCSSVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  } catch (error) {
+    console.error("[Theme] Failed to set motion CSS variables:", error);
+  }
+  try {
+    Object.entries(motionV2CSSVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  } catch (error) {
+    console.error("[Theme] Failed to set motion V2 CSS variables:", error);
+  }
+  try {
+    Object.entries(radiusCSSVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  } catch (error) {
+    console.error("[Theme] Failed to set radius CSS variables:", error);
+  }
+  try {
+    Object.entries(shadowCSSVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  } catch (error) {
+    console.error("[Theme] Failed to set shadow CSS variables:", error);
+  }
+  try {
+    Object.entries(spacingCSSVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  } catch (error) {
+    console.error("[Theme] Failed to set spacing CSS variables:", error);
+  }
+  try {
+    Object.entries(typographyCSSVariables).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  } catch (error) {
+    console.error("[Theme] Failed to set typography CSS variables:", error);
+  }
 }
 async function applyDocumentTheme(mode, themeName = "default", brandId = null) {
   if (typeof document === "undefined") return;
@@ -1913,6 +3016,7 @@ async function applyDocumentTheme(mode, themeName = "default", brandId = null) {
     root.classList.remove(DARK_CLASS);
   }
   updateCSSVariablesFromTokens(mode);
+  updateStateMatrixFromTokens(mode);
   const tokens = getMergedTokens();
   const { background, foreground } = tokens.baseColors[mode];
   if (body) {
@@ -1986,7 +3090,7 @@ function persistBrand(brandId, storageKey = "tm_brand") {
   }
 }
 
-// src/theme/registry.ts
+// src/FOUNDATION/theme/registry.ts
 var themeRegistry = /* @__PURE__ */ new Map();
 function registerTheme(entry) {
   themeRegistry.set(entry.metadata.id, entry);
@@ -2066,7 +3170,7 @@ function initializeDefaultThemes() {
 }
 initializeDefaultThemes();
 
-// src/theme/schema.ts
+// src/FOUNDATION/theme/schema.ts
 var REQUIRED_FIELDS = ["id", "name"];
 function validateThemeSchema(theme) {
   const errors = [];
@@ -2160,7 +3264,7 @@ function createMinimalThemeSchema(id, name) {
   };
 }
 
-// src/theme/loader.ts
+// src/FOUNDATION/theme/loader.ts
 var DEFAULT_OPTIONS = {
   fallbackThemeId: "default",
   validate: true,
@@ -2237,8 +3341,8 @@ async function canLoadTheme(themeId) {
   }
 }
 
-// src/theme/spacing.ts
-var spacing = {
+// src/FOUNDATION/theme/spacing.ts
+var spacing2 = {
   none: "0",
   xs: "0.25rem",
   // 4px
@@ -2259,7 +3363,7 @@ var spacing = {
   "5xl": "5rem"
   // 80px
 };
-var borderRadius = {
+var borderRadius2 = {
   none: "0px",
   sm: "0.125rem",
   // 2px
@@ -2442,6 +3546,23 @@ function ThemeProvider({
     }
   }, [reduceMotionOverride, enableAnimationsOverride]);
   React__default.default.useEffect(() => {
+    if (typeof document !== "undefined" && document.documentElement) {
+      const beforeApply = document.documentElement.style.getPropertyValue("--tm-primary");
+      fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          location: "ThemeProvider.tsx:281",
+          message: "ThemeProvider useEffect before applyDocumentTheme",
+          data: { beforeValue: beforeApply, hasValue: !!beforeApply },
+          timestamp: Date.now(),
+          sessionId: "debug-session",
+          runId: "run1",
+          hypothesisId: "C"
+        })
+      }).catch(() => {
+      });
+    }
     const initialMode = getInitialMode(defaultMode, storageKey, enableSystem);
     const initialTheme = getInitialTheme(defaultTheme2, themeStorageKey);
     const initialBrand = getInitialBrand(defaultBrand, brandStorageKey);
@@ -2449,6 +3570,25 @@ function ThemeProvider({
     setThemeState(initialTheme);
     setBrandState(initialBrand);
     applyDocumentTheme(initialMode, initialTheme, initialBrand);
+    if (typeof document !== "undefined" && document.documentElement) {
+      setTimeout(() => {
+        const afterApply = document.documentElement.style.getPropertyValue("--tm-primary");
+        fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            location: "ThemeProvider.tsx:289",
+            message: "ThemeProvider useEffect after applyDocumentTheme",
+            data: { afterValue: afterApply, hasValue: !!afterApply },
+            timestamp: Date.now(),
+            sessionId: "debug-session",
+            runId: "run1",
+            hypothesisId: "C"
+          })
+        }).catch(() => {
+        });
+      }, 100);
+    }
     persistMode(initialMode, storageKey);
     persistTheme(initialTheme, themeStorageKey);
     persistBrand(initialBrand, brandStorageKey);
@@ -2477,7 +3617,45 @@ function ThemeProvider({
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, [enableSystem, storageKey, setMode]);
   React__default.default.useEffect(() => {
+    if (typeof document !== "undefined" && document.documentElement) {
+      const beforeChange = document.documentElement.style.getPropertyValue("--tm-primary");
+      fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          location: "ThemeProvider.tsx:325",
+          message: "ThemeProvider useEffect mode/theme/brand change",
+          data: { mode, theme, brand, beforeValue: beforeChange, hasValue: !!beforeChange },
+          timestamp: Date.now(),
+          sessionId: "debug-session",
+          runId: "run1",
+          hypothesisId: "C"
+        })
+      }).catch(() => {
+      });
+    }
     applyDocumentTheme(mode, theme, brand);
+    if (typeof document !== "undefined" && document.documentElement) {
+      setTimeout(() => {
+        if (typeof document !== "undefined" && document.documentElement) {
+          const afterChange = document.documentElement.style.getPropertyValue("--tm-primary");
+          fetch("http://127.0.0.1:7243/ingest/ff5d1e20-0815-4ca0-af82-fcbd3cfa35b1", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              location: "ThemeProvider.tsx:327",
+              message: "ThemeProvider useEffect after applyDocumentTheme change",
+              data: { afterValue: afterChange, hasValue: !!afterChange },
+              timestamp: Date.now(),
+              sessionId: "debug-session",
+              runId: "run1",
+              hypothesisId: "C"
+            })
+          }).catch(() => {
+          });
+        }
+      }, 100);
+    }
   }, [mode, theme, brand]);
   const value = React__default.default.useMemo(
     () => ({
@@ -2519,7 +3697,7 @@ function useTheme() {
   return context;
 }
 
-// src/theme/typography.ts
+// src/FOUNDATION/theme/typography.ts
 var fontFamilies = {
   sans: [
     "ui-sans-serif",
@@ -2600,7 +3778,7 @@ var letterSpacings = {
 };
 
 exports.ThemeProvider = ThemeProvider;
-exports.borderRadius = borderRadius;
+exports.borderRadius = borderRadius2;
 exports.canLoadTheme = canLoadTheme;
 exports.createMinimalThemeSchema = createMinimalThemeSchema;
 exports.cssVariableColorTokens = cssVariableColorTokens;
@@ -2626,7 +3804,7 @@ exports.persistTheme = persistTheme;
 exports.preloadThemes = preloadThemes;
 exports.registerTheme = registerTheme;
 exports.shadows = shadows;
-exports.spacing = spacing;
+exports.spacing = spacing2;
 exports.tailwindThemeColors = tailwindThemeColors;
 exports.themeExists = themeExists;
 exports.themeRegistry = themeRegistry;