@tenerife.music/ui 1.0.13 → 1.0.16

package/dist/theme/index.mjs

@@ -1122,19 +1122,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);
         });
       }
@@ -1186,13 +1186,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
 };
@@ -1202,12 +1207,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 = {
@@ -1216,12 +1224,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 = {
@@ -1314,13 +1325,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)
   },
@@ -1570,6 +1581,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",
@@ -1682,6 +1737,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";
@@ -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) {
@@ -2232,7 +3336,7 @@ async function canLoadTheme(themeId) {
 }
 
 // src/theme/spacing.ts
-var spacing = {
+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(
     () => ({
@@ -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 };