@tenerife.music/ui 1.0.15 → 1.0.16

package/dist/theme/index.cjs

@@ -1128,19 +1128,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);
         });
       }
@@ -1192,13 +1192,18 @@ var primaryColors = {
   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%",
+  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
 };
@@ -1208,12 +1213,15 @@ var accentColors = {
   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%",
+  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 = {
@@ -1222,12 +1230,15 @@ var secondaryColors = {
   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%",
+  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%",
-  900: "173 85% 17%",
+  // Primary variant - darkened for dominance (L* ~22, was 26)
+  900: "173 85% 20%",
   950: "173 80% 12%"
 };
 var surfaceColors = {
@@ -1320,13 +1331,13 @@ var chartColors = {
 var textColors = {
   day: {
     primary: "0 0% 9%",
-    // Almost black
+    // Almost black (neutral-900 equivalent)
     secondary: "0 0% 45%",
     // Medium gray
     tertiary: "0 0% 65%",
     // Light gray
-    muted: "0 0% 38%",
-    // Muted gray with stronger contrast
+    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)
   },
@@ -1576,6 +1587,50 @@ var tailwindThemeColors = {
   }
 };
 
+// src/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/tokens/motion.ts
 var durations = {
   instant: "0ms",
@@ -1688,6 +1743,940 @@ var motionCSSVariables = {
   "--transition-elastic": transitions.elastic
 };
 
+// src/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/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/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/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/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/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/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
 var MODE_ATTRIBUTE = "data-mode";
 var THEME_ATTRIBUTE = "data-theme-name";
@@ -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) {
@@ -2238,7 +3342,7 @@ async function canLoadTheme(themeId) {
 }
 
 // src/theme/spacing.ts
-var spacing = {
+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(
     () => ({
@@ -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;