@tenerife.music/ui 1.0.15 → 1.1.0

package/dist/theme/index.mjs

@@ -115,6 +115,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",
@@ -1122,19 +2377,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);
         });
       }
@@ -1148,541 +2403,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";
@@ -1775,9 +2764,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,
@@ -1788,99 +2798,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;
@@ -1907,6 +3010,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) {
@@ -1980,7 +3084,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);
@@ -2060,7 +3164,7 @@ function initializeDefaultThemes() {
 }
 initializeDefaultThemes();
 
-// src/theme/schema.ts
+// src/FOUNDATION/theme/schema.ts
 var REQUIRED_FIELDS = ["id", "name"];
 function validateThemeSchema(theme) {
   const errors = [];
@@ -2154,7 +3258,7 @@ function createMinimalThemeSchema(id, name) {
   };
 }
 
-// src/theme/loader.ts
+// src/FOUNDATION/theme/loader.ts
 var DEFAULT_OPTIONS = {
   fallbackThemeId: "default",
   validate: true,
@@ -2231,8 +3335,8 @@ async function canLoadTheme(themeId) {
   }
 }
 
-// src/theme/spacing.ts
-var spacing = {
+// src/FOUNDATION/theme/spacing.ts
+var spacing2 = {
   none: "0",
   xs: "0.25rem",
   // 4px
@@ -2253,7 +3357,7 @@ var spacing = {
   "5xl": "5rem"
   // 80px
 };
-var borderRadius = {
+var borderRadius2 = {
   none: "0px",
   sm: "0.125rem",
   // 2px
@@ -2436,6 +3540,23 @@ function ThemeProvider({
     }
   }, [reduceMotionOverride, enableAnimationsOverride]);
   React.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);
@@ -2443,6 +3564,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);
@@ -2471,7 +3611,45 @@ function ThemeProvider({
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, [enableSystem, storageKey, setMode]);
   React.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.useMemo(
     () => ({
@@ -2513,7 +3691,7 @@ function useTheme() {
   return context;
 }
 
-// src/theme/typography.ts
+// src/FOUNDATION/theme/typography.ts
 var fontFamilies = {
   sans: [
     "ui-sans-serif",
@@ -2593,4 +3771,4 @@ var letterSpacings = {
   widest: "0.1em"
 };
 
-export { ThemeProvider, borderRadius, canLoadTheme, createMinimalThemeSchema, cssVariableColorTokens, fontFamilies, fontSizes, fontWeights, getAllThemes, getAvailableThemeIds, getInitialBrand, getInitialMode, getInitialTheme, getThemeMetadata, getThemesByCategory, initializeDefaultThemes, isThemeSchema, letterSpacings, lineHeights, loadTheme, loadThemeSafe, persistBrand, persistMode, persistTheme, preloadThemes, registerTheme, shadows, spacing, tailwindThemeColors, themeExists, themeRegistry, useTheme, validateThemeSchema };
+export { ThemeProvider, borderRadius2 as borderRadius, canLoadTheme, createMinimalThemeSchema, cssVariableColorTokens, fontFamilies, fontSizes, fontWeights, getAllThemes, getAvailableThemeIds, getInitialBrand, getInitialMode, getInitialTheme, getThemeMetadata, getThemesByCategory, initializeDefaultThemes, isThemeSchema, letterSpacings, lineHeights, loadTheme, loadThemeSafe, persistBrand, persistMode, persistTheme, preloadThemes, registerTheme, shadows, spacing2 as spacing, tailwindThemeColors, themeExists, themeRegistry, useTheme, validateThemeSchema };