@tenerife.music/ui 0.0.6 → 1.0.0

package/dist/tokens/index.mjs

@@ -1,170 +1,687 @@
 "use client";
-import { b as h } from "../radius-NOytgRst.js";
-const r = {
-  day: {
-    background: "hsl(var(--background))",
-    foreground: "hsl(var(--foreground))",
-    card: "hsl(var(--card))",
-    cardForeground: "hsl(var(--card-foreground))",
-    popover: "hsl(var(--popover))",
-    popoverForeground: "hsl(var(--popover-foreground))",
-    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(var(--destructive))",
-    destructiveForeground: "hsl(var(--destructive-foreground))",
-    border: "hsl(var(--border))",
-    input: "hsl(var(--input))",
-    ring: "hsl(var(--ring))",
-    chart1: "hsl(12, 76%, 61%)",
-    chart2: "hsl(173, 58%, 39%)",
-    chart3: "hsl(197, 37%, 24%)",
-    chart4: "hsl(43, 74%, 66%)",
-    chart5: "hsl(27, 87%, 67%)"
-  },
-  night: {
-    background: "hsl(var(--background))",
-    foreground: "hsl(var(--foreground))",
-    card: "hsl(var(--card))",
-    cardForeground: "hsl(var(--card-foreground))",
-    popover: "hsl(var(--popover))",
-    popoverForeground: "hsl(var(--popover-foreground))",
-    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(var(--destructive))",
-    destructiveForeground: "hsl(var(--destructive-foreground))",
-    border: "hsl(var(--border))",
-    input: "hsl(var(--input))",
-    ring: "hsl(var(--ring))",
-    chart1: "hsl(220, 70%, 50%)",
-    chart2: "hsl(160, 60%, 45%)",
-    chart3: "hsl(30, 80%, 55%)",
-    chart4: "hsl(280, 65%, 60%)",
-    chart5: "hsl(340, 75%, 55%)"
+import { f as u } from "../colors-ClemXPPi.js";
+import { a as A, b as N, e as B, p as G, s as P, d as Q, c as q, g as J, t as K } from "../colors-ClemXPPi.js";
+import { r as y } from "../radius-CAu4qr9R.js";
+import { b as _, c as ee, t as te } from "../radius-CAu4qr9R.js";
+const n = {
+  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
+}, a = {
+  // 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)"
+}, f = {
+  // Fast transitions (quick interactions)
+  fast: `${n.fast} ${a["ease-out"]}`,
+  "fast-in": `${n.fast} ${a["ease-in"]}`,
+  "fast-out": `${n.fast} ${a["ease-out"]}`,
+  "fast-in-out": `${n.fast} ${a["ease-in-out"]}`,
+  // Normal transitions (default)
+  normal: `${n.normal} ${a["ease-in-out"]}`,
+  "normal-in": `${n.normal} ${a["ease-in"]}`,
+  "normal-out": `${n.normal} ${a["ease-out"]}`,
+  "normal-in-out": `${n.normal} ${a["ease-in-out"]}`,
+  // Slow transitions (emphasized)
+  slow: `${n.slow} ${a["ease-in-out"]}`,
+  "slow-in": `${n.slow} ${a["ease-in"]}`,
+  "slow-out": `${n.slow} ${a["ease-out"]}`,
+  "slow-in-out": `${n.slow} ${a["ease-in-out"]}`,
+  // Special transitions
+  bounce: `${n.normal} ${a.bounce}`,
+  elastic: `${n.slow} ${a.elastic}`,
+  // Default (normal)
+  DEFAULT: `${n.normal} ${a["ease-in-out"]}`
+}, C = {
+  // 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" }
   }
-}, e = {
-  background: "hsl(var(--background))",
-  foreground: "hsl(var(--foreground))",
-  card: {
-    DEFAULT: "hsl(var(--card))",
-    foreground: "hsl(var(--card-foreground))"
-  },
-  popover: {
-    DEFAULT: "hsl(var(--popover))",
-    foreground: "hsl(var(--popover-foreground))"
-  },
-  primary: {
-    DEFAULT: "hsl(var(--tm-primary))",
-    foreground: "hsl(var(--tm-primary-foreground))"
-  },
-  secondary: {
-    DEFAULT: "hsl(var(--tm-secondary))",
-    foreground: "hsl(var(--tm-secondary-foreground))"
-  },
-  muted: {
-    DEFAULT: "hsl(var(--muted))",
-    foreground: "hsl(var(--muted-foreground))"
-  },
-  accent: {
-    DEFAULT: "hsl(var(--tm-accent))",
-    foreground: "hsl(var(--tm-accent-foreground))"
-  },
-  destructive: {
-    DEFAULT: "hsl(var(--destructive))",
-    foreground: "hsl(var(--destructive-foreground))"
-  },
-  border: "hsl(var(--border))",
-  input: "hsl(var(--input))",
-  ring: "hsl(var(--ring))",
-  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))"
+}, h = {
+  // Fade animations
+  fadeIn: `fadeIn ${n.normal} ${a["ease-out"]}`,
+  fadeOut: `fadeOut ${n.fast} ${a["ease-in"]}`,
+  // Slide animations
+  slideInUp: `slideInUp ${n.normal} ${a["ease-out"]}`,
+  slideInDown: `slideInDown ${n.normal} ${a["ease-out"]}`,
+  slideInLeft: `slideInLeft ${n.normal} ${a["ease-out"]}`,
+  slideInRight: `slideInRight ${n.normal} ${a["ease-out"]}`,
+  slideOutUp: `slideOutUp ${n.fast} ${a["ease-in"]}`,
+  slideOutDown: `slideOutDown ${n.fast} ${a["ease-in"]}`,
+  slideOutLeft: `slideOutLeft ${n.fast} ${a["ease-in"]}`,
+  slideOutRight: `slideOutRight ${n.fast} ${a["ease-in"]}`,
+  // Scale animations
+  scaleIn: `scaleIn ${n.normal} ${a["ease-out"]}`,
+  scaleOut: `scaleOut ${n.fast} ${a["ease-in"]}`,
+  // Continuous animations
+  spin: `spin 1s ${a.linear} infinite`,
+  pulse: `pulse 2s ${a["ease-in-out"]} infinite`,
+  bounce: `bounce 1s ${a.linear} infinite`,
+  ping: `ping 1s ${a["ease-out"]} cubic-bezier(0, 0, 0.2, 1) infinite`,
+  shake: `shake 0.5s ${a["ease-in-out"]}`,
+  // Accordion animations
+  "accordion-down": `accordion-down ${n.normal} ${a["ease-out"]}`,
+  "accordion-up": `accordion-up ${n.normal} ${a["ease-out"]}`
+}, U = {
+  // 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;"
+}, w = {
+  // Durations
+  "--duration-instant": n.instant,
+  "--duration-fast": n.fast,
+  "--duration-normal": n.normal,
+  "--duration-slow": n.slow,
+  "--duration-slower": n.slower,
+  "--duration-slowest": n.slowest,
+  // Easings
+  "--ease-linear": a.linear,
+  "--ease-in": a["ease-in"],
+  "--ease-out": a["ease-out"],
+  "--ease-in-out": a["ease-in-out"],
+  "--ease-bounce": a.bounce,
+  "--ease-elastic": a.elastic,
+  // Transitions
+  "--transition-fast": f.fast,
+  "--transition-normal": f.normal,
+  "--transition-slow": f.slow,
+  "--transition-default": f.DEFAULT
+}, R = {
+  transitionDuration: {
+    ...n
+  },
+  transitionTimingFunction: {
+    ...a
+  },
+  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: {
+    ...C
+  },
+  animation: {
+    ...h,
+    // Additional animation utilities
+    none: "none",
+    spin: h.spin,
+    pulse: h.pulse,
+    bounce: h.bounce,
+    ping: h.ping,
+    shake: h.shake
   }
 }, o = {
+  none: "none",
+  xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
+}, x = {
+  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)"
+}, p = {
+  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)"
+}, g = {
+  // 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)"
+}, d = {
+  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)"
+}, b = {
+  // Elevation shadows
+  "--shadow-none": o.none,
+  "--shadow-xs": o.xs,
+  "--shadow-sm": o.sm,
+  "--shadow-md": o.md,
+  "--shadow-lg": o.lg,
+  "--shadow-xl": o.xl,
+  "--shadow-2xl": o["2xl"],
+  // Primary colored shadows
+  "--shadow-primary-xs": x.xs,
+  "--shadow-primary-sm": x.sm,
+  "--shadow-primary-md": x.md,
+  "--shadow-primary-lg": x.lg,
+  "--shadow-primary-xl": x.xl,
+  "--shadow-primary-2xl": x["2xl"],
+  // Accent colored shadows
+  "--shadow-accent-xs": p.xs,
+  "--shadow-accent-sm": p.sm,
+  "--shadow-accent-md": p.md,
+  "--shadow-accent-lg": p.lg,
+  "--shadow-accent-xl": p.xl,
+  "--shadow-accent-2xl": p["2xl"],
+  // Glow effects
+  "--glow-primary": g["glow-primary"],
+  "--glow-primary-subtle": g["glow-primary-subtle"],
+  "--glow-primary-medium": g["glow-primary-medium"],
+  "--glow-primary-strong": g["glow-primary-strong"],
+  "--glow-accent": g["glow-accent"],
+  "--glow-accent-subtle": g["glow-accent-subtle"],
+  "--glow-accent-medium": g["glow-accent-medium"],
+  "--glow-accent-strong": g["glow-accent-strong"],
+  // Focus rings
+  "--focus-ring-default": d.default,
+  "--focus-ring-primary": d.primary,
+  "--focus-ring-accent": d.accent,
+  "--focus-primary": d["focus-primary"],
+  "--focus-accent": d["focus-accent"]
+}, W = {
+  card: {
+    default: o.sm,
+    hover: o.md,
+    active: o.xs,
+    selected: x.sm
+  },
+  button: {
+    default: o.xs,
+    hover: o.sm,
+    active: o.none,
+    focus: d.primary
+  },
+  "button-accent": {
+    default: p.xs,
+    hover: p.sm,
+    active: o.none,
+    focus: d.accent
+  },
+  modal: {
+    default: o.xl,
+    backdrop: "rgba(0, 0, 0, 0.5)"
+  },
+  dropdown: {
+    default: o.md,
+    hover: o.lg
+  },
+  tooltip: {
+    default: o.sm
+  },
+  toast: {
+    default: o.lg,
+    success: "0 10px 15px -3px hsl(var(--success) / 0.3)",
+    error: "0 10px 15px -3px hsl(var(--error) / 0.3)"
+  }
+}, D = {
+  boxShadow: {
+    // Elevation shadows
+    none: o.none,
+    xs: o.xs,
+    sm: o.sm,
+    md: o.md,
+    lg: o.lg,
+    xl: o.xl,
+    "2xl": o["2xl"],
+    // Primary colored shadows
+    "primary-xs": x.xs,
+    "primary-sm": x.sm,
+    "primary-md": x.md,
+    "primary-lg": x.lg,
+    "primary-xl": x.xl,
+    "primary-2xl": x["2xl"],
+    // Accent colored shadows
+    "accent-xs": p.xs,
+    "accent-sm": p.sm,
+    "accent-md": p.md,
+    "accent-lg": p.lg,
+    "accent-xl": p.xl,
+    "accent-2xl": p["2xl"],
+    // Glow effects
+    "glow-primary": g["glow-primary"],
+    "glow-primary-subtle": g["glow-primary-subtle"],
+    "glow-primary-medium": g["glow-primary-medium"],
+    "glow-primary-strong": g["glow-primary-strong"],
+    "glow-accent": g["glow-accent"],
+    "glow-accent-subtle": g["glow-accent-subtle"],
+    "glow-accent-medium": g["glow-accent-medium"],
+    "glow-accent-strong": g["glow-accent-strong"],
+    // Focus rings (using box-shadow for focus states)
+    "focus-ring": d.default,
+    "focus-primary": d["focus-primary"],
+    "focus-accent": d["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)"
+  }
+}, t = {
+  // Zero spacing
+  0: "0",
   px: "1px",
-  0: "0px",
+  // Half unit (4px)
   0.5: "0.125rem",
-  // 2px
-  1: "0.25rem",
   // 4px
+  // Base unit multiples (8px increments)
+  1: "0.25rem",
+  // 4px (half unit, common)
   1.5: "0.375rem",
-  // 6px
+  // 6px (rare, for fine adjustments)
   2: "0.5rem",
-  // 8px
+  // 8px (base unit)
   2.5: "0.625rem",
-  // 10px
+  // 10px (rare)
   3: "0.75rem",
-  // 12px
+  // 12px (1.5 × base)
   3.5: "0.875rem",
-  // 14px
+  // 14px (rare)
   4: "1rem",
-  // 16px
+  // 16px (2 × base)
   5: "1.25rem",
-  // 20px
+  // 20px (2.5 × base)
   6: "1.5rem",
-  // 24px
+  // 24px (3 × base)
   7: "1.75rem",
-  // 28px
+  // 28px (3.5 × base)
   8: "2rem",
-  // 32px
+  // 32px (4 × base)
   9: "2.25rem",
-  // 36px
+  // 36px (4.5 × base)
   10: "2.5rem",
-  // 40px
+  // 40px (5 × base)
   11: "2.75rem",
-  // 44px
+  // 44px (5.5 × base)
   12: "3rem",
-  // 48px
+  // 48px (6 × base)
   14: "3.5rem",
-  // 56px
+  // 56px (7 × base)
   16: "4rem",
-  // 64px
+  // 64px (8 × base)
   20: "5rem",
-  // 80px
+  // 80px (10 × base)
   24: "6rem",
-  // 96px
+  // 96px (12 × base)
+  // Extended scale for larger spacing
   28: "7rem",
-  // 112px
+  // 112px (14 × base)
   32: "8rem",
-  // 128px
+  // 128px (16 × base)
   36: "9rem",
-  // 144px
+  // 144px (18 × base)
   40: "10rem",
-  // 160px
+  // 160px (20 × base)
   44: "11rem",
-  // 176px
+  // 176px (22 × base)
   48: "12rem",
-  // 192px
+  // 192px (24 × base)
   52: "13rem",
-  // 208px
+  // 208px (26 × base)
   56: "14rem",
-  // 224px
+  // 224px (28 × base)
   60: "15rem",
-  // 240px
+  // 240px (30 × base)
   64: "16rem",
-  // 256px
+  // 256px (32 × base)
   72: "18rem",
-  // 288px
+  // 288px (36 × base)
   80: "20rem",
-  // 320px
+  // 320px (40 × base)
   96: "24rem"
-  // 384px
-}, a = {
+  // 384px (48 × base)
+}, m = {
+  // Extra small spacing (tight, minimal)
+  xs: t[1],
+  // 4px (0.25rem)
+  // Small spacing (compact)
+  sm: t[2],
+  // 8px (0.5rem)
+  // Medium spacing (default)
+  md: t[4],
+  // 16px (1rem)
+  // Large spacing (spacious)
+  lg: t[6],
+  // 24px (1.5rem)
+  // Extra large spacing (very spacious)
+  xl: t[8],
+  // 32px (2rem)
+  // 2XL spacing (section-level)
+  "2xl": t[12],
+  // 48px (3rem)
+  // 3XL spacing (major sections)
+  "3xl": t[16],
+  // 64px (4rem)
+  // 4XL spacing (page sections)
+  "4xl": t[20],
+  // 80px (5rem)
+  // 5XL spacing (hero sections)
+  "5xl": t[24],
+  // 96px (6rem)
+  // None (no spacing)
+  none: t[0]
+  // 0
+}, i = {
+  // Section spacing (vertical spacing between major sections)
+  section: {
+    xs: t[6],
+    // 24px (compact sections)
+    sm: t[8],
+    // 32px (small sections)
+    md: t[12],
+    // 48px (default sections)
+    lg: t[16],
+    // 64px (large sections)
+    xl: t[20],
+    // 80px (extra large sections)
+    "2xl": t[24]
+    // 96px (hero sections)
+  },
+  // Container spacing (padding inside containers)
+  container: {
+    xs: t[2],
+    // 8px (tight containers)
+    sm: t[4],
+    // 16px (compact containers)
+    md: t[6],
+    // 24px (default containers)
+    lg: t[8],
+    // 32px (spacious containers)
+    xl: t[12]
+    // 48px (very spacious containers)
+  },
+  // Grid spacing (gap between grid items)
+  grid: {
+    xs: t[2],
+    // 8px (tight grids)
+    sm: t[4],
+    // 16px (compact grids)
+    md: t[6],
+    // 24px (default grids)
+    lg: t[8],
+    // 32px (spacious grids)
+    xl: t[12]
+    // 48px (very spacious grids)
+  },
+  // Stack spacing (gap between stacked items)
+  stack: {
+    xs: t[1],
+    // 4px (tight stacks)
+    sm: t[2],
+    // 8px (compact stacks)
+    md: t[4],
+    // 16px (default stacks)
+    lg: t[6],
+    // 24px (spacious stacks)
+    xl: t[8]
+    // 32px (very spacious stacks)
+  },
+  // Component internal spacing (padding inside components)
+  component: {
+    xs: t[1],
+    // 4px (tight components)
+    sm: t[2],
+    // 8px (compact components)
+    md: t[4],
+    // 16px (default components)
+    lg: t[6],
+    // 24px (spacious components)
+    xl: t[8]
+    // 32px (extra spacious components)
+  }
+}, S = {
+  // Base spacing scale
+  "--spacing-0": t[0],
+  "--spacing-px": t.px,
+  "--spacing-0-5": t[0.5],
+  "--spacing-1": t[1],
+  "--spacing-1-5": t[1.5],
+  "--spacing-2": t[2],
+  "--spacing-2-5": t[2.5],
+  "--spacing-3": t[3],
+  "--spacing-3-5": t[3.5],
+  "--spacing-4": t[4],
+  "--spacing-5": t[5],
+  "--spacing-6": t[6],
+  "--spacing-7": t[7],
+  "--spacing-8": t[8],
+  "--spacing-9": t[9],
+  "--spacing-10": t[10],
+  "--spacing-11": t[11],
+  "--spacing-12": t[12],
+  "--spacing-14": t[14],
+  "--spacing-16": t[16],
+  "--spacing-20": t[20],
+  "--spacing-24": t[24],
+  // Semantic spacing
+  "--spacing-xs": m.xs,
+  "--spacing-sm": m.sm,
+  "--spacing-md": m.md,
+  "--spacing-lg": m.lg,
+  "--spacing-xl": m.xl,
+  "--spacing-2xl": m["2xl"],
+  "--spacing-3xl": m["3xl"],
+  "--spacing-4xl": m["4xl"],
+  "--spacing-5xl": m["5xl"],
+  "--spacing-none": m.none,
+  // Layout spacing - sections
+  "--layout-section-xs": i.section.xs,
+  "--layout-section-sm": i.section.sm,
+  "--layout-section-md": i.section.md,
+  "--layout-section-lg": i.section.lg,
+  "--layout-section-xl": i.section.xl,
+  "--layout-section-2xl": i.section["2xl"],
+  // Layout spacing - containers
+  "--layout-container-xs": i.container.xs,
+  "--layout-container-sm": i.container.sm,
+  "--layout-container-md": i.container.md,
+  "--layout-container-lg": i.container.lg,
+  "--layout-container-xl": i.container.xl,
+  // Layout spacing - grids
+  "--layout-grid-xs": i.grid.xs,
+  "--layout-grid-sm": i.grid.sm,
+  "--layout-grid-md": i.grid.md,
+  "--layout-grid-lg": i.grid.lg,
+  "--layout-grid-xl": i.grid.xl,
+  // Layout spacing - stacks
+  "--layout-stack-xs": i.stack.xs,
+  "--layout-stack-sm": i.stack.sm,
+  "--layout-stack-md": i.stack.md,
+  "--layout-stack-lg": i.stack.lg,
+  "--layout-stack-xl": i.stack.xl,
+  // Layout spacing - components
+  "--layout-component-xs": i.component.xs,
+  "--layout-component-sm": i.component.sm,
+  "--layout-component-md": i.component.md,
+  "--layout-component-lg": i.component.lg,
+  "--layout-component-xl": i.component.xl
+}, L = {
+  spacing: {
+    ...t,
+    // Add semantic tokens as aliases
+    xs: m.xs,
+    sm: m.sm,
+    md: m.md,
+    lg: m.lg,
+    xl: m.xl,
+    "2xl": m["2xl"],
+    "3xl": m["3xl"],
+    "4xl": m["4xl"],
+    "5xl": m["5xl"],
+    none: m.none
+  }
+}, s = {
+  // Primary font - Inter (default sans)
   sans: [
+    "Inter",
     "ui-sans-serif",
     "system-ui",
     "-apple-system",
@@ -180,14 +697,33 @@ const r = {
     "Segoe UI Symbol",
     "Noto Color Emoji"
   ],
-  serif: [
-    "ui-serif",
-    "Georgia",
-    "Cambria",
-    "Times New Roman",
-    "Times",
-    "serif"
+  // 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",
@@ -198,21 +734,55 @@ const r = {
     "Courier New",
     "monospace"
   ]
-}, n = {
-  xs: ["0.75rem", { lineHeight: "1rem" }],
-  sm: ["0.875rem", { lineHeight: "1.25rem" }],
-  base: ["1rem", { lineHeight: "1.5rem" }],
-  lg: ["1.125rem", { lineHeight: "1.75rem" }],
-  xl: ["1.25rem", { lineHeight: "1.75rem" }],
-  "2xl": ["1.5rem", { lineHeight: "2rem" }],
-  "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
-  "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
-  "5xl": ["3rem", { lineHeight: "1" }],
-  "6xl": ["3.75rem", { lineHeight: "1" }],
-  "7xl": ["4.5rem", { lineHeight: "1" }],
-  "8xl": ["6rem", { lineHeight: "1" }],
-  "9xl": ["8rem", { lineHeight: "1" }]
-}, s = {
+}, e = {
+  // 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" }]
+}, l = {
   thin: "100",
   extralight: "200",
   light: "300",
@@ -222,29 +792,317 @@ const r = {
   bold: "700",
   extrabold: "800",
   black: "900"
-}, t = {
-  tighter: "-0.05em",
-  tight: "-0.025em",
-  normal: "0em",
-  wide: "0.025em",
-  wider: "0.05em",
-  widest: "0.1em"
-}, l = {
+}, r = {
   none: "1",
   tight: "1.25",
   snug: "1.375",
   normal: "1.5",
   relaxed: "1.625",
   loose: "2"
+}, c = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+}, $ = {
+  // Font families
+  "--font-sans": s.sans.join(", "),
+  "--font-satoshi": s.satoshi.join(", "),
+  "--font-display": s.display.join(", "),
+  "--font-serif": s.serif.join(", "),
+  "--font-mono": s.mono.join(", "),
+  // Font sizes (using clamp values)
+  "--font-size-xs": e.xs[0],
+  "--font-size-sm": e.sm[0],
+  "--font-size-base": e.base[0],
+  "--font-size-lg": e.lg[0],
+  "--font-size-xl": e.xl[0],
+  "--font-size-2xl": e["2xl"][0],
+  "--font-size-3xl": e["3xl"][0],
+  "--font-size-4xl": e["4xl"][0],
+  "--font-size-5xl": e["5xl"][0],
+  "--font-size-6xl": e["6xl"][0],
+  // Font weights
+  "--font-weight-thin": l.thin,
+  "--font-weight-extralight": l.extralight,
+  "--font-weight-light": l.light,
+  "--font-weight-normal": l.normal,
+  "--font-weight-medium": l.medium,
+  "--font-weight-semibold": l.semibold,
+  "--font-weight-bold": l.bold,
+  "--font-weight-extrabold": l.extrabold,
+  "--font-weight-black": l.black,
+  // Line heights
+  "--line-height-none": r.none,
+  "--line-height-tight": r.tight,
+  "--line-height-snug": r.snug,
+  "--line-height-normal": r.normal,
+  "--line-height-relaxed": r.relaxed,
+  "--line-height-loose": r.loose,
+  // Letter spacing
+  "--letter-spacing-tighter": c.tighter,
+  "--letter-spacing-tight": c.tight,
+  "--letter-spacing-normal": c.normal,
+  "--letter-spacing-wide": c.wide,
+  "--letter-spacing-wider": c.wider,
+  "--letter-spacing-widest": c.widest
+}, T = {
+  // Display styles (for hero sections)
+  display: {
+    fontFamily: s.display.join(", "),
+    fontSize: e["6xl"][0],
+    fontWeight: l.bold,
+    lineHeight: r.none,
+    letterSpacing: c.tight
+  },
+  // Heading styles
+  h1: {
+    fontFamily: s.display.join(", "),
+    fontSize: e["5xl"][0],
+    fontWeight: l.bold,
+    lineHeight: r.tight,
+    letterSpacing: c.tight
+  },
+  h2: {
+    fontFamily: s.display.join(", "),
+    fontSize: e["4xl"][0],
+    fontWeight: l.bold,
+    lineHeight: r.tight,
+    letterSpacing: c.tight
+  },
+  h3: {
+    fontFamily: s.sans.join(", "),
+    fontSize: e["3xl"][0],
+    fontWeight: l.semibold,
+    lineHeight: r.snug,
+    letterSpacing: c.normal
+  },
+  h4: {
+    fontFamily: s.sans.join(", "),
+    fontSize: e["2xl"][0],
+    fontWeight: l.semibold,
+    lineHeight: r.snug,
+    letterSpacing: c.normal
+  },
+  h5: {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.xl[0],
+    fontWeight: l.medium,
+    lineHeight: r.normal,
+    letterSpacing: c.normal
+  },
+  h6: {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.lg[0],
+    fontWeight: l.medium,
+    lineHeight: r.normal,
+    letterSpacing: c.normal
+  },
+  // Body text styles
+  body: {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.base[0],
+    fontWeight: l.normal,
+    lineHeight: r.relaxed,
+    letterSpacing: c.normal
+  },
+  "body-sm": {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.sm[0],
+    fontWeight: l.normal,
+    lineHeight: r.normal,
+    letterSpacing: c.normal
+  },
+  "body-xs": {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.xs[0],
+    fontWeight: l.normal,
+    lineHeight: r.normal,
+    letterSpacing: c.wide
+  },
+  // Label styles
+  label: {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.sm[0],
+    fontWeight: l.medium,
+    lineHeight: r.normal,
+    letterSpacing: c.wide
+  },
+  "label-sm": {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.xs[0],
+    fontWeight: l.medium,
+    lineHeight: r.normal,
+    letterSpacing: c.wider
+  },
+  // Caption styles
+  caption: {
+    fontFamily: s.sans.join(", "),
+    fontSize: e.xs[0],
+    fontWeight: l.normal,
+    lineHeight: r.normal,
+    letterSpacing: c.wide
+  }
+}, X = {
+  fontFamily: {
+    sans: [...s.sans],
+    satoshi: [...s.satoshi],
+    display: [...s.display],
+    serif: [...s.serif],
+    mono: [...s.mono]
+  },
+  fontSize: {
+    xs: [
+      e.xs[0],
+      { lineHeight: e.xs[1].lineHeight, letterSpacing: e.xs[1].letterSpacing }
+    ],
+    sm: [
+      e.sm[0],
+      { lineHeight: e.sm[1].lineHeight, letterSpacing: e.sm[1].letterSpacing }
+    ],
+    base: [
+      e.base[0],
+      { lineHeight: e.base[1].lineHeight, letterSpacing: e.base[1].letterSpacing }
+    ],
+    lg: [
+      e.lg[0],
+      { lineHeight: e.lg[1].lineHeight, letterSpacing: e.lg[1].letterSpacing }
+    ],
+    xl: [
+      e.xl[0],
+      { lineHeight: e.xl[1].lineHeight, letterSpacing: e.xl[1].letterSpacing }
+    ],
+    "2xl": [
+      e["2xl"][0],
+      {
+        lineHeight: e["2xl"][1].lineHeight,
+        letterSpacing: e["2xl"][1].letterSpacing
+      }
+    ],
+    "3xl": [
+      e["3xl"][0],
+      {
+        lineHeight: e["3xl"][1].lineHeight,
+        letterSpacing: e["3xl"][1].letterSpacing
+      }
+    ],
+    "4xl": [
+      e["4xl"][0],
+      {
+        lineHeight: e["4xl"][1].lineHeight,
+        letterSpacing: e["4xl"][1].letterSpacing
+      }
+    ],
+    "5xl": [
+      e["5xl"][0],
+      {
+        lineHeight: e["5xl"][1].lineHeight,
+        letterSpacing: e["5xl"][1].letterSpacing
+      }
+    ],
+    "6xl": [
+      e["6xl"][0],
+      {
+        lineHeight: e["6xl"][1].lineHeight,
+        letterSpacing: e["6xl"][1].letterSpacing
+      }
+    ],
+    "7xl": [
+      e["7xl"][0],
+      {
+        lineHeight: e["7xl"][1].lineHeight,
+        letterSpacing: e["7xl"][1].letterSpacing
+      }
+    ],
+    "8xl": [
+      e["8xl"][0],
+      {
+        lineHeight: e["8xl"][1].lineHeight,
+        letterSpacing: e["8xl"][1].letterSpacing
+      }
+    ],
+    "9xl": [
+      e["9xl"][0],
+      {
+        lineHeight: e["9xl"][1].lineHeight,
+        letterSpacing: e["9xl"][1].letterSpacing
+      }
+    ]
+  },
+  fontWeight: { ...l },
+  lineHeight: { ...r },
+  letterSpacing: { ...c }
+}, v = {
+  ...u,
+  ...$,
+  ...S,
+  ...b,
+  ...y,
+  ...w
+};
+function j(H) {
+  return `:root {
+${Object.entries(H).map(([k, z]) => `    ${k}: ${z};`).join(`
+`)}
+  }`;
+}
+const M = j(v), V = {
+  colors: Object.keys(u).length,
+  typography: Object.keys($).length,
+  spacing: Object.keys(S).length,
+  shadows: Object.keys(b).length,
+  radius: Object.keys(y).length,
+  motion: Object.keys(w).length,
+  total: Object.keys(v).length
 };
 export {
-  h as borderRadius,
-  r as cssVariableColorTokens,
-  a as fontFamily,
-  n as fontSize,
-  s as fontWeight,
-  t as letterSpacing,
-  l as lineHeight,
-  o as spacing,
-  e as tailwindThemeColors
+  p as accentColoredShadows,
+  A as accentColors,
+  v as allCSSVariables,
+  M as allCSSVariablesCSS,
+  h as animations,
+  N as baseColors,
+  _ as borderRadius,
+  u as colorCSSVariables,
+  ee as componentRadius,
+  W as componentShadowMapping,
+  B as cssVariableColorTokens,
+  n as durations,
+  a as easings,
+  o as elevationShadows,
+  d as focusRings,
+  s as fontFamily,
+  e as fontSize,
+  l as fontWeight,
+  j as generateCSSVariablesCSS,
+  g as glowEffects,
+  C as keyframes,
+  i as layoutSpacing,
+  c as letterSpacing,
+  r as lineHeight,
+  w as motionCSSVariables,
+  x as primaryColoredShadows,
+  G as primaryColors,
+  y as radiusCSSVariables,
+  U as reducedMotion,
+  P as secondaryColors,
+  Q as semanticColors,
+  m as semanticSpacing,
+  b as shadowCSSVariables,
+  t as spacing,
+  S as spacingCSSVariables,
+  q as surfaceColors,
+  R as tailwindMotionConfig,
+  te as tailwindRadiusConfig,
+  D as tailwindShadowConfig,
+  L as tailwindSpacingConfig,
+  J as tailwindThemeColors,
+  X as tailwindTypographyConfig,
+  K as textColors,
+  T as textStyles,
+  V as tokenSystemSummary,
+  f as transitions,
+  $ as typographyCSSVariables
 };