@brycks/core-front 0.2.7 → 0.2.9

package/dist/tokens.d.ts

@@ -1,2 +1,976 @@
-export * from './design-system/tokens/index'
-export {}
+/** Accent colors - warm coral for emphasis */
+export declare const accent: {
+    readonly 50: "#FFF5F3";
+    readonly 100: "#FFE8E3";
+    readonly 200: "#FFD5CC";
+    readonly 300: "#FFB5A6";
+    readonly 400: "#FF8A71";
+    readonly 500: "#F86545";
+    readonly 600: "#E54A28";
+    readonly 700: "#C13A1D";
+    readonly 800: "#9F331C";
+    readonly 900: "#842F1D";
+    readonly 950: "#48140A";
+};
+
+declare type Animation_2 = keyof typeof animations;
+export { Animation_2 as Animation }
+
+/** Animation keyframe names for CSS animations */
+export declare const animations: {
+    /** Fade in */
+    readonly fadeIn: {
+        readonly from: {
+            readonly opacity: 0;
+        };
+        readonly to: {
+            readonly opacity: 1;
+        };
+    };
+    /** Fade out */
+    readonly fadeOut: {
+        readonly from: {
+            readonly opacity: 1;
+        };
+        readonly to: {
+            readonly opacity: 0;
+        };
+    };
+    /** Scale up */
+    readonly scaleIn: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "scale(0.95)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "scale(1)";
+        };
+    };
+    /** Scale down */
+    readonly scaleOut: {
+        readonly from: {
+            readonly opacity: 1;
+            readonly transform: "scale(1)";
+        };
+        readonly to: {
+            readonly opacity: 0;
+            readonly transform: "scale(0.95)";
+        };
+    };
+    /** Slide up */
+    readonly slideUp: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateY(10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateY(0)";
+        };
+    };
+    /** Slide down */
+    readonly slideDown: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateY(-10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateY(0)";
+        };
+    };
+    /** Slide left */
+    readonly slideLeft: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateX(10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateX(0)";
+        };
+    };
+    /** Slide right */
+    readonly slideRight: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateX(-10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateX(0)";
+        };
+    };
+    /** Spin */
+    readonly spin: {
+        readonly from: {
+            readonly transform: "rotate(0deg)";
+        };
+        readonly to: {
+            readonly transform: "rotate(360deg)";
+        };
+    };
+    /** Pulse */
+    readonly pulse: {
+        readonly '0%': {
+            readonly opacity: 1;
+        };
+        readonly '50%': {
+            readonly opacity: 0.5;
+        };
+        readonly '100%': {
+            readonly opacity: 1;
+        };
+    };
+    /** Shake - for errors */
+    readonly shake: {
+        readonly '0%, 100%': {
+            readonly transform: "translateX(0)";
+        };
+        readonly '10%, 30%, 50%, 70%, 90%': {
+            readonly transform: "translateX(-4px)";
+        };
+        readonly '20%, 40%, 60%, 80%': {
+            readonly transform: "translateX(4px)";
+        };
+    };
+};
+
+export declare type BorderStyle = keyof typeof borderStyles;
+
+/** Semantic border styles */
+export declare const borderStyles: {
+    /** Subtle divider */
+    readonly subtle: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(0, 0, 0, 0.06)";
+    };
+    /** Default border */
+    readonly default: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(0, 0, 0, 0.1)";
+    };
+    /** Strong border - more visible */
+    readonly strong: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(0, 0, 0, 0.15)";
+    };
+    /** Focus border */
+    readonly focus: {
+        readonly width: 2;
+        readonly style: "solid";
+        readonly color: "rgba(85, 120, 244, 0.5)";
+    };
+    /** Error border */
+    readonly error: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(239, 68, 68, 0.5)";
+    };
+    /** Success border */
+    readonly success: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(16, 185, 129, 0.5)";
+    };
+};
+
+export declare type BorderWidth = keyof typeof borderWidths;
+
+/** Border width scale */
+export declare const borderWidths: {
+    /** No border */
+    readonly 0: 0;
+    /** 1px - hairline border */
+    readonly DEFAULT: 1;
+    /** 2px - medium border */
+    readonly 2: 2;
+    /** 3px - thick border */
+    readonly 3: 3;
+    /** 4px - heavy border */
+    readonly 4: 4;
+};
+
+export declare type Breakpoint = keyof typeof breakpoints;
+
+/** Breakpoint values in pixels */
+export declare const breakpoints: {
+    /** Mobile portrait - 320px+ */
+    readonly xs: 320;
+    /** Mobile landscape - 480px+ */
+    readonly sm: 480;
+    /** Tablet portrait - 640px+ */
+    readonly md: 640;
+    /** Tablet landscape - 768px+ */
+    readonly lg: 768;
+    /** Desktop - 1024px+ */
+    readonly xl: 1024;
+    /** Large desktop - 1280px+ */
+    readonly '2xl': 1280;
+    /** Extra large screens - 1536px+ */
+    readonly '3xl': 1536;
+    /** Ultra wide - 1920px+ */
+    readonly '4xl': 1920;
+};
+
+export declare type Colors = typeof colors;
+
+/** Complete color palette export */
+export declare const colors: {
+    readonly neutrals: {
+        readonly white: "#FFFFFF";
+        readonly gray50: "#FAFAFA";
+        readonly gray100: "#F5F5F7";
+        readonly gray200: "#E8E8ED";
+        readonly gray300: "#D2D2D7";
+        readonly gray400: "#AEAEB2";
+        readonly gray500: "#8E8E93";
+        readonly gray600: "#636366";
+        readonly gray700: "#48484A";
+        readonly gray800: "#3A3A3C";
+        readonly gray900: "#2C2C2E";
+        readonly gray950: "#1D1D1F";
+        readonly black: "#000000";
+    };
+    readonly primary: {
+        readonly 50: "#EEF4FF";
+        readonly 100: "#E0EBFF";
+        readonly 200: "#C7DAFF";
+        readonly 300: "#A4C1FF";
+        readonly 400: "#7A9FFF";
+        readonly 500: "#5578F4";
+        readonly 600: "#3B5CE9";
+        readonly 700: "#2D47D6";
+        readonly 800: "#2A3CAD";
+        readonly 900: "#283889";
+        readonly 950: "#1A2352";
+    };
+    readonly accent: {
+        readonly 50: "#FFF5F3";
+        readonly 100: "#FFE8E3";
+        readonly 200: "#FFD5CC";
+        readonly 300: "#FFB5A6";
+        readonly 400: "#FF8A71";
+        readonly 500: "#F86545";
+        readonly 600: "#E54A28";
+        readonly 700: "#C13A1D";
+        readonly 800: "#9F331C";
+        readonly 900: "#842F1D";
+        readonly 950: "#48140A";
+    };
+    readonly success: {
+        readonly 50: "#ECFDF5";
+        readonly 100: "#D1FAE5";
+        readonly 200: "#A7F3D0";
+        readonly 300: "#6EE7B7";
+        readonly 400: "#34D399";
+        readonly 500: "#10B981";
+        readonly 600: "#059669";
+        readonly 700: "#047857";
+        readonly 800: "#065F46";
+        readonly 900: "#064E3B";
+        readonly 950: "#022C22";
+    };
+    readonly warning: {
+        readonly 50: "#FFFBEB";
+        readonly 100: "#FEF3C7";
+        readonly 200: "#FDE68A";
+        readonly 300: "#FCD34D";
+        readonly 400: "#FBBF24";
+        readonly 500: "#F59E0B";
+        readonly 600: "#D97706";
+        readonly 700: "#B45309";
+        readonly 800: "#92400E";
+        readonly 900: "#78350F";
+        readonly 950: "#451A03";
+    };
+    readonly error: {
+        readonly 50: "#FEF2F2";
+        readonly 100: "#FEE2E2";
+        readonly 200: "#FECACA";
+        readonly 300: "#FCA5A5";
+        readonly 400: "#F87171";
+        readonly 500: "#EF4444";
+        readonly 600: "#DC2626";
+        readonly 700: "#B91C1C";
+        readonly 800: "#991B1B";
+        readonly 900: "#7F1D1D";
+        readonly 950: "#450A0A";
+    };
+    readonly info: {
+        readonly 50: "#ECFEFF";
+        readonly 100: "#CFFAFE";
+        readonly 200: "#A5F3FC";
+        readonly 300: "#67E8F9";
+        readonly 400: "#22D3EE";
+        readonly 500: "#06B6D4";
+        readonly 600: "#0891B2";
+        readonly 700: "#0E7490";
+        readonly 800: "#155E75";
+        readonly 900: "#164E63";
+        readonly 950: "#083344";
+    };
+};
+
+export declare type ColorScale = typeof primary;
+
+export declare type Container = keyof typeof containers;
+
+/** Container max-widths aligned with breakpoints */
+export declare const containers: {
+    readonly xs: 320;
+    readonly sm: 480;
+    readonly md: 640;
+    readonly lg: 768;
+    readonly xl: 1024;
+    readonly '2xl': 1280;
+    readonly '3xl': 1440;
+    readonly full: "100%";
+};
+
+export declare type Duration = keyof typeof durations;
+
+/** Duration scale in milliseconds */
+export declare const durations: {
+    /** Instant - for micro-interactions */
+    readonly instant: 0;
+    /** 50ms - nearly instant */
+    readonly faster: 50;
+    /** 100ms - very fast, state changes */
+    readonly fast: 100;
+    /** 150ms - quick, hover states */
+    readonly quick: 150;
+    /** 200ms - default transitions */
+    readonly normal: 200;
+    /** 300ms - medium, focus changes */
+    readonly relaxed: 300;
+    /** 400ms - slow, content reveals */
+    readonly slow: 400;
+    /** 500ms - slower, modal openings */
+    readonly slower: 500;
+    /** 700ms - very slow, page transitions */
+    readonly lazy: 700;
+    /** 1000ms - dramatic reveals */
+    readonly dramatic: 1000;
+};
+
+export declare type Easing = keyof typeof easings;
+
+/** Easing functions - natural, Apple-inspired curves */
+export declare const easings: {
+    /** Linear - constant speed */
+    readonly linear: "linear";
+    /** Ease - subtle acceleration/deceleration */
+    readonly ease: "ease";
+    /** Ease in - slow start */
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    /** Ease out - slow end (most common) */
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    /** Ease in-out - slow start and end */
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Apple-style spring - bouncy, natural feel */
+    readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    /** Soft spring - subtle bounce */
+    readonly softSpring: "cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Smooth - very smooth deceleration */
+    readonly smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+    /** Snappy - quick with soft landing */
+    readonly snappy: "cubic-bezier(0.2, 0, 0, 1)";
+    /** Expressive - dramatic entrance */
+    readonly expressive: "cubic-bezier(0.19, 1, 0.22, 1)";
+    /** Bounce - playful */
+    readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+};
+
+/** Error - refined red */
+export declare const error: {
+    readonly 50: "#FEF2F2";
+    readonly 100: "#FEE2E2";
+    readonly 200: "#FECACA";
+    readonly 300: "#FCA5A5";
+    readonly 400: "#F87171";
+    readonly 500: "#EF4444";
+    readonly 600: "#DC2626";
+    readonly 700: "#B91C1C";
+    readonly 800: "#991B1B";
+    readonly 900: "#7F1D1D";
+    readonly 950: "#450A0A";
+};
+
+export declare type FocusRing = keyof typeof focusRings;
+
+/** Focus ring shadows - for accessibility */
+export declare const focusRings: {
+    /** Default focus ring - primary color */
+    readonly default: "0 0 0 3px rgba(85, 120, 244, 0.35)";
+    /** Strong focus ring - higher visibility */
+    readonly strong: "0 0 0 4px rgba(85, 120, 244, 0.45)";
+    /** Error focus ring */
+    readonly error: "0 0 0 3px rgba(239, 68, 68, 0.35)";
+    /** Success focus ring */
+    readonly success: "0 0 0 3px rgba(16, 185, 129, 0.35)";
+    /** Focus within container */
+    readonly within: "0 0 0 2px rgba(85, 120, 244, 0.2)";
+};
+
+/** Font family stacks */
+export declare const fontFamilies: {
+    /** Primary font - clean, modern sans-serif */
+    readonly sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+    /** Monospace for code */
+    readonly mono: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+    /** Display font for large headings (optional) */
+    readonly display: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+};
+
+export declare type FontFamily = keyof typeof fontFamilies;
+
+export declare type FontSize = keyof typeof fontSizes;
+
+/** Font sizes in pixels */
+export declare const fontSizes: {
+    /** 11px - Micro text, labels */
+    readonly xs: 11;
+    /** 12px - Small text, captions */
+    readonly sm: 12;
+    /** 14px - Body small, secondary text */
+    readonly base: 14;
+    /** 16px - Body default */
+    readonly md: 16;
+    /** 18px - Body large, lead text */
+    readonly lg: 18;
+    /** 20px - Heading 6 */
+    readonly xl: 20;
+    /** 24px - Heading 5 */
+    readonly '2xl': 24;
+    /** 28px - Heading 4 */
+    readonly '3xl': 28;
+    /** 32px - Heading 3 */
+    readonly '4xl': 32;
+    /** 40px - Heading 2 */
+    readonly '5xl': 40;
+    /** 48px - Heading 1 */
+    readonly '6xl': 48;
+    /** 60px - Display small */
+    readonly '7xl': 60;
+    /** 72px - Display medium */
+    readonly '8xl': 72;
+    /** 96px - Display large */
+    readonly '9xl': 96;
+};
+
+export declare type FontWeight = keyof typeof fontWeights;
+
+/** Font weights */
+export declare const fontWeights: {
+    /** 400 - Regular body text */
+    readonly regular: 400;
+    /** 500 - Medium emphasis */
+    readonly medium: 500;
+    /** 600 - Semi-bold for subheadings */
+    readonly semibold: 600;
+    /** 700 - Bold for headings */
+    readonly bold: 700;
+};
+
+export declare type Glow = keyof typeof glows;
+
+/** Glow effects - for special elements */
+export declare const glows: {
+    /** Subtle primary glow */
+    readonly primary: "0 0 20px rgba(85, 120, 244, 0.15), 0 0 40px rgba(85, 120, 244, 0.1)";
+    /** Subtle accent glow */
+    readonly accent: "0 0 20px rgba(248, 101, 69, 0.15), 0 0 40px rgba(248, 101, 69, 0.1)";
+    /** Success glow */
+    readonly success: "0 0 20px rgba(16, 185, 129, 0.15), 0 0 40px rgba(16, 185, 129, 0.1)";
+    /** Soft white glow - for dark mode highlights */
+    readonly white: "0 0 30px rgba(255, 255, 255, 0.1)";
+};
+
+/** Info - calm cyan */
+export declare const info: {
+    readonly 50: "#ECFEFF";
+    readonly 100: "#CFFAFE";
+    readonly 200: "#A5F3FC";
+    readonly 300: "#67E8F9";
+    readonly 400: "#22D3EE";
+    readonly 500: "#06B6D4";
+    readonly 600: "#0891B2";
+    readonly 700: "#0E7490";
+    readonly 800: "#155E75";
+    readonly 900: "#164E63";
+    readonly 950: "#083344";
+};
+
+export declare type LetterSpacing = keyof typeof letterSpacings;
+
+/** Letter spacing (tracking) */
+export declare const letterSpacings: {
+    /** Tighter - for large display text */
+    readonly tighter: "-0.05em";
+    /** Tight - for headings */
+    readonly tight: "-0.025em";
+    /** Normal - default */
+    readonly normal: "0em";
+    /** Wide - for small caps, labels */
+    readonly wide: "0.025em";
+    /** Wider - for all caps text */
+    readonly wider: "0.05em";
+    /** Widest - for very small text */
+    readonly widest: "0.1em";
+};
+
+export declare type LineHeight = keyof typeof lineHeights;
+
+/** Line heights */
+export declare const lineHeights: {
+    /** Tight - for large headings */
+    readonly none: 1;
+    readonly tight: 1.15;
+    /** Snug - for medium headings */
+    readonly snug: 1.25;
+    /** Normal - for body text */
+    readonly normal: 1.5;
+    /** Relaxed - for small text, better readability */
+    readonly relaxed: 1.625;
+    /** Loose - for captions, labels */
+    readonly loose: 1.75;
+};
+
+/** Media query helpers */
+export declare const mediaQueries: {
+    readonly xs: "@media (min-width: 320px)";
+    readonly sm: "@media (min-width: 480px)";
+    readonly md: "@media (min-width: 640px)";
+    readonly lg: "@media (min-width: 768px)";
+    readonly xl: "@media (min-width: 1024px)";
+    readonly '2xl': "@media (min-width: 1280px)";
+    readonly '3xl': "@media (min-width: 1536px)";
+    readonly '4xl': "@media (min-width: 1920px)";
+    /** Max-width queries (mobile-first overrides) */
+    readonly maxXs: `@media (max-width: ${number}px)`;
+    readonly maxSm: `@media (max-width: ${number}px)`;
+    readonly maxMd: `@media (max-width: ${number}px)`;
+    readonly maxLg: `@media (max-width: ${number}px)`;
+    readonly maxXl: `@media (max-width: ${number}px)`;
+    readonly max2xl: `@media (max-width: ${number}px)`;
+    /** Preference queries */
+    readonly prefersReducedMotion: "@media (prefers-reduced-motion: reduce)";
+    readonly prefersDark: "@media (prefers-color-scheme: dark)";
+    readonly prefersLight: "@media (prefers-color-scheme: light)";
+    readonly prefersHighContrast: "@media (prefers-contrast: high)";
+    /** Device specific */
+    readonly hover: "@media (hover: hover)";
+    readonly touch: "@media (hover: none) and (pointer: coarse)";
+    readonly fine: "@media (pointer: fine)";
+};
+
+export declare type MediaQuery = keyof typeof mediaQueries;
+
+/** Base neutral palette - grayscale with subtle warmth */
+export declare const neutrals: {
+    readonly white: "#FFFFFF";
+    readonly gray50: "#FAFAFA";
+    readonly gray100: "#F5F5F7";
+    readonly gray200: "#E8E8ED";
+    readonly gray300: "#D2D2D7";
+    readonly gray400: "#AEAEB2";
+    readonly gray500: "#8E8E93";
+    readonly gray600: "#636366";
+    readonly gray700: "#48484A";
+    readonly gray800: "#3A3A3C";
+    readonly gray900: "#2C2C2E";
+    readonly gray950: "#1D1D1F";
+    readonly black: "#000000";
+};
+
+export declare type NeutralScale = typeof neutrals;
+
+/** Primary brand colors - sophisticated blue */
+export declare const primary: {
+    readonly 50: "#EEF4FF";
+    readonly 100: "#E0EBFF";
+    readonly 200: "#C7DAFF";
+    readonly 300: "#A4C1FF";
+    readonly 400: "#7A9FFF";
+    readonly 500: "#5578F4";
+    readonly 600: "#3B5CE9";
+    readonly 700: "#2D47D6";
+    readonly 800: "#2A3CAD";
+    readonly 900: "#283889";
+    readonly 950: "#1A2352";
+};
+
+/** Border radius scale */
+export declare const radii: {
+    /** No radius - sharp corners */
+    readonly none: 0;
+    /** 2px - very subtle rounding */
+    readonly xs: 2;
+    /** 4px - subtle rounding */
+    readonly sm: 4;
+    /** 6px - slight rounding */
+    readonly md: 6;
+    /** 8px - default rounding */
+    readonly DEFAULT: 8;
+    /** 10px - medium rounding */
+    readonly lg: 10;
+    /** 12px - noticeable rounding */
+    readonly xl: 12;
+    /** 16px - prominent rounding */
+    readonly '2xl': 16;
+    /** 20px - heavy rounding */
+    readonly '3xl': 20;
+    /** 24px - very heavy rounding */
+    readonly '4xl': 24;
+    /** 9999px - full/pill shape */
+    readonly full: 9999;
+};
+
+export declare type Radius = keyof typeof radii;
+
+export declare type SemanticSpacing = typeof semanticSpacing;
+
+/** Semantic spacing aliases */
+export declare const semanticSpacing: {
+    /** Component internal padding - tight */
+    readonly componentPaddingXs: number;
+    /** Component internal padding - default */
+    readonly componentPaddingSm: number;
+    /** Component internal padding - comfortable */
+    readonly componentPaddingMd: number;
+    /** Component internal padding - spacious */
+    readonly componentPaddingLg: number;
+    /** Gap between inline elements */
+    readonly inlineGapXs: 4;
+    readonly inlineGapSm: number;
+    readonly inlineGapMd: number;
+    readonly inlineGapLg: number;
+    /** Gap between stacked elements */
+    readonly stackGapXs: number;
+    readonly stackGapSm: number;
+    readonly stackGapMd: number;
+    readonly stackGapLg: number;
+    readonly stackGapXl: number;
+    /** Page/section margins */
+    readonly sectionGapSm: number;
+    readonly sectionGapMd: number;
+    readonly sectionGapLg: number;
+    readonly sectionGapXl: number;
+    /** Container padding */
+    readonly containerPaddingSm: number;
+    readonly containerPaddingMd: number;
+    readonly containerPaddingLg: number;
+};
+
+export declare type Shadow = keyof typeof shadows;
+
+/** Shadow scale - from subtle to elevated */
+export declare const shadows: {
+    /** No shadow */
+    readonly none: "none";
+    /** Extra small - subtle lift, perfect for cards on hover */
+    readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 0 rgba(0, 0, 0, 0.06)";
+    /** Small - light elevation for cards, inputs */
+    readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 2px 6px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.04)";
+    /** Medium - default card shadow */
+    readonly md: "0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 4px 8px -1px rgba(0, 0, 0, 0.06), 0 8px 16px -2px rgba(0, 0, 0, 0.06)";
+    /** Large - dropdown, popover shadows */
+    readonly lg: "0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 16px 32px -8px rgba(0, 0, 0, 0.08)";
+    /** Extra large - modal shadows */
+    readonly xl: "0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 32px 64px -16px rgba(0, 0, 0, 0.12)";
+    /** 2XL - floating panels, notifications */
+    readonly '2xl': "0 12px 24px -6px rgba(0, 0, 0, 0.05), 0 24px 48px -12px rgba(0, 0, 0, 0.1), 0 48px 96px -24px rgba(0, 0, 0, 0.15)";
+    /** Inner shadow - for inset effects */
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)";
+    /** Inner shadow - stronger, for pressed states */
+    readonly innerStrong: "inset 0 2px 6px 0 rgba(0, 0, 0, 0.1)";
+};
+
+export declare type Spacing = typeof spacing;
+
+/** Spacing scale - values in pixels */
+export declare const spacing: {
+    /** 0px */
+    readonly 0: 0;
+    /** 1px - hairline */
+    readonly px: 1;
+    /** 2px - micro */
+    readonly 0.5: number;
+    /** 4px - tiny */
+    readonly 1: 4;
+    /** 6px */
+    readonly 1.5: number;
+    /** 8px - extra small */
+    readonly 2: number;
+    /** 10px */
+    readonly 2.5: number;
+    /** 12px - small */
+    readonly 3: number;
+    /** 14px */
+    readonly 3.5: number;
+    /** 16px - medium (base) */
+    readonly 4: number;
+    /** 20px */
+    readonly 5: number;
+    /** 24px - large */
+    readonly 6: number;
+    /** 28px */
+    readonly 7: number;
+    /** 32px - extra large */
+    readonly 8: number;
+    /** 36px */
+    readonly 9: number;
+    /** 40px */
+    readonly 10: number;
+    /** 44px */
+    readonly 11: number;
+    /** 48px - 2x large */
+    readonly 12: number;
+    /** 56px */
+    readonly 14: number;
+    /** 64px - 3x large */
+    readonly 16: number;
+    /** 80px */
+    readonly 20: number;
+    /** 96px - 4x large */
+    readonly 24: number;
+    /** 112px */
+    readonly 28: number;
+    /** 128px */
+    readonly 32: number;
+    /** 160px */
+    readonly 40: number;
+    /** 192px */
+    readonly 48: number;
+    /** 224px */
+    readonly 56: number;
+    /** 256px */
+    readonly 64: number;
+    /** 320px */
+    readonly 80: number;
+    /** 384px */
+    readonly 96: number;
+};
+
+export declare type SpacingKey = keyof Spacing;
+
+/** Success - calm green */
+export declare const success: {
+    readonly 50: "#ECFDF5";
+    readonly 100: "#D1FAE5";
+    readonly 200: "#A7F3D0";
+    readonly 300: "#6EE7B7";
+    readonly 400: "#34D399";
+    readonly 500: "#10B981";
+    readonly 600: "#059669";
+    readonly 700: "#047857";
+    readonly 800: "#065F46";
+    readonly 900: "#064E3B";
+    readonly 950: "#022C22";
+};
+
+export declare type TextStyle = keyof typeof textStyles;
+
+/** Pre-composed text styles */
+export declare const textStyles: {
+    /** Display styles - for hero sections */
+    readonly displayLarge: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 96;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1;
+        readonly letterSpacing: "-0.05em";
+    };
+    readonly displayMedium: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 72;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1;
+        readonly letterSpacing: "-0.05em";
+    };
+    readonly displaySmall: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 60;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.15;
+        readonly letterSpacing: "-0.025em";
+    };
+    /** Heading styles */
+    readonly h1: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 48;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.15;
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h2: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 40;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.15;
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h3: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 32;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h4: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 28;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "0em";
+    };
+    readonly h5: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 24;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "0em";
+    };
+    readonly h6: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 20;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "0em";
+    };
+    /** Body text styles */
+    readonly bodyLarge: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 18;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0em";
+    };
+    readonly bodyDefault: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 16;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0em";
+    };
+    readonly bodySmall: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 14;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0em";
+    };
+    /** Utility text styles */
+    readonly label: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0.025em";
+    };
+    readonly caption: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.625;
+        readonly letterSpacing: "0.025em";
+    };
+    readonly overline: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0.1em";
+        readonly textTransform: "uppercase";
+    };
+    /** Code styles */
+    readonly code: {
+        readonly fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+        readonly fontSize: 12;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.625;
+        readonly letterSpacing: "0em";
+    };
+};
+
+export declare type Transition = keyof typeof transitions;
+
+/** Pre-composed transition presets */
+export declare const transitions: {
+    /** No transition */
+    readonly none: "none";
+    /** Default - for most interactions */
+    readonly default: "all 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Fast - for hover states, micro-interactions */
+    readonly fast: "all 100ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Quick - for quick feedback */
+    readonly quick: "all 150ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Smooth - for focus states */
+    readonly smooth: "all 300ms cubic-bezier(0.25, 0.1, 0.25, 1)";
+    /** Spring - for interactive elements */
+    readonly spring: "all 300ms cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Slow - for reveals, modals */
+    readonly slow: "all 400ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Transform only */
+    readonly transform: "transform 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Opacity only */
+    readonly opacity: "opacity 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Colors only */
+    readonly colors: "color 100ms cubic-bezier(0, 0, 0.2, 1), background-color 100ms cubic-bezier(0, 0, 0.2, 1), border-color 100ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Shadow only */
+    readonly shadow: "box-shadow 200ms cubic-bezier(0, 0, 0.2, 1)";
+};
+
+/** Warning - warm amber */
+export declare const warning: {
+    readonly 50: "#FFFBEB";
+    readonly 100: "#FEF3C7";
+    readonly 200: "#FDE68A";
+    readonly 300: "#FCD34D";
+    readonly 400: "#FBBF24";
+    readonly 500: "#F59E0B";
+    readonly 600: "#D97706";
+    readonly 700: "#B45309";
+    readonly 800: "#92400E";
+    readonly 900: "#78350F";
+    readonly 950: "#451A03";
+};
+
+export declare type ZIndex = keyof typeof zIndex;
+
+/** Z-index scale */
+export declare const zIndex: {
+    /** Hidden - below everything */
+    readonly hide: -1;
+    /** Auto - default stacking */
+    readonly auto: "auto";
+    /** Base - normal content */
+    readonly base: 0;
+    /** Docked - sticky elements */
+    readonly docked: 10;
+    /** Dropdown - menus, selects */
+    readonly dropdown: 1000;
+    /** Sticky - sticky headers */
+    readonly sticky: 1100;
+    /** Banner - notification banners */
+    readonly banner: 1200;
+    /** Overlay - backdrop overlays */
+    readonly overlay: 1300;
+    /** Modal - dialog windows */
+    readonly modal: 1400;
+    /** Popover - popovers, tooltips */
+    readonly popover: 1500;
+    /** Skiplink - accessibility skip links */
+    readonly skipLink: 1600;
+    /** Toast - notification toasts */
+    readonly toast: 1700;
+    /** Tooltip - tooltips (highest) */
+    readonly tooltip: 1800;
+};
+
+export { }