@opencosmos/ui 1.3.1

package/dist/tokens.d.mts

@@ -0,0 +1,1065 @@
+export { a as COLOR_MODES, C as ColorMode, P as PUBLIC_THEME_NAMES, b as PublicThemeName, c as THEME_NAMES, d as ThemeConfig, T as ThemeName } from './index-DscTIrZ2.mjs';
+export { F as FontSize, a as FontTheme, b as FontThemeCategory, c as FontWeight, L as LetterSpacing, d as LineHeight, T as TypeLevel, e as TypePreset, f as TypographyScale, g as TypographyTheme, h as fontFamilies, i as fontLoadingConfig, j as fontSizes, k as fontThemes, l as fontWeights, m as generateScale, n as getAccessibleFontThemes, o as getFontThemeById, p as getFontThemesByCategory, q as getFontThemesByMood, r as getFontThemesForUseCase, s as getFontVariable, t as getResponsiveFontSize, u as getThemeFontVariables, v as letterSpacing, w as lineHeights, x as semanticLetterSpacing, y as semanticLineHeights, z as semanticSizes, A as semanticWeights, B as typePresets, C as typographySystem } from './fontThemes-Dh8mtXES.mjs';
+
+/**
+ * Base Design Tokens
+ * Shared across all themes (spacing, typography scales, motion)
+ */
+declare const baseTokens: {
+    /**
+     * Spacing scale (based on 4px grid)
+     */
+    readonly spacing: {
+        readonly '0': "0";
+        readonly '0.5': "0.125rem";
+        readonly '1': "0.25rem";
+        readonly '2': "0.5rem";
+        readonly '3': "0.75rem";
+        readonly '4': "1rem";
+        readonly '5': "1.25rem";
+        readonly '6': "1.5rem";
+        readonly '8': "2rem";
+        readonly '10': "2.5rem";
+        readonly '12': "3rem";
+        readonly '16': "4rem";
+        readonly '20': "5rem";
+        readonly '24': "6rem";
+        readonly '32': "8rem";
+    };
+    /**
+     * Typography scales
+     */
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+        readonly '6xl': "3.75rem";
+        readonly '7xl': "4.5rem";
+        readonly '8xl': "6rem";
+    };
+    readonly fontWeight: {
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+        readonly black: "900";
+    };
+    readonly lineHeight: {
+        readonly none: "1";
+        readonly tight: "1.25";
+        readonly snug: "1.375";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+        readonly loose: "2";
+    };
+    /**
+     * Border radius
+     */
+    readonly borderRadius: {
+        readonly none: "0";
+        readonly sm: "0.125rem";
+        readonly DEFAULT: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly xl: "0.75rem";
+        readonly '2xl': "1rem";
+        readonly '3xl': "1.5rem";
+        readonly full: "9999px";
+    };
+    /**
+     * Motion durations (base values - themes can override)
+     */
+    readonly duration: {
+        readonly instant: "0ms";
+        readonly fast: "150ms";
+        readonly normal: "300ms";
+        readonly slow: "500ms";
+        readonly slower: "800ms";
+    };
+    /**
+     * Easing curves (base values - themes can override)
+     */
+    readonly ease: {
+        readonly linear: "linear";
+        readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly inOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    /**
+     * Z-index scale
+     */
+    readonly zIndex: {
+        readonly auto: "auto";
+        readonly '0': "0";
+        readonly '10': "10";
+        readonly '20': "20";
+        readonly '30': "30";
+        readonly '40': "40";
+        readonly '50': "50";
+        readonly dropdown: "1000";
+        readonly sticky: "1020";
+        readonly fixed: "1030";
+        readonly modalBackdrop: "1040";
+        readonly modal: "1050";
+        readonly popover: "1060";
+        readonly tooltip: "1070";
+    };
+    /**
+     * Focus ring configuration
+     */
+    readonly focus: {
+        readonly width: "2px";
+        readonly offset: "2px";
+        readonly style: "solid";
+    };
+};
+type BaseTokens = typeof baseTokens;
+/**
+ * Semantic spacing aliases
+ * Provides human-readable names matching the README documentation
+ */
+declare const spacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+    readonly '3xl': "4rem";
+};
+/**
+ * Semantic typography aliases
+ */
+declare const typography: {
+    readonly fonts: {
+        readonly sans: "var(--font-body)";
+        readonly serif: "var(--font-heading)";
+        readonly mono: "var(--font-mono)";
+    };
+    readonly sizes: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+    };
+    readonly weights: {
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly leading: {
+        readonly tight: "1.25";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+    };
+};
+/**
+ * Motion configuration
+ */
+declare const motion: {
+    readonly duration: {
+        readonly instant: "0ms";
+        readonly fast: "150ms";
+        readonly normal: "300ms";
+        readonly slow: "500ms";
+        readonly slower: "800ms";
+    };
+    readonly easing: {
+        readonly default: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly spring: "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly linear: "linear";
+    };
+};
+
+/**
+ * Studio Theme Tokens
+ * Professional, polished, balanced design
+ * Inspiration: Framer, Vercel, Linear
+ */
+declare const studioTokens: {
+    readonly light: {
+        readonly colors: {
+            readonly background: "#ffffff";
+            readonly backgroundSecondary: "#fafafa";
+            readonly backgroundTertiary: "#f5f5f5";
+            readonly foreground: "#0a0a0a";
+            readonly foregroundSecondary: "#525252";
+            readonly foregroundTertiary: "#a3a3a3";
+            readonly primary: "#0a0a0a";
+            readonly primaryForeground: "#ffffff";
+            readonly secondary: "#f5f5f5";
+            readonly secondaryForeground: "#0a0a0a";
+            readonly accent: "#0070f3";
+            readonly accentForeground: "#ffffff";
+            readonly border: "#d4d4d4";
+            readonly borderSubtle: "#f5f5f5";
+            readonly hover: "#fafafa";
+            readonly active: "#f0f0f0";
+            readonly linkHover: "#0a0a0a";
+            readonly linkHoverForeground: "#ffffff";
+            readonly success: "#00a86b";
+            readonly successForeground: "#ffffff";
+            readonly warning: "#f59e0b";
+            readonly warningForeground: "#ffffff";
+            readonly error: "#ef4444";
+            readonly errorForeground: "#ffffff";
+            readonly info: "#0070f3";
+            readonly infoForeground: "#ffffff";
+            readonly card: "#ffffff";
+            readonly cardForeground: "#0a0a0a";
+            readonly popover: "#ffffff";
+            readonly popoverForeground: "#0a0a0a";
+            readonly muted: "#f5f5f5";
+            readonly mutedForeground: "#737373";
+            readonly destructive: "#ef4444";
+            readonly destructiveForeground: "#ffffff";
+            readonly input: "#d4d4d4";
+            readonly ring: "#0a0a0a";
+            readonly surface: "#fafafa";
+            readonly glass: "rgba(255, 255, 255, 0.7)";
+            readonly glassBorder: "rgba(0, 0, 0, 0.1)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(4px)";
+                readonly md: "blur(8px)";
+                readonly lg: "blur(16px)";
+                readonly xl: "blur(24px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+                readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
+                readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)";
+                readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1)";
+                readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+            };
+        };
+    };
+    readonly dark: {
+        readonly colors: {
+            readonly background: "#000000";
+            readonly backgroundSecondary: "#171717";
+            readonly backgroundTertiary: "#262626";
+            readonly foreground: "#fafafa";
+            readonly foregroundSecondary: "#a3a3a3";
+            readonly foregroundTertiary: "#858585";
+            readonly primary: "#ffffff";
+            readonly primaryForeground: "#0a0a0a";
+            readonly secondary: "#262626";
+            readonly secondaryForeground: "#fafafa";
+            readonly accent: "#0090ff";
+            readonly accentForeground: "#ffffff";
+            readonly border: "#404040";
+            readonly borderSubtle: "#1a1a1a";
+            readonly hover: "#1a1a1a";
+            readonly active: "#262626";
+            readonly linkHover: "#ffffff";
+            readonly linkHoverForeground: "#0a0a0a";
+            readonly success: "#10b981";
+            readonly successForeground: "#ffffff";
+            readonly warning: "#f59e0b";
+            readonly warningForeground: "#ffffff";
+            readonly error: "#ef4444";
+            readonly errorForeground: "#ffffff";
+            readonly info: "#0090ff";
+            readonly infoForeground: "#ffffff";
+            readonly card: "#0a0a0a";
+            readonly cardForeground: "#fafafa";
+            readonly popover: "#0a0a0a";
+            readonly popoverForeground: "#fafafa";
+            readonly muted: "#262626";
+            readonly mutedForeground: "#a3a3a3";
+            readonly destructive: "#ef4444";
+            readonly destructiveForeground: "#ffffff";
+            readonly input: "#404040";
+            readonly ring: "#d4d4d4";
+            readonly surface: "#171717";
+            readonly glass: "rgba(0, 0, 0, 0.7)";
+            readonly glassBorder: "rgba(255, 255, 255, 0.1)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(4px)";
+                readonly md: "blur(8px)";
+                readonly lg: "blur(16px)";
+                readonly xl: "blur(24px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)";
+                readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.5)";
+                readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.6)";
+                readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.7)";
+                readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.8)";
+            };
+        };
+    };
+    /**
+     * Motion personality for Studio theme
+     */
+    readonly motion: {
+        readonly getDuration: (intensity: number) => string;
+        readonly ease: {
+            readonly default: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly spring: "cubic-bezier(0.16, 1, 0.3, 1)";
+        };
+    };
+    /**
+     * Interaction tokens for Studio theme
+     * Subtle, professional — minimal overlay, gentle scale
+     */
+    readonly interactions: {
+        readonly hover: {
+            readonly overlayColor: {
+                readonly light: "#000000";
+                readonly dark: "#ffffff";
+            };
+            readonly opacity: 0.06;
+        };
+        readonly active: {
+            readonly scale: 0.98;
+        };
+        readonly focus: {
+            readonly ringWidth: "2px";
+            readonly ringOffset: "2px";
+        };
+        readonly disabled: {
+            readonly opacity: 0.5;
+        };
+    };
+    readonly typography: {
+        readonly heading: {
+            readonly fontFamily: "var(--font-geist-sans)";
+            readonly fontWeight: "600";
+            readonly letterSpacing: "-0.02em";
+        };
+        readonly body: {
+            readonly fontFamily: "var(--font-geist-sans)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+        readonly mono: {
+            readonly fontFamily: "var(--font-geist-mono)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+    };
+};
+type StudioTheme = typeof studioTokens;
+
+/**
+ * Terra Theme Tokens
+ * Calm, organic, feminine/yin design
+ * Muted earth tones, flowing animations
+ */
+declare const terraTokens: {
+    readonly light: {
+        readonly colors: {
+            readonly background: "#faf8f5";
+            readonly backgroundSecondary: "#f5f1eb";
+            readonly backgroundTertiary: "#ede8e0";
+            readonly foreground: "#2d2823";
+            readonly foregroundSecondary: "#5a524a";
+            readonly foregroundTertiary: "#8a7f72";
+            readonly primary: "#7a9b7f";
+            readonly primaryForeground: "#faf8f5";
+            readonly primaryHover: "#6a8b6f";
+            readonly secondary: "#ede8e0";
+            readonly secondaryForeground: "#2d2823";
+            readonly accent: "#c17a5f";
+            readonly accentForeground: "#faf8f5";
+            readonly accentHover: "#b16a4f";
+            readonly success: "#6b8e6f";
+            readonly successForeground: "#faf8f5";
+            readonly warning: "#d4a574";
+            readonly warningForeground: "#2d2823";
+            readonly error: "#c17a5f";
+            readonly errorForeground: "#faf8f5";
+            readonly info: "#8b9dc3";
+            readonly infoForeground: "#faf8f5";
+            readonly border: "#e0d8cf";
+            readonly borderSubtle: "#ede8e0";
+            readonly hover: "#f5f1eb";
+            readonly active: "#ede8e0";
+            readonly linkHover: "#7a9b7f";
+            readonly linkHoverForeground: "#faf8f5";
+            readonly glass: "rgba(250, 248, 245, 0.85)";
+            readonly glassBorder: "rgba(122, 155, 127, 0.15)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(6px)";
+                readonly md: "blur(12px)";
+                readonly lg: "blur(20px)";
+                readonly xl: "blur(32px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 2px 4px 0 rgba(45, 40, 35, 0.06)";
+                readonly md: "0 4px 8px -2px rgba(45, 40, 35, 0.08)";
+                readonly lg: "0 8px 16px -4px rgba(45, 40, 35, 0.12)";
+                readonly xl: "0 16px 32px -8px rgba(45, 40, 35, 0.16)";
+                readonly '2xl': "0 24px 48px -12px rgba(45, 40, 35, 0.20)";
+            };
+        };
+    };
+    readonly dark: {
+        readonly colors: {
+            readonly background: "#1a1614";
+            readonly backgroundSecondary: "#252220";
+            readonly backgroundTertiary: "#2f2b28";
+            readonly foreground: "#f5f1eb";
+            readonly foregroundSecondary: "#c7bfb5";
+            readonly foregroundTertiary: "#8a7f72";
+            readonly primary: "#a8c5ad";
+            readonly primaryForeground: "#1a1614";
+            readonly primaryHover: "#b8d5bd";
+            readonly secondary: "#2f2b28";
+            readonly secondaryForeground: "#f5f1eb";
+            readonly accent: "#e5a78a";
+            readonly accentForeground: "#1a1614";
+            readonly accentHover: "#f5b79a";
+            readonly success: "#95b89a";
+            readonly successForeground: "#1a1614";
+            readonly warning: "#e5c59a";
+            readonly warningForeground: "#1a1614";
+            readonly error: "#e5a78a";
+            readonly errorForeground: "#1a1614";
+            readonly info: "#a8b5d5";
+            readonly infoForeground: "#1a1614";
+            readonly border: "#3a3530";
+            readonly borderSubtle: "#2f2b28";
+            readonly hover: "#252220";
+            readonly active: "#2f2b28";
+            readonly linkHover: "#a8c5ad";
+            readonly linkHoverForeground: "#1a1614";
+            readonly glass: "rgba(26, 22, 20, 0.85)";
+            readonly glassBorder: "rgba(168, 197, 173, 0.2)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(6px)";
+                readonly md: "blur(12px)";
+                readonly lg: "blur(20px)";
+                readonly xl: "blur(32px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 2px 4px 0 rgba(0, 0, 0, 0.3)";
+                readonly md: "0 4px 8px -2px rgba(0, 0, 0, 0.4)";
+                readonly lg: "0 8px 16px -4px rgba(0, 0, 0, 0.5)";
+                readonly xl: "0 16px 32px -8px rgba(0, 0, 0, 0.6)";
+                readonly '2xl': "0 24px 48px -12px rgba(0, 0, 0, 0.7)";
+            };
+        };
+    };
+    readonly motion: {
+        readonly getDuration: (intensity: number) => string;
+        readonly ease: {
+            readonly default: "cubic-bezier(0.33, 1, 0.68, 1)";
+            readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly spring: "cubic-bezier(0.16, 1, 0.3, 1)";
+        };
+    };
+    /**
+     * Interaction tokens for Terra theme
+     * Warm, organic — earthy overlay tones, softer scale
+     */
+    readonly interactions: {
+        readonly hover: {
+            readonly overlayColor: {
+                readonly light: "#2d2823";
+                readonly dark: "#f5f1eb";
+            };
+            readonly opacity: 0.07;
+        };
+        readonly active: {
+            readonly scale: 0.97;
+        };
+        readonly focus: {
+            readonly ringWidth: "2px";
+            readonly ringOffset: "2px";
+        };
+        readonly disabled: {
+            readonly opacity: 0.5;
+        };
+    };
+    readonly typography: {
+        readonly heading: {
+            readonly fontFamily: "var(--font-terra-serif)";
+            readonly fontWeight: "600";
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly body: {
+            readonly fontFamily: "var(--font-terra-sans)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+        readonly mono: {
+            readonly fontFamily: "var(--font-terra-mono)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+    };
+};
+type TerraTheme = typeof terraTokens;
+
+/**
+ * Volt Theme Tokens
+ * Bold, electric, masculine/yang design
+ * High-chroma colors, dynamic animations, cyberpunk aesthetic
+ */
+declare const voltTokens: {
+    readonly light: {
+        readonly colors: {
+            readonly background: "#ffffff";
+            readonly backgroundSecondary: "#f8f9fb";
+            readonly backgroundTertiary: "#f0f2f5";
+            readonly foreground: "#0a0a0a";
+            readonly foregroundSecondary: "#4a4a4a";
+            readonly foregroundTertiary: "#8a8a8a";
+            readonly primary: "#0066ff";
+            readonly primaryForeground: "#ffffff";
+            readonly primaryHover: "#0052cc";
+            readonly secondary: "#f0f2f5";
+            readonly secondaryForeground: "#0a0a0a";
+            readonly accent: "#00d9ff";
+            readonly accentForeground: "#0a0a0a";
+            readonly accentHover: "#00c3e6";
+            readonly success: "#00cc66";
+            readonly successForeground: "#ffffff";
+            readonly warning: "#ffaa00";
+            readonly warningForeground: "#0a0a0a";
+            readonly error: "#ff3366";
+            readonly errorForeground: "#ffffff";
+            readonly info: "#3399ff";
+            readonly infoForeground: "#ffffff";
+            readonly border: "#e0e4ea";
+            readonly borderSubtle: "#f0f2f5";
+            readonly hover: "#f8f9fb";
+            readonly active: "#f0f2f5";
+            readonly linkHover: "#0066ff";
+            readonly linkHoverForeground: "#ffffff";
+            readonly glass: "rgba(255, 255, 255, 0.8)";
+            readonly glassBorder: "rgba(0, 102, 255, 0.2)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(8px)";
+                readonly md: "blur(16px)";
+                readonly lg: "blur(32px)";
+                readonly xl: "blur(48px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 0 8px rgba(0, 102, 255, 0.15)";
+                readonly md: "0 0 16px rgba(0, 102, 255, 0.2)";
+                readonly lg: "0 0 24px rgba(0, 102, 255, 0.25)";
+                readonly xl: "0 0 32px rgba(0, 102, 255, 0.3)";
+                readonly '2xl': "0 0 48px rgba(0, 102, 255, 0.4)";
+            };
+        };
+    };
+    readonly dark: {
+        readonly colors: {
+            readonly background: "#000000";
+            readonly backgroundSecondary: "#0a0a0a";
+            readonly backgroundTertiary: "#141414";
+            readonly foreground: "#ffffff";
+            readonly foregroundSecondary: "#b3b3b3";
+            readonly foregroundTertiary: "#666666";
+            readonly primary: "#0099ff";
+            readonly primaryForeground: "#000000";
+            readonly primaryHover: "#00aaff";
+            readonly secondary: "#141414";
+            readonly secondaryForeground: "#ffffff";
+            readonly accent: "#00ffff";
+            readonly accentForeground: "#000000";
+            readonly accentHover: "#33ffff";
+            readonly success: "#00ff99";
+            readonly successForeground: "#000000";
+            readonly warning: "#ffcc00";
+            readonly warningForeground: "#000000";
+            readonly error: "#ff0066";
+            readonly errorForeground: "#ffffff";
+            readonly info: "#66ccff";
+            readonly infoForeground: "#000000";
+            readonly border: "#1a1a1a";
+            readonly borderSubtle: "#141414";
+            readonly hover: "#0a0a0a";
+            readonly active: "#141414";
+            readonly linkHover: "#00ffff";
+            readonly linkHoverForeground: "#000000";
+            readonly glass: "rgba(0, 0, 0, 0.8)";
+            readonly glassBorder: "rgba(0, 153, 255, 0.3)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(8px)";
+                readonly md: "blur(16px)";
+                readonly lg: "blur(32px)";
+                readonly xl: "blur(48px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 0 12px rgba(0, 153, 255, 0.4)";
+                readonly md: "0 0 20px rgba(0, 153, 255, 0.5)";
+                readonly lg: "0 0 32px rgba(0, 153, 255, 0.6)";
+                readonly xl: "0 0 48px rgba(0, 153, 255, 0.7)";
+                readonly '2xl': "0 0 64px rgba(0, 153, 255, 0.8)";
+            };
+        };
+    };
+    readonly motion: {
+        readonly getDuration: (intensity: number) => string;
+        readonly ease: {
+            readonly default: "cubic-bezier(0.16, 1, 0.3, 1)";
+            readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly spring: "cubic-bezier(0.68, -0.55, 0.27, 1.55)";
+        };
+    };
+    /**
+     * Interaction tokens for Volt theme
+     * Electric, brand-tinted — blue overlay, punchy scale
+     */
+    readonly interactions: {
+        readonly hover: {
+            readonly overlayColor: {
+                readonly light: "#0066ff";
+                readonly dark: "#0099ff";
+            };
+            readonly opacity: 0.1;
+        };
+        readonly active: {
+            readonly scale: 0.96;
+        };
+        readonly focus: {
+            readonly ringWidth: "2px";
+            readonly ringOffset: "2px";
+        };
+        readonly disabled: {
+            readonly opacity: 0.5;
+        };
+    };
+    readonly typography: {
+        readonly heading: {
+            readonly fontFamily: "var(--font-volt-sans)";
+            readonly fontWeight: "700";
+            readonly letterSpacing: "-0.03em";
+        };
+        readonly body: {
+            readonly fontFamily: "var(--font-volt-sans)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+        readonly mono: {
+            readonly fontFamily: "var(--font-volt-mono)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+    };
+};
+type VoltTheme = typeof voltTokens;
+
+/**
+ * Speedboat Theme Tokens
+ * Moloco Speedboat V2 design language
+ * Extracted from Figma (Speedboat V2) via design-code-play/frontend/src/theme.ts
+ *
+ * Colors: Blue-accented professional palette with Roboto + Montserrat typography
+ * Accent: #346BEA (Core/Blue500-Accent)
+ */
+declare const speedboatTokens: {
+    readonly light: {
+        readonly colors: {
+            readonly background: "#FFFFFF";
+            readonly backgroundSecondary: "#F8F8F8";
+            readonly backgroundTertiary: "#ECECEC";
+            readonly foreground: "#212121";
+            readonly foregroundSecondary: "#5D5D5D";
+            readonly foregroundTertiary: "#8891A7";
+            readonly primary: "#346BEA";
+            readonly primaryForeground: "#FFFFFF";
+            readonly secondary: "#EBF0FD";
+            readonly secondaryForeground: "#1E49AA";
+            readonly accent: "#346BEA";
+            readonly accentForeground: "#FFFFFF";
+            readonly border: "#ECECEC";
+            readonly borderSubtle: "#F8F8F8";
+            readonly hover: "#F8F8F8";
+            readonly active: "#ECECEC";
+            readonly linkHover: "#1E49AA";
+            readonly linkHoverForeground: "#FFFFFF";
+            readonly success: "#2E7D32";
+            readonly successForeground: "#FFFFFF";
+            readonly warning: "#E65100";
+            readonly warningForeground: "#FFFFFF";
+            readonly error: "#C62828";
+            readonly errorForeground: "#FFFFFF";
+            readonly info: "#346BEA";
+            readonly infoForeground: "#FFFFFF";
+            readonly card: "#FFFFFF";
+            readonly cardForeground: "#212121";
+            readonly popover: "#FFFFFF";
+            readonly popoverForeground: "#212121";
+            readonly muted: "#F8F8F8";
+            readonly mutedForeground: "#8891A7";
+            readonly destructive: "#C62828";
+            readonly destructiveForeground: "#FFFFFF";
+            readonly input: "#DFDFDF";
+            readonly ring: "#346BEA";
+            readonly surface: "#F8F8F8";
+            readonly glass: "rgba(255, 255, 255, 0.85)";
+            readonly glassBorder: "rgba(0, 0, 0, 0.08)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(4px)";
+                readonly md: "blur(8px)";
+                readonly lg: "blur(16px)";
+                readonly xl: "blur(24px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 1px 2px rgba(0, 0, 0, 0.05)";
+                readonly md: "0 2px 8px rgba(0, 0, 0, 0.08)";
+                readonly lg: "0 4px 16px rgba(0, 0, 0, 0.10)";
+                readonly xl: "0 8px 24px rgba(0, 0, 0, 0.12)";
+                readonly '2xl': "0 16px 48px rgba(0, 0, 0, 0.16)";
+            };
+        };
+    };
+    readonly dark: {
+        readonly colors: {
+            readonly background: "#0F1117";
+            readonly backgroundSecondary: "#1A1C25";
+            readonly backgroundTertiary: "#252833";
+            readonly foreground: "#F0F0F2";
+            readonly foregroundSecondary: "#A0A3B1";
+            readonly foregroundTertiary: "#6B6F80";
+            readonly primary: "#4A7FF7";
+            readonly primaryForeground: "#FFFFFF";
+            readonly secondary: "#1E2540";
+            readonly secondaryForeground: "#A6C1FF";
+            readonly accent: "#4A7FF7";
+            readonly accentForeground: "#FFFFFF";
+            readonly border: "#2E3140";
+            readonly borderSubtle: "#1A1C25";
+            readonly hover: "#1A1C25";
+            readonly active: "#252833";
+            readonly linkHover: "#A6C1FF";
+            readonly linkHoverForeground: "#0F1117";
+            readonly success: "#4CAF50";
+            readonly successForeground: "#FFFFFF";
+            readonly warning: "#FF8A50";
+            readonly warningForeground: "#FFFFFF";
+            readonly error: "#EF5350";
+            readonly errorForeground: "#FFFFFF";
+            readonly info: "#4A7FF7";
+            readonly infoForeground: "#FFFFFF";
+            readonly card: "#1A1C25";
+            readonly cardForeground: "#F0F0F2";
+            readonly popover: "#1A1C25";
+            readonly popoverForeground: "#F0F0F2";
+            readonly muted: "#252833";
+            readonly mutedForeground: "#6B6F80";
+            readonly destructive: "#EF5350";
+            readonly destructiveForeground: "#FFFFFF";
+            readonly input: "#2E3140";
+            readonly ring: "#4A7FF7";
+            readonly surface: "#1A1C25";
+            readonly glass: "rgba(15, 17, 23, 0.85)";
+            readonly glassBorder: "rgba(255, 255, 255, 0.08)";
+        };
+        readonly effects: {
+            readonly blur: {
+                readonly sm: "blur(4px)";
+                readonly md: "blur(8px)";
+                readonly lg: "blur(16px)";
+                readonly xl: "blur(24px)";
+            };
+            readonly shadow: {
+                readonly sm: "0 1px 2px rgba(0, 0, 0, 0.20)";
+                readonly md: "0 2px 8px rgba(0, 0, 0, 0.30)";
+                readonly lg: "0 4px 16px rgba(0, 0, 0, 0.35)";
+                readonly xl: "0 8px 24px rgba(0, 0, 0, 0.40)";
+                readonly '2xl': "0 16px 48px rgba(0, 0, 0, 0.50)";
+            };
+        };
+    };
+    /**
+     * Motion personality for Speedboat theme
+     * Professional and snappy — slightly faster than Studio
+     */
+    readonly motion: {
+        readonly getDuration: (intensity: number) => string;
+        readonly ease: {
+            readonly default: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly in: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly out: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly spring: "cubic-bezier(0.16, 1, 0.3, 1)";
+        };
+    };
+    /**
+     * Interaction tokens for Speedboat theme
+     * Professional, clean — matches Studio's subtle feel
+     */
+    readonly interactions: {
+        readonly hover: {
+            readonly overlayColor: {
+                readonly light: "#000000";
+                readonly dark: "#ffffff";
+            };
+            readonly opacity: 0.06;
+        };
+        readonly active: {
+            readonly scale: 0.98;
+        };
+        readonly focus: {
+            readonly ringWidth: "2px";
+            readonly ringOffset: "2px";
+        };
+        readonly disabled: {
+            readonly opacity: 0.5;
+        };
+    };
+    /**
+     * Typography for Speedboat theme
+     * Montserrat headings + Roboto body — Moloco brand fonts
+     */
+    readonly typography: {
+        readonly heading: {
+            readonly fontFamily: "var(--font-montserrat)";
+            readonly fontWeight: "700";
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly body: {
+            readonly fontFamily: "var(--font-roboto)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+        readonly mono: {
+            readonly fontFamily: "var(--font-geist-mono)";
+            readonly fontWeight: "400";
+            readonly letterSpacing: "0";
+        };
+    };
+};
+type SpeedboatTheme = typeof speedboatTokens;
+
+/**
+ * Syntax Highlighting Tokens
+ * Based on VS Code Dark+ theme with light mode variants
+ * Includes accessible background and border colors for code blocks
+ */
+declare const syntaxColors: {
+    readonly light: {
+        readonly comment: "#22863a";
+        readonly keyword: "#8250df";
+        readonly function: "#6639ba";
+        readonly string: "#c1592a";
+        readonly number: "#0a3069";
+        readonly boolean: "#0550ae";
+        readonly operator: "#1a1a1a";
+        readonly property: "#0550ae";
+        readonly className: "#005cc5";
+        readonly tag: "#005cc5";
+        readonly attribute: "#0550ae";
+        readonly variable: "#0550ae";
+        readonly punctuation: "#57606a";
+        readonly plain: "#1a1a1a";
+    };
+    readonly dark: {
+        readonly comment: "#6A9955";
+        readonly keyword: "#C586C0";
+        readonly function: "#DCDCAA";
+        readonly string: "#CE9178";
+        readonly number: "#B5CEA8";
+        readonly boolean: "#569CD6";
+        readonly operator: "#D4D4D4";
+        readonly property: "#9CDCFE";
+        readonly className: "#4EC9B0";
+        readonly tag: "#4EC9B0";
+        readonly attribute: "#9CDCFE";
+        readonly variable: "#9CDCFE";
+        readonly punctuation: "#808080";
+        readonly plain: "#D4D4D4";
+    };
+};
+/**
+ * Code Block Background and Border Colors
+ * Designed for optimal contrast and accessibility (WCAG AA 4.5:1)
+ */
+declare const codeColors: {
+    readonly light: {
+        readonly blockBackground: "#F8F9FA";
+        readonly inlineBackground: "#FEF3E7";
+        readonly border: "#E1E4E8";
+    };
+    readonly dark: {
+        readonly blockBackground: "#1E1E1E";
+        readonly inlineBackground: "#252525";
+        readonly border: "#3D3D3D";
+    };
+};
+type SyntaxColorScheme = 'light' | 'dark';
+type SyntaxTokenType = keyof typeof syntaxColors.light;
+
+/**
+ * Curated Color Palette Library
+ * Pre-designed, accessible color schemes for quick customization
+ */
+interface ColorPalette {
+    id: string;
+    name: string;
+    description: string;
+    category: PaletteCategory;
+    primary: string;
+    secondary: string;
+    accent: string;
+    harmony?: string;
+    rationale?: string;
+    bestFor?: string[];
+    mood?: string[];
+    wcagAA?: boolean;
+    wcagAAA?: boolean;
+}
+type PaletteCategory = 'professional' | 'creative' | 'nature' | 'vibrant' | 'minimal' | 'luxury' | 'playful' | 'accessible' | 'custom';
+/**
+ * Curated Palette Collection
+ */
+declare const colorPalettes: ColorPalette[];
+/**
+ * Get palettes by category
+ */
+declare function getPalettesByCategory(category: PaletteCategory): ColorPalette[];
+/**
+ * Get palettes by mood/tag
+ */
+declare function getPalettesByMood(mood: string): ColorPalette[];
+/**
+ * Search palettes by use case
+ */
+declare function getPalettesForUseCase(useCase: string): ColorPalette[];
+/**
+ * Get accessible palettes only
+ */
+declare function getAccessiblePalettes(level?: 'AA' | 'AAA'): ColorPalette[];
+
+/**
+ * Color Transformation Utilities
+ * Standalone utilities for the token system (no external dependencies)
+ */
+/**
+ * Convert hex to RGB
+ */
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Convert hex to HSL
+ */
+declare function hexToHSL(hex: string): {
+    h: number;
+    s: number;
+    l: number;
+};
+/**
+ * Convert HSL to hex
+ */
+declare function hslToHex(h: number, s: number, l: number): string;
+/**
+ * Adjust lightness of a hex color
+ */
+declare function adjustLightness(hex: string, percent: number): string;
+/**
+ * Adjust saturation of a hex color
+ */
+declare function adjustSaturation(hex: string, percent: number): string;
+/**
+ * Rotate hue of a hex color
+ */
+declare function rotateHue(hex: string, degrees: number): string;
+/**
+ * Add opacity to a hex color (returns rgba CSS value)
+ */
+declare function adjustOpacity(hex: string, opacity: number): string;
+/**
+ * Calculate relative luminance (WCAG formula)
+ */
+declare function getLuminance(r: number, g: number, b: number): number;
+/**
+ * Calculate contrast ratio between two colors (WCAG formula)
+ */
+declare function getContrastRatio(hex1: string, hex2: string): number;
+/**
+ * Get optimal foreground color (white or black) for a background
+ */
+declare function getOptimalForeground(bgHex: string, whiteHex?: string, blackHex?: string): string;
+
+/**
+ * Token Dependency Graph
+ * Defines which tokens are computed from other tokens for "change once, ripple everywhere"
+ */
+type TokenDerivation = {
+    source: string;
+    transform: (sourceValue: string) => string;
+    description: string;
+};
+/**
+ * Primary Color Derivations
+ * These tokens automatically update when primary color changes
+ */
+declare const primaryColorDerivations: Record<string, TokenDerivation>;
+/**
+ * Secondary Color Derivations
+ * These derive from secondary color
+ */
+declare const secondaryColorDerivations: Record<string, TokenDerivation>;
+/**
+ * Accent Color Derivations
+ * These derive from accent (used for highlights and CTAs)
+ */
+declare const accentColorDerivations: Record<string, TokenDerivation>;
+/**
+ * Mode-Specific Derivations
+ * These need different transforms for light vs dark mode
+ */
+declare const modeSpecificDerivations: Record<string, {
+    light: TokenDerivation;
+    dark: TokenDerivation;
+}>;
+/**
+ * Complete dependency graph
+ */
+declare const tokenDependencyGraph: {
+    primary: Record<string, TokenDerivation>;
+    secondary: Record<string, TokenDerivation>;
+    accent: Record<string, TokenDerivation>;
+    modeSpecific: Record<string, {
+        light: TokenDerivation;
+        dark: TokenDerivation;
+    }>;
+};
+/**
+ * Get all tokens that depend on a source token
+ */
+declare function getDependentTokens(sourceToken: string): string[];
+/**
+ * Compute all derived tokens from a source
+ */
+declare function computeDerivedTokens(sourceToken: string, sourceValue: string, mode: 'light' | 'dark'): Record<string, string>;
+
+export { type BaseTokens, type ColorPalette, type PaletteCategory, type SpeedboatTheme, type StudioTheme, type SyntaxColorScheme, type SyntaxTokenType, type TerraTheme, type TokenDerivation, type VoltTheme, accentColorDerivations, adjustLightness, adjustOpacity, adjustSaturation, baseTokens, codeColors, colorPalettes, computeDerivedTokens, getAccessiblePalettes, getContrastRatio, getDependentTokens, getLuminance, getOptimalForeground, getPalettesByCategory, getPalettesByMood, getPalettesForUseCase, hexToHSL, hexToRgb, hslToHex, modeSpecificDerivations, motion, primaryColorDerivations, rotateHue, secondaryColorDerivations, spacing, speedboatTokens, studioTokens, syntaxColors, terraTokens, tokenDependencyGraph, typography, voltTokens };