@web-my-money/tokens 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,264 @@
+export { wmmPreset } from './tailwind-preset.mjs';
+export { D as DEFAULT_FONT_SIZE, a as DEFAULT_THEME, F as FONT_SIZES, b as FONT_SIZE_STORAGE_KEY, c as FontSizeName, T as THEMES, d as THEME_STORAGE_KEY, e as ThemeName, f as applyFontSize, g as applyTheme, h as fontSizeBootScript, i as getStoredFontSize, j as getStoredTheme, k as isFontSizeName, l as isThemeName, t as themeBootScript } from './font-size-runtime-DlvZXy2n.mjs';
+import 'tailwindcss';
+
+/**
+ * Color tokens — OKLCH-based semantic palette.
+ *
+ * Every value is a raw CSS value (no var() wrapper) so consumers can use them
+ * either as CSS custom properties or directly in Tailwind config.
+ *
+ * Brand-specific colors live in themes (see ./themes/).
+ */
+declare const colors: {
+    readonly background: "oklch(1 0 0)";
+    readonly foreground: "oklch(0.145 0 0)";
+    readonly card: "oklch(1 0 0)";
+    readonly cardForeground: "oklch(0.145 0 0)";
+    readonly popover: "oklch(1 0 0)";
+    readonly popoverForeground: "oklch(0.145 0 0)";
+    readonly primary: "oklch(0.205 0 0)";
+    readonly primaryForeground: "oklch(0.985 0 0)";
+    readonly secondary: "oklch(0.97 0 0)";
+    readonly secondaryForeground: "oklch(0.205 0 0)";
+    readonly muted: "oklch(0.97 0 0)";
+    readonly mutedForeground: "oklch(0.556 0 0)";
+    readonly accent: "oklch(0.97 0 0)";
+    readonly accentForeground: "oklch(0.205 0 0)";
+    readonly destructive: "oklch(0.577 0.245 27.325)";
+    readonly border: "oklch(0.922 0 0)";
+    readonly input: "oklch(0.922 0 0)";
+    readonly ring: "oklch(0.708 0 0)";
+    readonly chart1: "oklch(0.87 0 0)";
+    readonly chart2: "oklch(0.556 0 0)";
+    readonly chart3: "oklch(0.439 0 0)";
+    readonly chart4: "oklch(0.371 0 0)";
+    readonly chart5: "oklch(0.269 0 0)";
+    readonly sidebar: "oklch(0.985 0 0)";
+    readonly sidebarForeground: "oklch(0.145 0 0)";
+    readonly sidebarPrimary: "oklch(0.205 0 0)";
+    readonly sidebarPrimaryForeground: "oklch(0.985 0 0)";
+    readonly sidebarAccent: "oklch(0.97 0 0)";
+    readonly sidebarAccentForeground: "oklch(0.205 0 0)";
+    readonly sidebarBorder: "oklch(0.922 0 0)";
+    readonly sidebarRing: "oklch(0.708 0 0)";
+};
+declare const colorsDark: {
+    readonly background: "oklch(0.145 0 0)";
+    readonly foreground: "oklch(0.985 0 0)";
+    readonly card: "oklch(0.205 0 0)";
+    readonly cardForeground: "oklch(0.985 0 0)";
+    readonly popover: "oklch(0.205 0 0)";
+    readonly popoverForeground: "oklch(0.985 0 0)";
+    readonly primary: "oklch(0.922 0 0)";
+    readonly primaryForeground: "oklch(0.205 0 0)";
+    readonly secondary: "oklch(0.269 0 0)";
+    readonly secondaryForeground: "oklch(0.985 0 0)";
+    readonly muted: "oklch(0.269 0 0)";
+    readonly mutedForeground: "oklch(0.708 0 0)";
+    readonly accent: "oklch(0.269 0 0)";
+    readonly accentForeground: "oklch(0.985 0 0)";
+    readonly destructive: "oklch(0.704 0.191 22.216)";
+    readonly border: "oklch(1 0 0 / 10%)";
+    readonly input: "oklch(1 0 0 / 15%)";
+    readonly ring: "oklch(0.556 0 0)";
+    readonly chart1: "oklch(0.87 0 0)";
+    readonly chart2: "oklch(0.556 0 0)";
+    readonly chart3: "oklch(0.439 0 0)";
+    readonly chart4: "oklch(0.371 0 0)";
+    readonly chart5: "oklch(0.269 0 0)";
+    readonly sidebar: "oklch(0.205 0 0)";
+    readonly sidebarForeground: "oklch(0.985 0 0)";
+    readonly sidebarPrimary: "oklch(0.488 0.243 264.376)";
+    readonly sidebarPrimaryForeground: "oklch(0.985 0 0)";
+    readonly sidebarAccent: "oklch(0.269 0 0)";
+    readonly sidebarAccentForeground: "oklch(0.985 0 0)";
+    readonly sidebarBorder: "oklch(1 0 0 / 10%)";
+    readonly sidebarRing: "oklch(0.556 0 0)";
+};
+type SemanticColor = keyof typeof colors;
+
+/**
+ * Typography tokens.
+ *
+ * Font stacks, sizes, weights, line heights, letter spacing.
+ * Consumers set actual font-face loading — tokens only define the stack.
+ */
+declare const fontFamily: {
+    /** Body text — Inter or system sans */
+    readonly sans: readonly ["var(--font-inter)", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"];
+    /** Display / hero headings — Satoshi */
+    readonly display: readonly ["Satoshi", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"];
+    /** Labels, badges, section headers — Space Grotesk */
+    readonly label: readonly ["var(--font-space-grotesk)", "ui-sans-serif", "system-ui", "sans-serif"];
+    /** Code blocks */
+    readonly mono: readonly ["var(--font-geist-mono)", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"];
+};
+declare const fontSize: {
+    readonly xs: readonly ["0.75rem", {
+        readonly lineHeight: "1rem";
+    }];
+    readonly sm: readonly ["0.875rem", {
+        readonly lineHeight: "1.25rem";
+    }];
+    readonly base: readonly ["1rem", {
+        readonly lineHeight: "1.5rem";
+    }];
+    readonly lg: readonly ["1.125rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly xl: readonly ["1.25rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly "2xl": readonly ["1.5rem", {
+        readonly lineHeight: "2rem";
+    }];
+    readonly "3xl": readonly ["1.875rem", {
+        readonly lineHeight: "2.25rem";
+    }];
+    readonly "4xl": readonly ["2.25rem", {
+        readonly lineHeight: "2.5rem";
+    }];
+    readonly "5xl": readonly ["3rem", {
+        readonly lineHeight: "1.15";
+    }];
+    readonly "6xl": readonly ["3.75rem", {
+        readonly lineHeight: "1.1";
+    }];
+};
+declare const letterSpacing: {
+    readonly tighter: "-0.05em";
+    readonly tight: "-0.025em";
+    readonly normal: "0em";
+    readonly wide: "0.025em";
+    readonly wider: "0.05em";
+    readonly label: "0.15em";
+};
+
+/**
+ * Spacing & layout tokens.
+ */
+declare const radius: {
+    readonly sm: "calc(var(--radius) * 0.6)";
+    readonly md: "calc(var(--radius) * 0.8)";
+    readonly lg: "var(--radius)";
+    readonly xl: "calc(var(--radius) * 1.4)";
+    readonly "2xl": "calc(var(--radius) * 1.8)";
+    readonly "3xl": "calc(var(--radius) * 2.2)";
+    readonly "4xl": "calc(var(--radius) * 2.6)";
+    readonly full: "9999px";
+};
+declare const radiusBase = "0.625rem";
+declare const container: {
+    readonly center: true;
+    readonly padding: {
+        readonly DEFAULT: "1.25rem";
+        readonly sm: "1.5rem";
+        readonly lg: "2rem";
+        readonly xl: "2.5rem";
+        readonly "2xl": "3rem";
+    };
+    readonly screens: {
+        readonly "2xl": "1320px";
+    };
+};
+
+/**
+ * Shadow tokens — elevation system + glow effects.
+ */
+declare const boxShadow: {
+    /** Subtle teal glow for CTAs */
+    readonly glow: "0 0 30px rgba(0, 196, 180, 0.15)";
+    /** Strong teal glow on hover */
+    readonly glowStrong: "0 0 40px rgba(0, 196, 180, 0.4)";
+    /** Deep panel shadow with inset highlight (glassmorphism) */
+    readonly panel: "0 24px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.08)";
+    /** Glass panel shadow */
+    readonly glass: "0 28px 90px rgba(0, 0, 0, 0.38), 0 0 36px rgba(0, 196, 180, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06)";
+};
+
+/**
+ * Animation tokens — keyframes and durations.
+ */
+declare const keyframes: {
+    readonly marquee: {
+        readonly "0%": {
+            readonly transform: "translate3d(0, 0, 0)";
+        };
+        readonly "100%": {
+            readonly transform: "translate3d(-50%, 0, 0)";
+        };
+    };
+    readonly "marquee-reverse": {
+        readonly "0%": {
+            readonly transform: "translate3d(-50%, 0, 0)";
+        };
+        readonly "100%": {
+            readonly transform: "translate3d(0, 0, 0)";
+        };
+    };
+    readonly shimmer: {
+        readonly "0%": {
+            readonly transform: "translate3d(-150%, 0, 0)";
+        };
+        readonly "100%": {
+            readonly transform: "translate3d(150%, 0, 0)";
+        };
+    };
+    readonly float: {
+        readonly "0%, 100%": {
+            readonly transform: "translate3d(0, 0, 0)";
+        };
+        readonly "50%": {
+            readonly transform: "translate3d(0, -12px, 0)";
+        };
+    };
+    readonly pulseGlow: {
+        readonly "0%, 100%": {
+            readonly boxShadow: "0 0 0 rgba(0, 196, 180, 0.0)";
+        };
+        readonly "50%": {
+            readonly boxShadow: "0 0 36px rgba(0, 196, 180, 0.18)";
+        };
+    };
+};
+declare const animation: {
+    readonly marquee: "marquee 28s linear infinite";
+    readonly "marquee-slow": "marquee 42s linear infinite";
+    readonly "marquee-reverse": "marquee-reverse 32s linear infinite";
+    readonly shimmer: "shimmer 4.2s linear infinite";
+    readonly float: "float 8s ease-in-out infinite";
+    readonly "pulse-glow": "pulseGlow 5s ease-in-out infinite";
+};
+/** Standard easing curves */
+declare const easing: {
+    spring: readonly [0.22, 1, 0.36, 1];
+    smooth: readonly [0.4, 0, 0.2, 1];
+    snappy: readonly [0.2, 0, 0, 1];
+};
+
+/**
+ * Gradient tokens — background images and overlays.
+ */
+declare const backgroundImage: {
+    /** CTA gradient: navy → aqua (production brand) */
+    readonly "cta-gradient": "linear-gradient(135deg, #1f2d56, #8fccb6)";
+    /** Grid pattern overlay for hero backgrounds */
+    readonly "hero-grid": "linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px)";
+};
+/** Glassmorphism background for panels */
+declare const glassPanel: {
+    readonly background: "radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 42%),\n    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),\n    rgba(15, 23, 42, 0.84)";
+    readonly border: "1px solid rgba(255, 255, 255, 0.08)";
+    readonly backdropFilter: "blur(20px)";
+};
+/** Spotlight overlay for sections */
+declare const spotlight: {
+    readonly background: "radial-gradient(circle at 50% 0%, rgba(0, 196, 180, 0.18), transparent 28%),\n    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.2), transparent 25%)";
+};
+/** Dark page body background */
+declare const darkBody: {
+    readonly background: "radial-gradient(circle at top, rgba(14, 165, 233, 0.12), transparent 32%),\n    radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.14), transparent 28%),\n    linear-gradient(180deg, #070b14 0%, #080b14 45%, #09111f 100%)";
+};
+
+export { type SemanticColor, animation, backgroundImage, boxShadow, colors, colorsDark, container, darkBody, easing, fontFamily, fontSize, glassPanel, keyframes, letterSpacing, radius, radiusBase, spotlight };

package/dist/index.d.ts

@@ -0,0 +1,264 @@
+export { wmmPreset } from './tailwind-preset.js';
+export { D as DEFAULT_FONT_SIZE, a as DEFAULT_THEME, F as FONT_SIZES, b as FONT_SIZE_STORAGE_KEY, c as FontSizeName, T as THEMES, d as THEME_STORAGE_KEY, e as ThemeName, f as applyFontSize, g as applyTheme, h as fontSizeBootScript, i as getStoredFontSize, j as getStoredTheme, k as isFontSizeName, l as isThemeName, t as themeBootScript } from './font-size-runtime-DlvZXy2n.js';
+import 'tailwindcss';
+
+/**
+ * Color tokens — OKLCH-based semantic palette.
+ *
+ * Every value is a raw CSS value (no var() wrapper) so consumers can use them
+ * either as CSS custom properties or directly in Tailwind config.
+ *
+ * Brand-specific colors live in themes (see ./themes/).
+ */
+declare const colors: {
+    readonly background: "oklch(1 0 0)";
+    readonly foreground: "oklch(0.145 0 0)";
+    readonly card: "oklch(1 0 0)";
+    readonly cardForeground: "oklch(0.145 0 0)";
+    readonly popover: "oklch(1 0 0)";
+    readonly popoverForeground: "oklch(0.145 0 0)";
+    readonly primary: "oklch(0.205 0 0)";
+    readonly primaryForeground: "oklch(0.985 0 0)";
+    readonly secondary: "oklch(0.97 0 0)";
+    readonly secondaryForeground: "oklch(0.205 0 0)";
+    readonly muted: "oklch(0.97 0 0)";
+    readonly mutedForeground: "oklch(0.556 0 0)";
+    readonly accent: "oklch(0.97 0 0)";
+    readonly accentForeground: "oklch(0.205 0 0)";
+    readonly destructive: "oklch(0.577 0.245 27.325)";
+    readonly border: "oklch(0.922 0 0)";
+    readonly input: "oklch(0.922 0 0)";
+    readonly ring: "oklch(0.708 0 0)";
+    readonly chart1: "oklch(0.87 0 0)";
+    readonly chart2: "oklch(0.556 0 0)";
+    readonly chart3: "oklch(0.439 0 0)";
+    readonly chart4: "oklch(0.371 0 0)";
+    readonly chart5: "oklch(0.269 0 0)";
+    readonly sidebar: "oklch(0.985 0 0)";
+    readonly sidebarForeground: "oklch(0.145 0 0)";
+    readonly sidebarPrimary: "oklch(0.205 0 0)";
+    readonly sidebarPrimaryForeground: "oklch(0.985 0 0)";
+    readonly sidebarAccent: "oklch(0.97 0 0)";
+    readonly sidebarAccentForeground: "oklch(0.205 0 0)";
+    readonly sidebarBorder: "oklch(0.922 0 0)";
+    readonly sidebarRing: "oklch(0.708 0 0)";
+};
+declare const colorsDark: {
+    readonly background: "oklch(0.145 0 0)";
+    readonly foreground: "oklch(0.985 0 0)";
+    readonly card: "oklch(0.205 0 0)";
+    readonly cardForeground: "oklch(0.985 0 0)";
+    readonly popover: "oklch(0.205 0 0)";
+    readonly popoverForeground: "oklch(0.985 0 0)";
+    readonly primary: "oklch(0.922 0 0)";
+    readonly primaryForeground: "oklch(0.205 0 0)";
+    readonly secondary: "oklch(0.269 0 0)";
+    readonly secondaryForeground: "oklch(0.985 0 0)";
+    readonly muted: "oklch(0.269 0 0)";
+    readonly mutedForeground: "oklch(0.708 0 0)";
+    readonly accent: "oklch(0.269 0 0)";
+    readonly accentForeground: "oklch(0.985 0 0)";
+    readonly destructive: "oklch(0.704 0.191 22.216)";
+    readonly border: "oklch(1 0 0 / 10%)";
+    readonly input: "oklch(1 0 0 / 15%)";
+    readonly ring: "oklch(0.556 0 0)";
+    readonly chart1: "oklch(0.87 0 0)";
+    readonly chart2: "oklch(0.556 0 0)";
+    readonly chart3: "oklch(0.439 0 0)";
+    readonly chart4: "oklch(0.371 0 0)";
+    readonly chart5: "oklch(0.269 0 0)";
+    readonly sidebar: "oklch(0.205 0 0)";
+    readonly sidebarForeground: "oklch(0.985 0 0)";
+    readonly sidebarPrimary: "oklch(0.488 0.243 264.376)";
+    readonly sidebarPrimaryForeground: "oklch(0.985 0 0)";
+    readonly sidebarAccent: "oklch(0.269 0 0)";
+    readonly sidebarAccentForeground: "oklch(0.985 0 0)";
+    readonly sidebarBorder: "oklch(1 0 0 / 10%)";
+    readonly sidebarRing: "oklch(0.556 0 0)";
+};
+type SemanticColor = keyof typeof colors;
+
+/**
+ * Typography tokens.
+ *
+ * Font stacks, sizes, weights, line heights, letter spacing.
+ * Consumers set actual font-face loading — tokens only define the stack.
+ */
+declare const fontFamily: {
+    /** Body text — Inter or system sans */
+    readonly sans: readonly ["var(--font-inter)", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"];
+    /** Display / hero headings — Satoshi */
+    readonly display: readonly ["Satoshi", "ui-sans-serif", "system-ui", "-apple-system", "sans-serif"];
+    /** Labels, badges, section headers — Space Grotesk */
+    readonly label: readonly ["var(--font-space-grotesk)", "ui-sans-serif", "system-ui", "sans-serif"];
+    /** Code blocks */
+    readonly mono: readonly ["var(--font-geist-mono)", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"];
+};
+declare const fontSize: {
+    readonly xs: readonly ["0.75rem", {
+        readonly lineHeight: "1rem";
+    }];
+    readonly sm: readonly ["0.875rem", {
+        readonly lineHeight: "1.25rem";
+    }];
+    readonly base: readonly ["1rem", {
+        readonly lineHeight: "1.5rem";
+    }];
+    readonly lg: readonly ["1.125rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly xl: readonly ["1.25rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly "2xl": readonly ["1.5rem", {
+        readonly lineHeight: "2rem";
+    }];
+    readonly "3xl": readonly ["1.875rem", {
+        readonly lineHeight: "2.25rem";
+    }];
+    readonly "4xl": readonly ["2.25rem", {
+        readonly lineHeight: "2.5rem";
+    }];
+    readonly "5xl": readonly ["3rem", {
+        readonly lineHeight: "1.15";
+    }];
+    readonly "6xl": readonly ["3.75rem", {
+        readonly lineHeight: "1.1";
+    }];
+};
+declare const letterSpacing: {
+    readonly tighter: "-0.05em";
+    readonly tight: "-0.025em";
+    readonly normal: "0em";
+    readonly wide: "0.025em";
+    readonly wider: "0.05em";
+    readonly label: "0.15em";
+};
+
+/**
+ * Spacing & layout tokens.
+ */
+declare const radius: {
+    readonly sm: "calc(var(--radius) * 0.6)";
+    readonly md: "calc(var(--radius) * 0.8)";
+    readonly lg: "var(--radius)";
+    readonly xl: "calc(var(--radius) * 1.4)";
+    readonly "2xl": "calc(var(--radius) * 1.8)";
+    readonly "3xl": "calc(var(--radius) * 2.2)";
+    readonly "4xl": "calc(var(--radius) * 2.6)";
+    readonly full: "9999px";
+};
+declare const radiusBase = "0.625rem";
+declare const container: {
+    readonly center: true;
+    readonly padding: {
+        readonly DEFAULT: "1.25rem";
+        readonly sm: "1.5rem";
+        readonly lg: "2rem";
+        readonly xl: "2.5rem";
+        readonly "2xl": "3rem";
+    };
+    readonly screens: {
+        readonly "2xl": "1320px";
+    };
+};
+
+/**
+ * Shadow tokens — elevation system + glow effects.
+ */
+declare const boxShadow: {
+    /** Subtle teal glow for CTAs */
+    readonly glow: "0 0 30px rgba(0, 196, 180, 0.15)";
+    /** Strong teal glow on hover */
+    readonly glowStrong: "0 0 40px rgba(0, 196, 180, 0.4)";
+    /** Deep panel shadow with inset highlight (glassmorphism) */
+    readonly panel: "0 24px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.08)";
+    /** Glass panel shadow */
+    readonly glass: "0 28px 90px rgba(0, 0, 0, 0.38), 0 0 36px rgba(0, 196, 180, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06)";
+};
+
+/**
+ * Animation tokens — keyframes and durations.
+ */
+declare const keyframes: {
+    readonly marquee: {
+        readonly "0%": {
+            readonly transform: "translate3d(0, 0, 0)";
+        };
+        readonly "100%": {
+            readonly transform: "translate3d(-50%, 0, 0)";
+        };
+    };
+    readonly "marquee-reverse": {
+        readonly "0%": {
+            readonly transform: "translate3d(-50%, 0, 0)";
+        };
+        readonly "100%": {
+            readonly transform: "translate3d(0, 0, 0)";
+        };
+    };
+    readonly shimmer: {
+        readonly "0%": {
+            readonly transform: "translate3d(-150%, 0, 0)";
+        };
+        readonly "100%": {
+            readonly transform: "translate3d(150%, 0, 0)";
+        };
+    };
+    readonly float: {
+        readonly "0%, 100%": {
+            readonly transform: "translate3d(0, 0, 0)";
+        };
+        readonly "50%": {
+            readonly transform: "translate3d(0, -12px, 0)";
+        };
+    };
+    readonly pulseGlow: {
+        readonly "0%, 100%": {
+            readonly boxShadow: "0 0 0 rgba(0, 196, 180, 0.0)";
+        };
+        readonly "50%": {
+            readonly boxShadow: "0 0 36px rgba(0, 196, 180, 0.18)";
+        };
+    };
+};
+declare const animation: {
+    readonly marquee: "marquee 28s linear infinite";
+    readonly "marquee-slow": "marquee 42s linear infinite";
+    readonly "marquee-reverse": "marquee-reverse 32s linear infinite";
+    readonly shimmer: "shimmer 4.2s linear infinite";
+    readonly float: "float 8s ease-in-out infinite";
+    readonly "pulse-glow": "pulseGlow 5s ease-in-out infinite";
+};
+/** Standard easing curves */
+declare const easing: {
+    spring: readonly [0.22, 1, 0.36, 1];
+    smooth: readonly [0.4, 0, 0.2, 1];
+    snappy: readonly [0.2, 0, 0, 1];
+};
+
+/**
+ * Gradient tokens — background images and overlays.
+ */
+declare const backgroundImage: {
+    /** CTA gradient: navy → aqua (production brand) */
+    readonly "cta-gradient": "linear-gradient(135deg, #1f2d56, #8fccb6)";
+    /** Grid pattern overlay for hero backgrounds */
+    readonly "hero-grid": "linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px)";
+};
+/** Glassmorphism background for panels */
+declare const glassPanel: {
+    readonly background: "radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 42%),\n    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),\n    rgba(15, 23, 42, 0.84)";
+    readonly border: "1px solid rgba(255, 255, 255, 0.08)";
+    readonly backdropFilter: "blur(20px)";
+};
+/** Spotlight overlay for sections */
+declare const spotlight: {
+    readonly background: "radial-gradient(circle at 50% 0%, rgba(0, 196, 180, 0.18), transparent 28%),\n    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.2), transparent 25%)";
+};
+/** Dark page body background */
+declare const darkBody: {
+    readonly background: "radial-gradient(circle at top, rgba(14, 165, 233, 0.12), transparent 32%),\n    radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.14), transparent 28%),\n    linear-gradient(180deg, #070b14 0%, #080b14 45%, #09111f 100%)";
+};
+
+export { type SemanticColor, animation, backgroundImage, boxShadow, colors, colorsDark, container, darkBody, easing, fontFamily, fontSize, glassPanel, keyframes, letterSpacing, radius, radiusBase, spotlight };