@tenerife.music/ui 1.0.8 → 1.0.12

package/dist/tokens/index.mjs

@@ -1,9 +1,396 @@
-"use client";
-import { m as r, i as t, a as g } from "../motion-CzQhSEqk.js";
-import { b as U, o as B, c as F, g as G, h as q, j as X, k as Y, n as $, p as J, r as Q, s as Z, e as ee, q as de, d as re, t as te, f as oe, l as ae } from "../motion-CzQhSEqk.js";
-import { A as e, r as o, x as a, C as s, I as i } from "../typography-DHym9KAP.js";
-import { u as ie, l as ne, n as le, y as me, p as ue, w as ge, D as ce, E as he, K as pe, F as be, v as fe, B as xe, H as ve, G as we, m as ye, k as ke, e as Se, f as ze, h as Oe, i as Te, j as Ce, a as Ne, g as Ee, q as Ie, s as Re, o as Ve, z as Ke, t as _e, b as We, c as Le, d as Me, J as Ae } from "../typography-DHym9KAP.js";
-const v = {
+// src/tokens/colors.ts
+var primaryColors = {
+  50: "210 40% 98%",
+  // Lightest blue
+  100: "210 40% 96%",
+  200: "217 32.6% 17.5%",
+  300: "216 28% 26%",
+  400: "215 25% 27%",
+  500: "215 20% 35%",
+  // Base primary
+  600: "215 16% 47%",
+  700: "216 12% 54%",
+  800: "217 10% 62%",
+  900: "222 47.4% 11.2%",
+  950: "222 84% 4.9%"
+  // Darkest blue
+};
+var accentColors = {
+  50: "280 100% 98%",
+  100: "280 65% 96%",
+  200: "280 60% 85%",
+  300: "280 55% 75%",
+  400: "280 50% 65%",
+  500: "280 70% 67%",
+  // Base accent (night mode primary)
+  600: "259 65% 58%",
+  700: "259 60% 50%",
+  800: "259 55% 45%",
+  900: "259 50% 40%",
+  950: "259 45% 30%"
+};
+var secondaryColors = {
+  50: "173 100% 98%",
+  100: "173 100% 95%",
+  200: "173 100% 85%",
+  300: "173 100% 70%",
+  400: "173 100% 55%",
+  500: "173 100% 37%",
+  // Base secondary (Tenerife #00bfa6)
+  600: "173 100% 32%",
+  700: "173 95% 27%",
+  800: "173 90% 22%",
+  900: "173 85% 17%",
+  950: "173 80% 12%"
+};
+var surfaceColors = {
+  day: {
+    base: "0 0% 100%",
+    // White background
+    elevated1: "0 0% 98%",
+    // Slightly elevated
+    elevated2: "0 0% 96%",
+    // More elevated
+    elevated3: "0 0% 94%",
+    // Most elevated
+    overlay: "0 0% 0% / 0.5",
+    // Overlay backdrop
+    glass: "0 0% 100% / 0.8"
+    // Glass effect
+  },
+  night: {
+    base: "240 10% 3.9%",
+    // Dark background (#0b0b10)
+    elevated1: "240 10% 5.1%",
+    // #0e1016
+    elevated2: "240 10% 6.3%",
+    // Slightly lighter
+    elevated3: "240 10% 7.5%",
+    // Even lighter
+    overlay: "0 0% 0% / 0.7",
+    // Darker overlay
+    glass: "240 10% 10% / 0.9"
+    // Dark glass effect
+  }
+};
+var semanticColors = {
+  day: {
+    success: "142 70% 28%",
+    // Darker green for better contrast
+    successForeground: "0 0% 100%",
+    error: "0 80% 40%",
+    // Richer red for contrast
+    errorForeground: "0 0% 100%",
+    warning: "38 92% 50%",
+    // Orange
+    warningForeground: "0 0% 9%",
+    info: "199 89% 48%",
+    // Blue
+    infoForeground: "0 0% 100%"
+  },
+  night: {
+    success: "142 70% 45%",
+    successForeground: "0 0% 100%",
+    error: "0 62.8% 30.6%",
+    // Darker red
+    errorForeground: "0 0% 98%",
+    warning: "38 92% 33%",
+    // Darker orange for WCAG AA contrast with white text
+    warningForeground: "0 0% 100%",
+    // Light foreground for dark theme readability
+    info: "199 89% 35%",
+    // Darker blue for WCAG AA contrast with white text
+    infoForeground: "0 0% 100%"
+    // Light foreground for dark theme readability
+  }
+};
+var chartColors = {
+  day: {
+    chart1: "12 76% 61%",
+    // Orange-red
+    chart2: "173 58% 39%",
+    // Teal-cyan
+    chart3: "197 37% 24%",
+    // Dark blue
+    chart4: "43 74% 66%",
+    // Yellow
+    chart5: "27 87% 67%"
+    // Orange
+  },
+  night: {
+    chart1: "220 70% 50%",
+    // Blue
+    chart2: "160 60% 45%",
+    // Teal
+    chart3: "30 80% 55%",
+    // Orange
+    chart4: "280 65% 60%",
+    // Purple
+    chart5: "340 75% 55%"
+    // Pink
+  }
+};
+var textColors = {
+  day: {
+    primary: "0 0% 9%",
+    // Almost black
+    secondary: "0 0% 45%",
+    // Medium gray
+    tertiary: "0 0% 65%",
+    // Light gray
+    muted: "0 0% 38%",
+    // Muted gray with stronger contrast
+    inverse: "0 0% 100%"
+    // White (for dark backgrounds)
+  },
+  night: {
+    primary: "0 0% 89.8%",
+    // Light gray (#e5e7eb)
+    secondary: "240 5% 64.9%",
+    // Medium gray
+    tertiary: "240 5% 50%",
+    // Darker gray
+    muted: "240 5% 64.9%",
+    // Muted gray
+    inverse: "0 0% 9%"
+    // Almost black (for light backgrounds)
+  }
+};
+var baseColors = {
+  day: {
+    background: "0 0% 100%",
+    foreground: "0 0% 9%",
+    card: "0 0% 100%",
+    cardForeground: "0 0% 9%",
+    popover: "0 0% 100%",
+    popoverForeground: "0 0% 9%",
+    border: "0 0% 89.8%",
+    input: "0 0% 89.8%",
+    ring: "0 0% 3.9%"
+  },
+  night: {
+    background: "240 10% 3.9%",
+    // #0b0b10
+    foreground: "0 0% 89.8%",
+    // #e5e7eb
+    card: "240 10% 3.9%",
+    cardForeground: "0 0% 89.8%",
+    popover: "240 10% 5.1%",
+    // #0e1016
+    popoverForeground: "0 0% 89.8%",
+    border: "240 3.7% 15.9%",
+    input: "240 3.7% 15.9%",
+    ring: "240 4.9% 83.9%"
+  }
+};
+var cssVariableColorTokens = {
+  day: {
+    ...baseColors.day,
+    primary: "hsl(var(--tm-primary))",
+    primaryForeground: "hsl(var(--tm-primary-foreground))",
+    secondary: "hsl(var(--tm-secondary))",
+    secondaryForeground: "hsl(var(--tm-secondary-foreground))",
+    muted: "hsl(var(--muted))",
+    mutedForeground: "hsl(var(--muted-foreground))",
+    accent: "hsl(var(--tm-accent))",
+    accentForeground: "hsl(var(--tm-accent-foreground))",
+    destructive: `hsl(${semanticColors.day.error})`,
+    destructiveForeground: semanticColors.day.errorForeground,
+    chart1: `hsl(${chartColors.day.chart1})`,
+    chart2: `hsl(${chartColors.day.chart2})`,
+    chart3: `hsl(${chartColors.day.chart3})`,
+    chart4: `hsl(${chartColors.day.chart4})`,
+    chart5: `hsl(${chartColors.day.chart5})`
+  },
+  night: {
+    ...baseColors.night,
+    primary: "hsl(var(--tm-primary))",
+    primaryForeground: "hsl(var(--tm-primary-foreground))",
+    secondary: "hsl(var(--tm-secondary))",
+    secondaryForeground: "hsl(var(--tm-secondary-foreground))",
+    muted: "hsl(var(--muted))",
+    mutedForeground: "hsl(var(--muted-foreground))",
+    accent: "hsl(var(--tm-accent))",
+    accentForeground: "hsl(var(--tm-accent-foreground))",
+    destructive: `hsl(${semanticColors.night.error})`,
+    destructiveForeground: semanticColors.night.errorForeground,
+    chart1: `hsl(${chartColors.night.chart1})`,
+    chart2: `hsl(${chartColors.night.chart2})`,
+    chart3: `hsl(${chartColors.night.chart3})`,
+    chart4: `hsl(${chartColors.night.chart4})`,
+    chart5: `hsl(${chartColors.night.chart5})`
+  }
+};
+var colorCSSVariables = {
+  // Primary scale
+  "--primary-50": primaryColors[50],
+  "--primary-100": primaryColors[100],
+  "--primary-200": primaryColors[200],
+  "--primary-300": primaryColors[300],
+  "--primary-400": primaryColors[400],
+  "--primary-500": primaryColors[500],
+  "--primary-600": primaryColors[600],
+  "--primary-700": primaryColors[700],
+  "--primary-800": primaryColors[800],
+  "--primary-900": primaryColors[900],
+  "--primary-950": primaryColors[950],
+  // Accent scale
+  "--accent-50": accentColors[50],
+  "--accent-100": accentColors[100],
+  "--accent-200": accentColors[200],
+  "--accent-300": accentColors[300],
+  "--accent-400": accentColors[400],
+  "--accent-500": accentColors[500],
+  "--accent-600": accentColors[600],
+  "--accent-700": accentColors[700],
+  "--accent-800": accentColors[800],
+  "--accent-900": accentColors[900],
+  "--accent-950": accentColors[950],
+  // Secondary scale
+  "--secondary-50": secondaryColors[50],
+  "--secondary-100": secondaryColors[100],
+  "--secondary-200": secondaryColors[200],
+  "--secondary-300": secondaryColors[300],
+  "--secondary-400": secondaryColors[400],
+  "--secondary-500": secondaryColors[500],
+  "--secondary-600": secondaryColors[600],
+  "--secondary-700": secondaryColors[700],
+  "--secondary-800": secondaryColors[800],
+  "--secondary-900": secondaryColors[900],
+  "--secondary-950": secondaryColors[950]
+  // Surface colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+  // Semantic colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+  // Text colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+  // Chart colors (mode-dependent, set dynamically by theme system)
+  // Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
+};
+var tailwindThemeColors = {
+  // Base colors
+  background: "hsl(var(--background))",
+  foreground: "hsl(var(--foreground))",
+  // Card colors
+  card: {
+    DEFAULT: "hsl(var(--card))",
+    foreground: "hsl(var(--card-foreground))"
+  },
+  // Popover colors
+  popover: {
+    DEFAULT: "hsl(var(--popover))",
+    foreground: "hsl(var(--popover-foreground))"
+  },
+  // Primary colors (using CSS variables)
+  primary: {
+    DEFAULT: "hsl(var(--tm-primary))",
+    foreground: "hsl(var(--tm-primary-foreground))",
+    50: `hsl(var(--primary-50))`,
+    100: `hsl(var(--primary-100))`,
+    200: `hsl(var(--primary-200))`,
+    300: `hsl(var(--primary-300))`,
+    400: `hsl(var(--primary-400))`,
+    500: `hsl(var(--primary-500))`,
+    600: `hsl(var(--primary-600))`,
+    700: `hsl(var(--primary-700))`,
+    800: `hsl(var(--primary-800))`,
+    900: `hsl(var(--primary-900))`,
+    950: `hsl(var(--primary-950))`
+  },
+  // Secondary colors
+  secondary: {
+    DEFAULT: "hsl(var(--tm-secondary))",
+    foreground: "hsl(var(--tm-secondary-foreground))",
+    50: `hsl(var(--secondary-50))`,
+    100: `hsl(var(--secondary-100))`,
+    200: `hsl(var(--secondary-200))`,
+    300: `hsl(var(--secondary-300))`,
+    400: `hsl(var(--secondary-400))`,
+    500: `hsl(var(--secondary-500))`,
+    600: `hsl(var(--secondary-600))`,
+    700: `hsl(var(--secondary-700))`,
+    800: `hsl(var(--secondary-800))`,
+    900: `hsl(var(--secondary-900))`,
+    950: `hsl(var(--secondary-950))`
+  },
+  // Accent colors
+  accent: {
+    DEFAULT: "hsl(var(--tm-accent))",
+    foreground: "hsl(var(--tm-accent-foreground))",
+    50: `hsl(var(--accent-50))`,
+    100: `hsl(var(--accent-100))`,
+    200: `hsl(var(--accent-200))`,
+    300: `hsl(var(--accent-300))`,
+    400: `hsl(var(--accent-400))`,
+    500: `hsl(var(--accent-500))`,
+    600: `hsl(var(--accent-600))`,
+    700: `hsl(var(--accent-700))`,
+    800: `hsl(var(--accent-800))`,
+    900: `hsl(var(--accent-900))`,
+    950: `hsl(var(--accent-950))`
+  },
+  // Muted colors
+  muted: {
+    DEFAULT: "hsl(var(--muted))",
+    foreground: "hsl(var(--muted-foreground))"
+  },
+  // Destructive colors (semantic error)
+  destructive: {
+    DEFAULT: "hsl(var(--destructive))",
+    foreground: "hsl(var(--destructive-foreground))"
+  },
+  // Semantic colors
+  success: {
+    DEFAULT: `hsl(var(--semantic-success))`,
+    foreground: `hsl(var(--semantic-success-foreground))`
+  },
+  error: {
+    DEFAULT: `hsl(var(--semantic-error))`,
+    foreground: `hsl(var(--semantic-error-foreground))`
+  },
+  warning: {
+    DEFAULT: `hsl(var(--semantic-warning))`,
+    foreground: `hsl(var(--semantic-warning-foreground))`
+  },
+  info: {
+    DEFAULT: `hsl(var(--semantic-info))`,
+    foreground: `hsl(var(--semantic-info-foreground))`
+  },
+  // Surface colors
+  surface: {
+    base: `hsl(var(--surface-base))`,
+    elevated1: `hsl(var(--surface-elevated1))`,
+    elevated2: `hsl(var(--surface-elevated2))`,
+    elevated3: `hsl(var(--surface-elevated3))`,
+    overlay: `hsl(var(--surface-overlay))`,
+    glass: `hsl(var(--surface-glass))`
+  },
+  // Text colors
+  text: {
+    primary: `hsl(var(--text-primary))`,
+    secondary: `hsl(var(--text-secondary))`,
+    tertiary: `hsl(var(--text-tertiary))`,
+    muted: `hsl(var(--text-muted))`,
+    destructive: `hsl(var(--destructive))`,
+    accent: `hsl(var(--tm-accent))`,
+    inverse: `hsl(var(--text-inverse))`
+  },
+  // Border and input
+  border: "hsl(var(--border))",
+  input: "hsl(var(--input))",
+  ring: "hsl(var(--ring))",
+  // Chart colors (using CSS variables)
+  chart: {
+    1: `hsl(var(--chart-1))`,
+    2: `hsl(var(--chart-2))`,
+    3: `hsl(var(--chart-3))`,
+    4: `hsl(var(--chart-4))`,
+    5: `hsl(var(--chart-5))`
+  }
+};
+
+// src/tokens/components/alert.ts
+var ALERT_TOKENS = {
   /**
    * Padding for alert content
    */
@@ -62,7 +449,10 @@ const v = {
       radius: "rounded-lg"
     }
   }
-}, w = {
+};
+
+// src/tokens/components/button.ts
+var BUTTON_TOKENS = {
   /**
    * Button heights by size
    * Maps to Tailwind height utilities: h-8, h-9, h-10
@@ -206,7 +596,10 @@ const v = {
     colors: "transition-colors"
     // Color transition using motion tokens
   }
-}, y = {
+};
+
+// src/tokens/components/card.ts
+var CARD_TOKENS = {
   /**
    * Padding for card sections (CardHeader, CardContent, CardFooter)
    */
@@ -287,7 +680,270 @@ const v = {
       }
     }
   }
-}, d = {
+};
+
+// 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",
+  // 96px (12 × base)
+  // Extended scale for larger spacing
+  28: "7rem",
+  // 112px (14 × base)
+  32: "8rem",
+  // 128px (16 × base)
+  36: "9rem",
+  // 144px (18 × base)
+  40: "10rem",
+  // 160px (20 × base)
+  44: "11rem",
+  // 176px (22 × base)
+  48: "12rem",
+  // 192px (24 × base)
+  52: "13rem",
+  // 208px (26 × base)
+  56: "14rem",
+  // 224px (28 × base)
+  60: "15rem",
+  // 240px (30 × base)
+  64: "16rem",
+  // 256px (32 × base)
+  72: "18rem",
+  // 288px (36 × base)
+  80: "20rem",
+  // 320px (40 × base)
+  96: "24rem"
+  // 384px (48 × base)
+};
+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
+};
+var tailwindSpacingConfig = {
+  spacing: {
+    ...spacing,
+    // Add semantic tokens as aliases
+    xs: semanticSpacing.xs,
+    sm: semanticSpacing.sm,
+    md: semanticSpacing.md,
+    lg: semanticSpacing.lg,
+    xl: semanticSpacing.xl,
+    "2xl": semanticSpacing["2xl"],
+    "3xl": semanticSpacing["3xl"],
+    "4xl": semanticSpacing["4xl"],
+    "5xl": semanticSpacing["5xl"],
+    none: semanticSpacing.none
+  }
+};
+
+// src/tokens/components/data.ts
+var DATA_TOKENS = {
   /**
    * Table Component Tokens
    */
@@ -540,7 +1196,10 @@ const v = {
       // 16px (1rem) - maps to semanticSpacing.md
     }
   }
-}, c = {
+};
+
+// src/tokens/components/icon.ts
+var ICON_TOKENS = {
   /**
    * Icon sizes
    * Maps to Tailwind size utilities for consistent icon sizing
@@ -593,7 +1252,10 @@ const v = {
     info: "text-info"
     // Semantic info color
   }
-}, h = {
+};
+
+// src/tokens/components/motion.ts
+var MOTION_TOKENS = {
   /**
    * Transition property tokens
    * Maps to Tailwind transition utilities
@@ -630,27 +1292,27 @@ const v = {
     slowest: "duration-slowest",
     // 1000ms - maps to motion.durations.slowest
     // Granular durations
-    75: "duration-75",
+    "75": "duration-75",
     // 75ms
-    100: "duration-100",
+    "100": "duration-100",
     // 100ms
-    200: "duration-200",
+    "200": "duration-200",
     // 200ms
-    250: "duration-250",
+    "250": "duration-250",
     // 250ms
-    300: "duration-300",
+    "300": "duration-300",
     // 300ms
-    400: "duration-400",
+    "400": "duration-400",
     // 400ms
-    500: "duration-500",
+    "500": "duration-500",
     // 500ms
-    600: "duration-600",
+    "600": "duration-600",
     // 600ms
-    700: "duration-700",
+    "700": "duration-700",
     // 700ms
-    800: "duration-800",
+    "800": "duration-800",
     // 800ms
-    1e3: "duration-1000"
+    "1000": "duration-1000"
     // 1000ms
   },
   /**
@@ -723,7 +1385,10 @@ const v = {
     scaleOut: "animate-scaleOut"
     // Scale out
   }
-}, k = {
+};
+
+// src/tokens/components/domain.ts
+var DOMAIN_TOKENS = {
   /**
    * Surface tokens for card containers
    * Defines background, border, radius, and shadow for card surfaces
@@ -796,30 +1461,30 @@ const v = {
      * Badge spacing offsets
      */
     badges: {
-      offsetX: e.md,
+      offsetX: semanticSpacing.md,
       // Horizontal offset for badges (16px)
-      offsetY: e.md
+      offsetY: semanticSpacing.md
       // Vertical offset for badges (16px)
     },
     /**
      * Image spacing
      */
     image: {
-      bottomMargin: e.none
+      bottomMargin: semanticSpacing.none
       // Margin below image (0px)
     },
     /**
      * Card vertical gap
      */
     card: {
-      verticalGap: e.md
+      verticalGap: semanticSpacing.md
       // Vertical gap in card content (16px)
     },
     /**
      * Metadata item gap
      */
     metadata: {
-      itemGap: e.xs
+      itemGap: semanticSpacing.xs
       // Gap between metadata items (4px)
     },
     /**
@@ -922,7 +1587,7 @@ const v = {
     icon: {
       default: "text-muted-foreground",
       // Default icon color - maps to ICON_TOKENS.colors.muted
-      sizeSm: c.sizes.md
+      sizeSm: ICON_TOKENS.sizes.md
       // Small icon size - references ICON_TOKENS.sizes.md (16px)
     },
     /**
@@ -1043,7 +1708,7 @@ const v = {
      * References MOTION_TOKENS and elevationShadows
      */
     hover: {
-      transition: h.transitionPreset.normal,
+      transition: MOTION_TOKENS.transitionPreset.normal,
       // References MOTION_TOKENS.transitionPreset.normal
       scale: "hover:scale-110",
       // Hover scale transform (110% scale) - domain-specific value
@@ -1065,17 +1730,17 @@ const v = {
        * Default border radius for skeleton wrapper
        * References DATA_TOKENS.skeleton.radius.text
        */
-      radius: d.skeleton.radius.text,
+      radius: DATA_TOKENS.skeleton.radius.text,
       /**
        * Default animation for skeleton wrapper
        * References DATA_TOKENS.skeleton.animation.pulse
        */
-      animation: d.skeleton.animation.pulse,
+      animation: DATA_TOKENS.skeleton.animation.pulse,
       /**
        * Default background for skeleton wrapper
        * References DATA_TOKENS.skeleton.background.default
        */
-      background: d.skeleton.background.default
+      background: DATA_TOKENS.skeleton.background.default
     },
     /**
      * Image skeleton height
@@ -1100,7 +1765,7 @@ const v = {
        * References DATA_TOKENS where available, uses Tailwind fraction classes for domain-specific values
        */
       width: {
-        full: d.skeleton.width.full,
+        full: DATA_TOKENS.skeleton.width.full,
         // References DATA_TOKENS.skeleton.width.full
         threeQuarters: "w-3/4",
         // Three quarters width (75%) - domain-specific, using Tailwind fraction
@@ -1120,7 +1785,10 @@ const v = {
       // References spacing[6] (1.5rem / 24px) via Tailwind
     }
   }
-}, S = {
+};
+
+// src/tokens/components/input.ts
+var INPUT_TOKENS = {
   /**
    * Input heights by size
    * Supports xs, sm, md, lg, xl sizes
@@ -1464,7 +2132,10 @@ const v = {
       shadow: "shadow-sm"
     }
   }
-}, z = {
+};
+
+// src/tokens/components/checkbox.ts
+var CHECKBOX_TOKENS = {
   /**
    * Checkbox sizes by size variant
    * Supports xs, sm, md, lg, xl sizes
@@ -1672,7 +2343,10 @@ const v = {
    */
   transition: "transition-all duration-200 ease-in-out"
   // Smooth transitions
-}, O = {
+};
+
+// src/tokens/components/switch.ts
+var SWITCH_TOKENS = {
   /**
    * Track sizes by size variant
    * Supports xs, sm, md, lg, xl sizes
@@ -1936,7 +2610,10 @@ const v = {
    */
   padding: "p-0.5"
   // 2px padding around handle
-}, T = {
+};
+
+// src/tokens/components/radio.ts
+var RADIO_TOKENS = {
   /**
    * Radio sizes by size variant
    * Supports xs, sm, md, lg, xl sizes
@@ -2126,7 +2803,10 @@ const v = {
    */
   transition: "transition-all duration-200 ease-in-out"
   // Smooth transitions
-}, C = {
+};
+
+// src/tokens/components/surface.ts
+var SURFACE_TOKENS = {
   /**
    * Padding values for surface variants
    * Can be customized per variant if needed
@@ -2211,7 +2891,10 @@ const v = {
       border: "border border-border/50"
     }
   }
-}, N = {
+};
+
+// src/tokens/components/text.ts
+var TEXT_TOKENS = {
   /**
    * Font sizes by text size variant
    * Maps to foundation fontSize tokens
@@ -2276,7 +2959,10 @@ const v = {
     widest: "tracking-widest"
     // Maps to letterSpacing.widest
   }
-}, E = {
+};
+
+// src/tokens/components/section.ts
+var SECTION_TOKENS = {
   /**
    * Vertical padding for sections
    * Used for spacing between major page sections
@@ -2305,7 +2991,10 @@ const v = {
     xl: "gap-xl"
     // 32px (2rem) - maps to semanticSpacing.xl
   }
-}, I = {
+};
+
+// src/tokens/components/overlay.ts
+var OVERLAY_TOKENS = {
   /**
    * Backdrop tokens by variant
    * Maps to SURFACE_TOKENS for background colors
@@ -2587,7 +3276,10 @@ const v = {
       }
     }
   }
-}, R = {
+};
+
+// src/tokens/components/toast.ts
+var TOAST_TOKENS = {
   /**
    * Spacing tokens for toast layout
    * Maps to semanticSpacing tokens
@@ -2752,7 +3444,10 @@ const v = {
       // Focus ring styling
     }
   }
-}, V = {
+};
+
+// src/tokens/components/notifications.ts
+var NOTIFICATION_TOKENS = {
   /**
    * Spacing tokens for notification layout
    * Maps to semanticSpacing tokens
@@ -2942,7 +3637,10 @@ const v = {
       // Backdrop blur
     }
   }
-}, K = {
+};
+
+// src/tokens/components/navigation.ts
+var NAVIGATION_TOKENS = {
   /**
    * Navigation item heights by size
    * Maps to Tailwind height utilities: h-8, h-9, h-10
@@ -3144,7 +3842,10 @@ const v = {
     muted: "border-muted-foreground"
     // Muted border color
   }
-}, _ = {
+};
+
+// src/tokens/components/menu.ts
+var MENU_TOKENS = {
   /**
    * Menu item tokens by size
    * Maps to foundation spacing and radius tokens
@@ -3257,7 +3958,10 @@ const v = {
       // 8px - maps to semanticSpacing.sm
     }
   }
-}, W = {
+};
+
+// src/tokens/components/popover.ts
+var POPOVER_TOKENS = {
   /**
    * Popover content tokens by size
    * Maps to foundation spacing, radius, and shadow tokens
@@ -3339,7 +4043,10 @@ const v = {
     exit: "tm-motion-fade-scale-out"
     // Motion V2 fade + scale exit animation
   }
-}, L = {
+};
+
+// src/tokens/components/dropdown.ts
+var DROPDOWN_TOKENS = {
   /**
    * Trigger tokens by size
    * Button element that opens/closes the dropdown
@@ -3517,7 +4224,10 @@ const v = {
       // Maps to fontSize.base
     }
   }
-}, M = {
+};
+
+// src/tokens/components/tooltip.ts
+var TOOLTIP_TOKENS = {
   /**
    * Tooltip content tokens
    * Maps to foundation spacing, radius, shadow, and typography tokens
@@ -3560,112 +4270,1324 @@ const v = {
       // Maps to fontSize.sm (default)
     }
   }
-}, n = {
-  ...t,
-  ...i,
-  ...s,
-  ...a,
-  ...o,
-  ...r
-};
-function p(l) {
+};
+
+// 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 motionV2Fade = {
+  in: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  out: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  }
+};
+var motionV2Scale = {
+  in: {
+    from: { transform: "scale(0.95)", opacity: 0 },
+    to: { transform: "scale(1)", opacity: 1 }
+  },
+  out: {
+    from: { transform: "scale(1)", opacity: 1 },
+    to: { transform: "scale(0.95)", opacity: 0 }
+  }
+};
+var motionV2Slide = {
+  up: {
+    in: {
+      from: { transform: "translateY(100%)", opacity: 0 },
+      to: { transform: "translateY(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateY(0)", opacity: 1 },
+      to: { transform: "translateY(100%)", opacity: 0 }
+    }
+  },
+  down: {
+    in: {
+      from: { transform: "translateY(-100%)", opacity: 0 },
+      to: { transform: "translateY(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateY(0)", opacity: 1 },
+      to: { transform: "translateY(-100%)", opacity: 0 }
+    }
+  },
+  left: {
+    in: {
+      from: { transform: "translateX(100%)", opacity: 0 },
+      to: { transform: "translateX(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateX(0)", opacity: 1 },
+      to: { transform: "translateX(100%)", opacity: 0 }
+    }
+  },
+  right: {
+    in: {
+      from: { transform: "translateX(-100%)", opacity: 0 },
+      to: { transform: "translateX(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateX(0)", opacity: 1 },
+      to: { transform: "translateX(-100%)", opacity: 0 }
+    }
+  }
+};
+var motionV2Combined = {
+  fadeScale: {
+    in: {
+      from: { transform: "scale(0.95)", opacity: 0 },
+      to: { transform: "scale(1)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "scale(1)", opacity: 1 },
+      to: { transform: "scale(0.95)", opacity: 0 }
+    }
+  },
+  fadeSlideUp: {
+    in: {
+      from: { transform: "translateY(100%)", opacity: 0 },
+      to: { transform: "translateY(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateY(0)", opacity: 1 },
+      to: { transform: "translateY(100%)", opacity: 0 }
+    }
+  },
+  fadeSlideDown: {
+    in: {
+      from: { transform: "translateY(-100%)", opacity: 0 },
+      to: { transform: "translateY(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateY(0)", opacity: 1 },
+      to: { transform: "translateY(-100%)", opacity: 0 }
+    }
+  },
+  fadeSlideLeft: {
+    in: {
+      from: { transform: "translateX(100%)", opacity: 0 },
+      to: { transform: "translateX(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateX(0)", opacity: 1 },
+      to: { transform: "translateX(100%)", opacity: 0 }
+    }
+  },
+  fadeSlideRight: {
+    in: {
+      from: { transform: "translateX(-100%)", opacity: 0 },
+      to: { transform: "translateX(0)", opacity: 1 }
+    },
+    out: {
+      from: { transform: "translateX(0)", opacity: 1 },
+      to: { transform: "translateX(-100%)", opacity: 0 }
+    }
+  }
+};
+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
+};
+var motionV2TailwindConfig = {
+  transitionDuration: {
+    ...motionV2Durations
+  },
+  transitionTimingFunction: {
+    ...motionV2Easings
+  },
+  keyframes: {
+    // Fade
+    "fade-in": motionV2Fade.in,
+    "fade-out": motionV2Fade.out,
+    // Scale
+    "scale-in": motionV2Scale.in,
+    "scale-out": motionV2Scale.out,
+    // Slide
+    "slide-up-in": motionV2Slide.up.in,
+    "slide-up-out": motionV2Slide.up.out,
+    "slide-down-in": motionV2Slide.down.in,
+    "slide-down-out": motionV2Slide.down.out,
+    "slide-left-in": motionV2Slide.left.in,
+    "slide-left-out": motionV2Slide.left.out,
+    "slide-right-in": motionV2Slide.right.in,
+    "slide-right-out": motionV2Slide.right.out,
+    // Combined
+    "fade-scale-in": motionV2Combined.fadeScale.in,
+    "fade-scale-out": motionV2Combined.fadeScale.out,
+    "fade-slide-up-in": motionV2Combined.fadeSlideUp.in,
+    "fade-slide-up-out": motionV2Combined.fadeSlideUp.out,
+    "fade-slide-down-in": motionV2Combined.fadeSlideDown.in,
+    "fade-slide-down-out": motionV2Combined.fadeSlideDown.out,
+    "fade-slide-left-in": motionV2Combined.fadeSlideLeft.in,
+    "fade-slide-left-out": motionV2Combined.fadeSlideLeft.out,
+    "fade-slide-right-in": motionV2Combined.fadeSlideRight.in,
+    "fade-slide-right-out": motionV2Combined.fadeSlideRight.out
+  }
+};
+
+// src/tokens/motion.ts
+var durations = {
+  instant: "0ms",
+  fast: "150ms",
+  // 1.5 × base (quick interactions)
+  normal: "300ms",
+  // 3 × base (default)
+  slow: "500ms",
+  // 5 × base (emphasized)
+  slower: "700ms",
+  // 7 × base (very emphasized)
+  slowest: "1000ms",
+  // 10 × base (maximum emphasis)
+  // Additional granular durations
+  "75": "75ms",
+  // Ultra-fast
+  "100": "100ms",
+  // Base unit
+  "200": "200ms",
+  // Fast-normal
+  "250": "250ms",
+  // Between fast and normal
+  "400": "400ms",
+  // Between normal and slow
+  "600": "600ms",
+  // Between slow and slower
+  "800": "800ms"
+  // Between slower and slowest
+};
+var easings = {
+  // Linear (no easing)
+  linear: "linear",
+  // Ease-in (accelerate) - cubic-bezier
+  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+  // Ease-out (decelerate) - recommended for most UI - cubic-bezier
+  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+  // Ease-in-out (accelerate and decelerate)
+  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+  // Standard easing functions
+  ease: "ease",
+  // Advanced easing functions
+  bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+  elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+  // Material Design easing
+  "ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
+  "ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
+  "ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)"
+};
+var transitions = {
+  // Fast transitions (quick interactions)
+  fast: `${durations.fast} ${easings["ease-out"]}`,
+  "fast-in": `${durations.fast} ${easings["ease-in"]}`,
+  "fast-out": `${durations.fast} ${easings["ease-out"]}`,
+  "fast-in-out": `${durations.fast} ${easings["ease-in-out"]}`,
+  // Normal transitions (default)
+  normal: `${durations.normal} ${easings["ease-in-out"]}`,
+  "normal-in": `${durations.normal} ${easings["ease-in"]}`,
+  "normal-out": `${durations.normal} ${easings["ease-out"]}`,
+  "normal-in-out": `${durations.normal} ${easings["ease-in-out"]}`,
+  // Slow transitions (emphasized)
+  slow: `${durations.slow} ${easings["ease-in-out"]}`,
+  "slow-in": `${durations.slow} ${easings["ease-in"]}`,
+  "slow-out": `${durations.slow} ${easings["ease-out"]}`,
+  "slow-in-out": `${durations.slow} ${easings["ease-in-out"]}`,
+  // Special transitions
+  bounce: `${durations.normal} ${easings.bounce}`,
+  elastic: `${durations.slow} ${easings.elastic}`,
+  // Default (normal)
+  DEFAULT: `${durations.normal} ${easings["ease-in-out"]}`
+};
+var keyframes = {
+  // Fade animations
+  fadeIn: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  fadeOut: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  },
+  // Slide animations
+  slideInUp: {
+    from: { transform: "translateY(100%)", opacity: 0 },
+    to: { transform: "translateY(0)", opacity: 1 }
+  },
+  slideInDown: {
+    from: { transform: "translateY(-100%)", opacity: 0 },
+    to: { transform: "translateY(0)", opacity: 1 }
+  },
+  slideInLeft: {
+    from: { transform: "translateX(-100%)", opacity: 0 },
+    to: { transform: "translateX(0)", opacity: 1 }
+  },
+  slideInRight: {
+    from: { transform: "translateX(100%)", opacity: 0 },
+    to: { transform: "translateX(0)", opacity: 1 }
+  },
+  slideOutUp: {
+    from: { transform: "translateY(0)", opacity: 1 },
+    to: { transform: "translateY(-100%)", opacity: 0 }
+  },
+  slideOutDown: {
+    from: { transform: "translateY(0)", opacity: 1 },
+    to: { transform: "translateY(100%)", opacity: 0 }
+  },
+  slideOutLeft: {
+    from: { transform: "translateX(0)", opacity: 1 },
+    to: { transform: "translateX(-100%)", opacity: 0 }
+  },
+  slideOutRight: {
+    from: { transform: "translateX(0)", opacity: 1 },
+    to: { transform: "translateX(100%)", opacity: 0 }
+  },
+  // Scale animations
+  scaleIn: {
+    from: { transform: "scale(0.95)", opacity: 0 },
+    to: { transform: "scale(1)", opacity: 1 }
+  },
+  scaleOut: {
+    from: { transform: "scale(1)", opacity: 1 },
+    to: { transform: "scale(0.95)", opacity: 0 }
+  },
+  scaleUp: {
+    from: { transform: "scale(1)" },
+    to: { transform: "scale(1.05)" }
+  },
+  scaleDown: {
+    from: { transform: "scale(1.05)" },
+    to: { transform: "scale(1)" }
+  },
+  // Rotation animations
+  spin: {
+    from: { transform: "rotate(0deg)" },
+    to: { transform: "rotate(360deg)" }
+  },
+  spinReverse: {
+    from: { transform: "rotate(360deg)" },
+    to: { transform: "rotate(0deg)" }
+  },
+  // Pulse and bounce
+  pulse: {
+    "0%, 100%": { opacity: 1 },
+    "50%": { opacity: 0.5 }
+  },
+  bounce: {
+    "0%, 100%": {
+      transform: "translateY(-25%)",
+      animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)"
+    },
+    "50%": {
+      transform: "translateY(0)",
+      animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)"
+    }
+  },
+  // Shake animation
+  shake: {
+    "0%, 100%": { transform: "translateX(0)" },
+    "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-4px)" },
+    "20%, 40%, 60%, 80%": { transform: "translateX(4px)" }
+  },
+  // Ping animation
+  ping: {
+    "75%, 100%": {
+      transform: "scale(2)",
+      opacity: 0
+    }
+  },
+  // Accordion animations (for Radix UI)
+  "accordion-down": {
+    from: { height: "0" },
+    to: { height: "var(--radix-accordion-content-height)" }
+  },
+  "accordion-up": {
+    from: { height: "var(--radix-accordion-content-height)" },
+    to: { height: "0" }
+  }
+};
+var animations = {
+  // Fade animations
+  fadeIn: `fadeIn ${durations.normal} ${easings["ease-out"]}`,
+  fadeOut: `fadeOut ${durations.fast} ${easings["ease-in"]}`,
+  // Slide animations
+  slideInUp: `slideInUp ${durations.normal} ${easings["ease-out"]}`,
+  slideInDown: `slideInDown ${durations.normal} ${easings["ease-out"]}`,
+  slideInLeft: `slideInLeft ${durations.normal} ${easings["ease-out"]}`,
+  slideInRight: `slideInRight ${durations.normal} ${easings["ease-out"]}`,
+  slideOutUp: `slideOutUp ${durations.fast} ${easings["ease-in"]}`,
+  slideOutDown: `slideOutDown ${durations.fast} ${easings["ease-in"]}`,
+  slideOutLeft: `slideOutLeft ${durations.fast} ${easings["ease-in"]}`,
+  slideOutRight: `slideOutRight ${durations.fast} ${easings["ease-in"]}`,
+  // Scale animations
+  scaleIn: `scaleIn ${durations.normal} ${easings["ease-out"]}`,
+  scaleOut: `scaleOut ${durations.fast} ${easings["ease-in"]}`,
+  // Continuous animations
+  spin: `spin 1s ${easings.linear} infinite`,
+  pulse: `pulse 2s ${easings["ease-in-out"]} infinite`,
+  bounce: `bounce 1s ${easings.linear} infinite`,
+  ping: `ping 1s ${easings["ease-out"]} cubic-bezier(0, 0, 0.2, 1) infinite`,
+  shake: `shake 0.5s ${easings["ease-in-out"]}`,
+  // Accordion animations
+  "accordion-down": `accordion-down ${durations.normal} ${easings["ease-out"]}`,
+  "accordion-up": `accordion-up ${durations.normal} ${easings["ease-out"]}`
+};
+var springs = {
+  // Gentle spring (subtle, smooth)
+  gentle: {
+    type: "spring",
+    stiffness: 120,
+    damping: 14,
+    mass: 1
+  },
+  // Default spring (balanced)
+  default: {
+    type: "spring",
+    stiffness: 300,
+    damping: 30,
+    mass: 1
+  },
+  // Wobbly spring (bouncy, playful)
+  wobbly: {
+    type: "spring",
+    stiffness: 180,
+    damping: 12,
+    mass: 1
+  },
+  // Stiff spring (quick, precise)
+  stiff: {
+    type: "spring",
+    stiffness: 400,
+    damping: 30,
+    mass: 1
+  },
+  // Slow spring (smooth, deliberate)
+  slow: {
+    type: "spring",
+    stiffness: 200,
+    damping: 25,
+    mass: 1
+  },
+  // Bouncy spring (energetic, fun)
+  bouncy: {
+    type: "spring",
+    stiffness: 400,
+    damping: 10,
+    mass: 1
+  },
+  // No bounce (damped, controlled)
+  noBounce: {
+    type: "spring",
+    stiffness: 300,
+    damping: 35,
+    mass: 1
+  }
+};
+var reducedMotion = {
+  // Reduced motion duration (instant or minimal)
+  duration: "0ms",
+  // Reduced motion easing (linear for instant)
+  easing: "linear",
+  // Reduced motion transition (instant)
+  transition: "0ms linear",
+  // CSS media query for reduced motion
+  mediaQuery: "@media (prefers-reduced-motion: reduce)",
+  // Utility class to disable animations
+  disableAnimations: "animation: none !important; transition: none !important;",
+  // Reduced motion spring (instant, no animation)
+  spring: {
+    type: "spring",
+    stiffness: 1e3,
+    damping: 100,
+    mass: 1
+  }
+};
+var motionCSSVariables = {
+  // Durations
+  "--duration-instant": durations.instant,
+  "--duration-fast": durations.fast,
+  "--duration-normal": durations.normal,
+  "--duration-slow": durations.slow,
+  "--duration-slower": durations.slower,
+  "--duration-slowest": durations.slowest,
+  // Additional granular durations
+  "--duration-75": durations["75"],
+  "--duration-100": durations["100"],
+  "--duration-200": durations["200"],
+  "--duration-250": durations["250"],
+  "--duration-400": durations["400"],
+  "--duration-600": durations["600"],
+  "--duration-800": durations["800"],
+  // Easings
+  "--ease-linear": easings.linear,
+  "--ease-in": easings["ease-in"],
+  "--ease-out": easings["ease-out"],
+  "--ease-in-out": easings["ease-in-out"],
+  "--ease-bounce": easings.bounce,
+  "--ease-elastic": easings.elastic,
+  "--ease-out-cubic": easings["ease-out-cubic"],
+  "--ease-in-cubic": easings["ease-in-cubic"],
+  "--ease-in-out-cubic": easings["ease-in-out-cubic"],
+  // Transitions
+  "--transition-fast": transitions.fast,
+  "--transition-normal": transitions.normal,
+  "--transition-slow": transitions.slow,
+  "--transition-default": transitions.DEFAULT,
+  "--transition-fast-in": transitions["fast-in"],
+  "--transition-fast-out": transitions["fast-out"],
+  "--transition-fast-in-out": transitions["fast-in-out"],
+  "--transition-normal-in": transitions["normal-in"],
+  "--transition-normal-out": transitions["normal-out"],
+  "--transition-normal-in-out": transitions["normal-in-out"],
+  "--transition-slow-in": transitions["slow-in"],
+  "--transition-slow-out": transitions["slow-out"],
+  "--transition-slow-in-out": transitions["slow-in-out"],
+  "--transition-bounce": transitions.bounce,
+  "--transition-elastic": transitions.elastic
+};
+var tailwindMotionConfig = {
+  transitionDuration: {
+    ...durations
+  },
+  transitionTimingFunction: {
+    ...easings
+  },
+  transitionProperty: {
+    DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+    colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
+    opacity: "opacity",
+    shadow: "box-shadow",
+    transform: "transform",
+    all: "all",
+    none: "none"
+  },
+  keyframes: {
+    ...keyframes
+  },
+  animation: {
+    ...animations,
+    // Additional animation utilities
+    none: "none",
+    spin: animations.spin,
+    pulse: animations.pulse,
+    bounce: animations.bounce,
+    ping: animations.ping,
+    shake: animations.shake
+  }
+};
+
+// src/tokens/radius.ts
+var borderRadius = {
+  // No radius
+  none: "0",
+  // Extra small radius
+  xs: "0.125rem",
+  // 2px
+  // Small radius
+  sm: "0.25rem",
+  // 4px (base unit)
+  // Default radius (base)
+  DEFAULT: "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: {
+    sm: borderRadius.sm,
+    // 4px (compact buttons)
+    md: borderRadius.md,
+    // 6px (default buttons)
+    lg: borderRadius.lg,
+    // 8px (large buttons)
+    pill: borderRadius.full
+    // Full (pill buttons)
+  },
+  // Card radius standards
+  card: {
+    sm: borderRadius.sm,
+    // 4px (compact cards)
+    md: borderRadius.md,
+    // 6px (default cards)
+    lg: borderRadius.lg,
+    // 8px (large cards)
+    xl: borderRadius.xl
+    // 12px (feature cards)
+  },
+  // Input/Form field radius standards
+  input: {
+    sm: borderRadius.sm,
+    // 4px (compact inputs)
+    md: borderRadius.md,
+    // 6px (default inputs)
+    lg: borderRadius.lg
+    // 8px (large inputs)
+  },
+  // Badge/Status radius standards
+  badge: {
+    sm: borderRadius.xs,
+    // 2px (compact badges)
+    md: borderRadius.sm,
+    // 4px (default badges)
+    lg: borderRadius.md,
+    // 6px (large badges)
+    pill: borderRadius.full
+    // Full (pill badges)
+  },
+  // Avatar radius standards
+  avatar: {
+    sm: borderRadius.full,
+    // Full (small avatars)
+    md: borderRadius.full,
+    // Full (default avatars)
+    lg: borderRadius.full,
+    // Full (large avatars)
+    square: borderRadius.md
+    // 6px (square avatars)
+  },
+  // Modal/Dialog radius standards
+  modal: {
+    sm: borderRadius.md,
+    // 6px (small modals)
+    md: borderRadius.lg,
+    // 8px (default modals)
+    lg: borderRadius.xl,
+    // 12px (large modals)
+    xl: borderRadius["2xl"]
+    // 16px (extra large modals)
+  },
+  // Tooltip radius standards
+  tooltip: {
+    sm: borderRadius.sm,
+    // 4px (default tooltips)
+    md: borderRadius.md
+    // 6px (large tooltips)
+  },
+  // Toast/Notification radius standards
+  toast: {
+    sm: borderRadius.md,
+    // 6px (compact toasts)
+    md: borderRadius.lg,
+    // 8px (default toasts)
+    lg: borderRadius.xl
+    // 12px (large toasts)
+  },
+  // Chip/Tag radius standards
+  chip: {
+    sm: borderRadius.xs,
+    // 2px (compact chips)
+    md: borderRadius.sm,
+    // 4px (default chips)
+    lg: borderRadius.md,
+    // 6px (large chips)
+    pill: borderRadius.full
+    // Full (pill chips)
+  },
+  // Image/Media radius standards
+  image: {
+    none: borderRadius.none,
+    // 0 (sharp images)
+    sm: borderRadius.sm,
+    // 4px (subtle rounding)
+    md: borderRadius.md,
+    // 6px (default)
+    lg: borderRadius.lg,
+    // 8px (rounded)
+    xl: borderRadius.xl,
+    // 12px (very rounded)
+    full: borderRadius.full
+    // Full (circular images)
+  }
+};
+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
+};
+var tailwindRadiusConfig = {
+  borderRadius: {
+    ...borderRadius,
+    // Add component-specific aliases
+    button: componentRadius.button.md,
+    card: componentRadius.card.md,
+    input: componentRadius.input.md,
+    badge: componentRadius.badge.md,
+    modal: componentRadius.modal.md,
+    tooltip: componentRadius.tooltip.sm,
+    toast: componentRadius.toast.md,
+    chip: componentRadius.chip.md,
+    image: componentRadius.image.md
+  }
+};
+
+// src/tokens/shadows.ts
+var shadowBase = {
+  black: "0 0 0",
+  // Black color for shadows (rgb format)
+  overlay: "0 0 0"
+  // Black color for overlays (rgba format)
+};
+var shadowOpacity = {
+  xs: "0.05",
+  sm: "0.1",
+  md: "0.1",
+  lg: "0.1",
+  xl: "0.1",
+  "2xl": "0.25",
+  overlay: "0.5",
+  backdrop: "0.5"
+};
+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"]
+};
+var componentShadowMapping = {
+  card: {
+    default: elevationShadows.sm,
+    hover: elevationShadows.md,
+    active: elevationShadows.xs,
+    selected: primaryColoredShadows.sm
+  },
+  button: {
+    default: elevationShadows.xs,
+    hover: elevationShadows.sm,
+    active: elevationShadows.none,
+    focus: focusRings.primary
+  },
+  "button-accent": {
+    default: accentColoredShadows.xs,
+    hover: accentColoredShadows.sm,
+    active: elevationShadows.none,
+    focus: focusRings.accent
+  },
+  modal: {
+    default: elevationShadows.xl,
+    backdrop: `rgba(${shadowBase.overlay}, ${shadowOpacity.backdrop})`
+  },
+  dropdown: {
+    default: elevationShadows.md,
+    hover: elevationShadows.lg
+  },
+  tooltip: {
+    default: elevationShadows.sm
+  },
+  toast: {
+    default: elevationShadows.lg,
+    success: "0 10px 15px -3px hsl(var(--semantic-success) / 0.3)",
+    error: "0 10px 15px -3px hsl(var(--semantic-error) / 0.3)"
+  }
+};
+var tailwindShadowConfig = {
+  boxShadow: {
+    // Elevation shadows
+    none: elevationShadows.none,
+    xs: elevationShadows.xs,
+    sm: elevationShadows.sm,
+    md: elevationShadows.md,
+    lg: elevationShadows.lg,
+    xl: elevationShadows.xl,
+    "2xl": elevationShadows["2xl"],
+    // Primary colored shadows
+    "primary-xs": primaryColoredShadows.xs,
+    "primary-sm": primaryColoredShadows.sm,
+    "primary-md": primaryColoredShadows.md,
+    "primary-lg": primaryColoredShadows.lg,
+    "primary-xl": primaryColoredShadows.xl,
+    "primary-2xl": primaryColoredShadows["2xl"],
+    // Accent colored shadows
+    "accent-xs": accentColoredShadows.xs,
+    "accent-sm": accentColoredShadows.sm,
+    "accent-md": accentColoredShadows.md,
+    "accent-lg": accentColoredShadows.lg,
+    "accent-xl": accentColoredShadows.xl,
+    "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 (using box-shadow for focus states)
+    "focus-ring": focusRings.default,
+    "focus-primary": focusRings["focus-primary"],
+    "focus-accent": focusRings["focus-accent"]
+  },
+  // Ring width (for focus rings using ring utilities)
+  ringWidth: {
+    DEFAULT: "3px",
+    sm: "2px",
+    md: "3px",
+    lg: "4px"
+  },
+  // Ring color (for focus rings)
+  ringColor: {
+    DEFAULT: "hsl(var(--ring) / 0.5)",
+    primary: "hsl(var(--primary-500) / 0.3)",
+    accent: "hsl(var(--accent-500) / 0.3)",
+    "focus-primary": "hsl(var(--primary-500) / 0.3)",
+    "focus-accent": "hsl(var(--accent-500) / 0.3)"
+  }
+};
+
+// 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
+};
+var textStyles = {
+  // Display styles (for hero sections)
+  display: {
+    fontFamily: fontFamily.display.join(", "),
+    fontSize: fontSize["6xl"][0],
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.none,
+    letterSpacing: letterSpacing.tight
+  },
+  // Heading styles
+  h1: {
+    fontFamily: fontFamily.display.join(", "),
+    fontSize: fontSize["5xl"][0],
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.tight,
+    letterSpacing: letterSpacing.tight
+  },
+  h2: {
+    fontFamily: fontFamily.display.join(", "),
+    fontSize: fontSize["4xl"][0],
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.tight,
+    letterSpacing: letterSpacing.tight
+  },
+  h3: {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize["3xl"][0],
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.snug,
+    letterSpacing: letterSpacing.normal
+  },
+  h4: {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize["2xl"][0],
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.snug,
+    letterSpacing: letterSpacing.normal
+  },
+  h5: {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.xl[0],
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.normal,
+    letterSpacing: letterSpacing.normal
+  },
+  h6: {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.lg[0],
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.normal,
+    letterSpacing: letterSpacing.normal
+  },
+  // Body text styles
+  body: {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.base[0],
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.relaxed,
+    letterSpacing: letterSpacing.normal
+  },
+  "body-sm": {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.sm[0],
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal,
+    letterSpacing: letterSpacing.normal
+  },
+  "body-xs": {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.xs[0],
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal,
+    letterSpacing: letterSpacing.wide
+  },
+  // Label styles
+  label: {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.sm[0],
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.normal,
+    letterSpacing: letterSpacing.wide
+  },
+  "label-sm": {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.xs[0],
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.normal,
+    letterSpacing: letterSpacing.wider
+  },
+  // Caption styles
+  caption: {
+    fontFamily: fontFamily.sans.join(", "),
+    fontSize: fontSize.xs[0],
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal,
+    letterSpacing: letterSpacing.wide
+  }
+};
+var tailwindTypographyConfig = {
+  fontFamily: {
+    sans: [...fontFamily.sans],
+    satoshi: [...fontFamily.satoshi],
+    display: [...fontFamily.display],
+    serif: [...fontFamily.serif],
+    mono: [...fontFamily.mono]
+  },
+  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
+      }
+    ]
+  },
+  fontWeight: { ...fontWeight },
+  lineHeight: { ...lineHeight },
+  letterSpacing: { ...letterSpacing }
+};
+var fontSizeWithMd = {
+  ...fontSize,
+  md: fontSize.base
+};
+
+// src/tokens/css-variables.ts
+var allCSSVariables = {
+  ...colorCSSVariables,
+  ...typographyCSSVariables,
+  ...spacingCSSVariables,
+  ...shadowCSSVariables,
+  ...radiusCSSVariables,
+  ...motionCSSVariables
+};
+function generateCSSVariablesCSS(variables) {
+  const cssLines = Object.entries(variables).map(([key, value]) => `    ${key}: ${value};`).join("\n");
   return `:root {
-${Object.entries(l).map(([m, u]) => `    ${m}: ${u};`).join(`
-`)}
+${cssLines}
   }`;
 }
-const A = p(n), H = {
-  colors: Object.keys(t).length,
-  typography: Object.keys(i).length,
-  spacing: Object.keys(s).length,
-  shadows: Object.keys(a).length,
-  radius: Object.keys(o).length,
-  motion: Object.keys(r).length,
-  total: Object.keys(n).length
-}, j = g;
-export {
-  v as ALERT_TOKENS,
-  w as BUTTON_TOKENS,
-  y as CARD_TOKENS,
-  z as CHECKBOX_TOKENS,
-  d as DATA_TOKENS,
-  k as DOMAIN_TOKENS,
-  L as DROPDOWN_TOKENS,
-  c as ICON_TOKENS,
-  S as INPUT_TOKENS,
-  _ as MENU_TOKENS,
-  h as MOTION_TOKENS,
-  K as NAVIGATION_TOKENS,
-  V as NOTIFICATION_TOKENS,
-  I as OVERLAY_TOKENS,
-  W as POPOVER_TOKENS,
-  T as RADIO_TOKENS,
-  E as SECTION_TOKENS,
-  C as SURFACE_TOKENS,
-  O as SWITCH_TOKENS,
-  N as TEXT_TOKENS,
-  R as TOAST_TOKENS,
-  M as TOOLTIP_TOKENS,
-  j as UI_COLORS,
-  ie as accentColoredShadows,
-  U as accentColors,
-  n as allCSSVariables,
-  A as allCSSVariablesCSS,
-  B as animations,
-  F as baseColors,
-  ne as borderRadius,
-  G as chartColors,
-  t as colorCSSVariables,
-  le as componentRadius,
-  me as componentShadowMapping,
-  q as cssVariableColorTokens,
-  X as durations,
-  Y as easings,
-  ue as elevationShadows,
-  ge as focusRings,
-  ce as fontFamily,
-  he as fontSize,
-  pe as fontSizeWithMd,
-  be as fontWeight,
-  p as generateCSSVariablesCSS,
-  fe as glowEffects,
-  $ as keyframes,
-  xe as layoutSpacing,
-  ve as letterSpacing,
-  we as lineHeight,
-  r as motionCSSVariables,
-  ye as motionV2CSSVariables,
-  ke as motionV2Combined,
-  Se as motionV2Durations,
-  ze as motionV2Easings,
-  Oe as motionV2Fade,
-  Te as motionV2Scale,
-  Ce as motionV2Slide,
-  Ne as motionV2TailwindConfig,
-  Ee as motionV2Transitions,
-  Ie as primaryColoredShadows,
-  J as primaryColors,
-  o as radiusCSSVariables,
-  Q as reducedMotion,
-  Z as secondaryColors,
-  ee as semanticColors,
-  e as semanticSpacing,
-  Re as shadowBase,
-  a as shadowCSSVariables,
-  Ve as shadowOpacity,
-  Ke as spacing,
-  s as spacingCSSVariables,
-  de as springs,
-  re as surfaceColors,
-  te as tailwindMotionConfig,
-  _e as tailwindRadiusConfig,
-  We as tailwindShadowConfig,
-  Le as tailwindSpacingConfig,
-  g as tailwindThemeColors,
-  Me as tailwindTypographyConfig,
-  oe as textColors,
-  Ae as textStyles,
-  H as tokenSystemSummary,
-  ae as transitions,
-  i as typographyCSSVariables
+var allCSSVariablesCSS = generateCSSVariablesCSS(allCSSVariables);
+var tokenSystemSummary = {
+  colors: Object.keys(colorCSSVariables).length,
+  typography: Object.keys(typographyCSSVariables).length,
+  spacing: Object.keys(spacingCSSVariables).length,
+  shadows: Object.keys(shadowCSSVariables).length,
+  radius: Object.keys(radiusCSSVariables).length,
+  motion: Object.keys(motionCSSVariables).length,
+  total: Object.keys(allCSSVariables).length
 };
+
+// src/tokens/theme.ts
+var UI_COLORS = tailwindThemeColors;
+
+export { ALERT_TOKENS, BUTTON_TOKENS, CARD_TOKENS, CHECKBOX_TOKENS, DATA_TOKENS, DOMAIN_TOKENS, DROPDOWN_TOKENS, ICON_TOKENS, INPUT_TOKENS, MENU_TOKENS, MOTION_TOKENS, NAVIGATION_TOKENS, NOTIFICATION_TOKENS, OVERLAY_TOKENS, POPOVER_TOKENS, RADIO_TOKENS, SECTION_TOKENS, SURFACE_TOKENS, SWITCH_TOKENS, TEXT_TOKENS, TOAST_TOKENS, TOOLTIP_TOKENS, UI_COLORS, accentColoredShadows, accentColors, allCSSVariables, allCSSVariablesCSS, animations, baseColors, borderRadius, chartColors, colorCSSVariables, componentRadius, componentShadowMapping, cssVariableColorTokens, durations, easings, elevationShadows, focusRings, fontFamily, fontSize, fontSizeWithMd, fontWeight, generateCSSVariablesCSS, glowEffects, keyframes, layoutSpacing, letterSpacing, lineHeight, motionCSSVariables, motionV2CSSVariables, motionV2Combined, motionV2Durations, motionV2Easings, motionV2Fade, motionV2Scale, motionV2Slide, motionV2TailwindConfig, motionV2Transitions, primaryColoredShadows, primaryColors, radiusCSSVariables, reducedMotion, secondaryColors, semanticColors, semanticSpacing, shadowBase, shadowCSSVariables, shadowOpacity, spacing, spacingCSSVariables, springs, surfaceColors, tailwindMotionConfig, tailwindRadiusConfig, tailwindShadowConfig, tailwindSpacingConfig, tailwindThemeColors, tailwindTypographyConfig, textColors, textStyles, tokenSystemSummary, transitions, typographyCSSVariables };