@rainersoft/design-tokens 2.3.1 → 2.5.0

package/dist/index.d.mts

@@ -8439,6 +8439,2904 @@ declare function spacing(size: keyof Tokens['spacing']): string;
  * Helper para obter valor de raio de borda
  */
 declare function radius(size: keyof Tokens['radius']): string;
+/**
+ * Obtém uma cor de token de forma segura com fallback
+ *
+ * Acessa cores primitivas por tema, nome da cor e shade específico.
+ * Retorna fallback se o token não existir.
+ *
+ * @param theme - Tema ('dark' ou 'light')
+ * @param color - Nome da cor primitiva (ex: 'emerald', 'cyan', 'purple')
+ * @param shade - Tom da cor (50, 100, 200, 300, 400, 500, 600, 700, 800, 900)
+ * @param fallback - Cor de fallback em hexadecimal
+ * @returns Cor hexadecimal
+ *
+ * @example
+ * ```typescript
+ * getTokenColor('dark', 'emerald', 400, '#10b981') // Retorna emerald[400] do tema dark
+ * getTokenColor('light', 'cyan', 500, '#06b6d4')   // Retorna cyan[500] do tema light
+ * ```
+ */
+declare function getTokenColor(theme: 'dark' | 'light', color: string, shade: number, fallback: string): string;
+/**
+ * Carrega os design tokens de forma segura
+ *
+ * Útil para componentes que são carregados dinamicamente ou em SSR.
+ * Retorna tokens e GRADIENT_DIRECTIONS com fallbacks seguros.
+ *
+ * @returns Objeto contendo tokens e GRADIENT_DIRECTIONS
+ *
+ * @example
+ * ```typescript
+ * const { tokens: designTokens, GRADIENT_DIRECTIONS } = loadDesignTokensSafely();
+ * if (designTokens) {
+ *   const color = designTokens.colors.dark.primary.base;
+ * }
+ * ```
+ */
+declare function loadDesignTokensSafely(): {
+    tokens: {
+        readonly colors: {
+            readonly light: {
+                primary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                secondary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                accent: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                background: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    overlay: string;
+                    muted: string;
+                };
+                surface: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    elevated: string;
+                    overlay: string;
+                    hover: string;
+                    active: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    disabled: string;
+                    link: string;
+                    linkHover: string;
+                    linkActive: string;
+                    linkVisited: string;
+                    onPrimary: string;
+                    onSecondary: string;
+                    onAccent: string;
+                    onBackground: string;
+                    onSurface: string;
+                };
+                border: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    focus: string;
+                    focusRing: string;
+                    inverse: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                };
+                status: {
+                    success: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    warning: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    error: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    info: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                };
+                interactive: {
+                    default: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    disabledText: string;
+                    focus: string;
+                    focusRing: string;
+                };
+                primitive: {
+                    cyan: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    purple: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    pink: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    blue: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    green: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    orange: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    red: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    amber: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    emerald: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    neutral: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                        "950": string;
+                    };
+                };
+                effects: {
+                    matrixRain: {
+                        base: string;
+                    };
+                    stars: {
+                        base: string;
+                    };
+                };
+            };
+            readonly dark: {
+                primary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                secondary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                accent: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                background: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    overlay: string;
+                    muted: string;
+                };
+                surface: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    elevated: string;
+                    overlay: string;
+                    glass: string;
+                    glassHover: string;
+                    hover: string;
+                    active: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    disabled: string;
+                    link: string;
+                    linkHover: string;
+                    linkActive: string;
+                    linkVisited: string;
+                    onPrimary: string;
+                    onSecondary: string;
+                    onAccent: string;
+                    onBackground: string;
+                    onSurface: string;
+                    glow: string;
+                    neonCyan: string;
+                    neonPink: string;
+                    neonPurple: string;
+                    neonGreen: string;
+                };
+                border: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    focus: string;
+                    focusRing: string;
+                    inverse: string;
+                    neon: string;
+                    neonGlow: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                };
+                status: {
+                    success: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    warning: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    error: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    info: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                };
+                interactive: {
+                    default: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    disabledText: string;
+                    focus: string;
+                    focusRing: string;
+                };
+                effects: {
+                    glowCyan: string;
+                    glowPink: string;
+                    glowPurple: string;
+                    glowGreen: string;
+                    shadowSm: string;
+                    shadowMd: string;
+                    shadowLg: string;
+                };
+                gradients: {
+                    primary: string;
+                    secondary: string;
+                    accent: string;
+                    background: string;
+                };
+                primitive: {
+                    cyan: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    purple: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    pink: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    blue: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    green: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    orange: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    red: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    amber: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    emerald: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    neutral: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                        "950": string;
+                    };
+                };
+            };
+        };
+        readonly typography: {
+            fontFamily: {
+                sans: string;
+                serif: string;
+                mono: string;
+                display: string;
+                body: string;
+                code: string;
+            };
+            fontSize: {
+                xs: string;
+                sm: string;
+                base: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+                "4xl": string;
+                "5xl": string;
+                "6xl": string;
+                "7xl": string;
+                "8xl": string;
+                "9xl": string;
+            };
+            fontWeight: {
+                thin: string;
+                extralight: string;
+                light: string;
+                normal: string;
+                medium: string;
+                semibold: string;
+                bold: string;
+                extrabold: string;
+                black: string;
+            };
+            lineHeight: {
+                none: string;
+                tight: string;
+                snug: string;
+                normal: string;
+                relaxed: string;
+                loose: string;
+            };
+            letterSpacing: {
+                tighter: string;
+                tight: string;
+                normal: string;
+                wide: string;
+                wider: string;
+                widest: string;
+            };
+            headings: {
+                h1: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h2: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h3: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h4: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h5: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h6: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+            };
+            subtitle: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+            };
+            body: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            caption: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            button: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            label: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            code: {
+                inline: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                block: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+        };
+        readonly spacing: {
+            "0": string;
+            px: string;
+            "0.5": string;
+            "1": string;
+            "1.5": string;
+            "2": string;
+            "2.5": string;
+            "3": string;
+            "3.5": string;
+            "4": string;
+            "5": string;
+            "6": string;
+            "7": string;
+            "8": string;
+            "9": string;
+            "10": string;
+            "11": string;
+            "12": string;
+            "14": string;
+            "16": string;
+            "20": string;
+            "24": string;
+            "28": string;
+            "32": string;
+            "36": string;
+            "40": string;
+            "44": string;
+            "48": string;
+            "52": string;
+            "56": string;
+            "60": string;
+            "64": string;
+            "72": string;
+            "80": string;
+            "96": string;
+        };
+        readonly radius: {
+            none: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+            full: string;
+        };
+        readonly shadows: {
+            light: {
+                xs: string;
+                sm: string;
+                base: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                inner: string;
+            };
+            dark: {
+                xs: string;
+                sm: string;
+                base: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                inner: string;
+                glow: {
+                    cyan: string;
+                    pink: string;
+                    purple: string;
+                    green: string;
+                };
+            };
+        };
+        readonly animations: {
+            "accordion-down": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            "accordion-up": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            "slide-in": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    "0%": {
+                        transform: string;
+                        opacity: string;
+                    };
+                    "100%": {
+                        transform: string;
+                        opacity: string;
+                    };
+                };
+            };
+            "fade-in": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    "0%": {
+                        opacity: string;
+                    };
+                    "100%": {
+                        opacity: string;
+                    };
+                };
+            };
+            glitch: {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%, 100%": {
+                        transform: string;
+                    };
+                    "10%": {
+                        transform: string;
+                    };
+                    "20%": {
+                        transform: string;
+                    };
+                    "30%, 50%, 70%, 90%": {
+                        transform: string;
+                    };
+                };
+            };
+            "neon-pulse": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                direction: string;
+                keyframes: {
+                    "0%, 100%": {
+                        filter: string;
+                    };
+                    "50%": {
+                        filter: string;
+                    };
+                };
+            };
+            flicker: {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%": {
+                        opacity: string;
+                        filter: string;
+                    };
+                    "20%, 21.999%, 63%, 63.999%, 65%, 69.999%": {
+                        opacity: string;
+                        filter: string;
+                    };
+                };
+            };
+            "scan-line": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%": {
+                        top: string;
+                    };
+                    "100%": {
+                        top: string;
+                    };
+                };
+            };
+            "glitch-after": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%, 100%": {
+                        opacity: string;
+                    };
+                    "5%, 10%": {
+                        opacity: string;
+                        transform: string;
+                    };
+                    "15%, 95%": {
+                        opacity: string;
+                    };
+                };
+            };
+        };
+        readonly motion: {
+            duration: {
+                instant: string;
+                fast: string;
+                normal: string;
+                slow: string;
+                slower: string;
+                slowest: string;
+            };
+            easing: {
+                linear: string;
+                easeIn: string;
+                easeOut: string;
+                easeInOut: string;
+                easeInQuad: string;
+                easeOutQuad: string;
+                easeInOutQuad: string;
+                easeInCubic: string;
+                easeOutCubic: string;
+                easeInOutCubic: string;
+                spring: string;
+            };
+            delay: {
+                none: string;
+                short: string;
+                medium: string;
+                long: string;
+            };
+        };
+        readonly breakpoints: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+        };
+        readonly zIndex: {
+            base: number;
+            dropdown: number;
+            sticky: number;
+            fixed: number;
+            modalBackdrop: number;
+            modal: number;
+            popover: number;
+            tooltip: number;
+            toast: number;
+            notification: number;
+            max: number;
+        };
+        readonly hero: {
+            title: {
+                fontSize: {
+                    mobile: string;
+                    responsive: string;
+                    desktop: string;
+                    clamp: string;
+                };
+                lineHeight: string;
+                letterSpacing: string;
+                wordSpacing: string;
+                fontWeight: string;
+                filter: string;
+                textShadow: {
+                    dark: string;
+                    light: string;
+                };
+            };
+            subtitle: {
+                fontSize: {
+                    mobile: string;
+                    responsive: string;
+                    desktop: string;
+                    clamp: string;
+                };
+                lineHeight: string;
+                letterSpacing: string;
+                fontWeight: string;
+                maxWidth: string;
+                textShadow: {
+                    dark: string;
+                    light: string;
+                };
+            };
+            container: {
+                maxWidth: {
+                    mobile: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+                padding: {
+                    top: string;
+                    bottom: string;
+                    x: {
+                        mobile: string;
+                        sm: string;
+                        md: string;
+                    };
+                };
+                gap: string;
+            };
+            effects: {
+                cyberpunk: {
+                    glitch: {
+                        animation: string;
+                        animationDelay: string;
+                    };
+                    neon: {
+                        animation: string;
+                    };
+                    flicker: {
+                        animation: string;
+                    };
+                };
+            };
+        };
+        readonly effects: {
+            filter: {
+                brightness: {
+                    subtle: string;
+                    moderate: string;
+                    intense: string;
+                    strong: string;
+                    extreme: string;
+                };
+                contrast: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                    intense: string;
+                };
+                saturate: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                    intense: string;
+                };
+                combined: {
+                    "neon-subtle": string;
+                    "neon-moderate": string;
+                    "neon-intense": string;
+                    "neon-extreme": string;
+                    glass: string;
+                    frosted: string;
+                };
+            };
+            blur: {
+                none: string;
+                xs: string;
+                sm: string;
+                base: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+            };
+            backdrop: {
+                blur: {
+                    none: string;
+                    sm: string;
+                    base: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                    "2xl": string;
+                    "3xl": string;
+                };
+                saturate: {
+                    default: string;
+                    enhanced: string;
+                    strong: string;
+                };
+            };
+            glow: {
+                star: {
+                    small: {
+                        radius: string;
+                        color: string;
+                    };
+                    medium: {
+                        radius: string;
+                        color: string;
+                    };
+                    large: {
+                        radius: string;
+                        color: string;
+                    };
+                };
+                neon: {
+                    cyan: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                    purple: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                    pink: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                    green: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                };
+            };
+            textShadow: {
+                glow: {
+                    "cyan-subtle": string;
+                    "cyan-moderate": string;
+                    "cyan-intense": string;
+                };
+                depth: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                };
+            };
+            boxShadow: {
+                cyberpunk: {
+                    card: string;
+                    cardHover: string;
+                    elevated: string;
+                };
+                glass: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                };
+            };
+        };
+        readonly components: {
+            readonly celestialBackground: {
+                stars: {
+                    default: {
+                        count: number;
+                        sizes: number[];
+                        opacity: number[];
+                        glow: {
+                            color: string;
+                            radius: number;
+                        };
+                    };
+                    dense: {
+                        count: number;
+                        sizes: number[];
+                        opacity: number[];
+                        glow: {
+                            color: string;
+                            radius: number;
+                        };
+                    };
+                    sparse: {
+                        count: number;
+                        sizes: number[];
+                        opacity: number[];
+                        glow: {
+                            color: string;
+                            radius: number;
+                        };
+                    };
+                };
+                nebula: {
+                    cyan: {
+                        position: {
+                            top: string;
+                            left: string;
+                        };
+                        size: {
+                            width: string;
+                            height: string;
+                        };
+                        gradient: {
+                            type: string;
+                            center: string;
+                            colorStops: {
+                                color: string;
+                                alpha: number;
+                                position: string;
+                            }[];
+                        };
+                        blur: string;
+                    };
+                    purple: {
+                        position: {
+                            top: string;
+                            right: string;
+                        };
+                        size: {
+                            width: string;
+                            height: string;
+                        };
+                        gradient: {
+                            type: string;
+                            center: string;
+                            colorStops: {
+                                color: string;
+                                alpha: number;
+                                position: string;
+                            }[];
+                        };
+                        blur: string;
+                    };
+                    pink: {
+                        position: {
+                            bottom: string;
+                            left: string;
+                        };
+                        size: {
+                            width: string;
+                            height: string;
+                        };
+                        gradient: {
+                            type: string;
+                            center: string;
+                            colorStops: {
+                                color: string;
+                                alpha: number;
+                                position: string;
+                            }[];
+                        };
+                        blur: string;
+                    };
+                };
+                baseGradient: {
+                    direction: string;
+                    from: string;
+                    via: {
+                        color: string;
+                        alpha: number;
+                    };
+                    to: string;
+                };
+            };
+        };
+    };
+    GRADIENT_DIRECTIONS: {
+        TO_TOP: string;
+        TO_RIGHT: string;
+        TO_BOTTOM: string;
+        TO_LEFT: string;
+        TO_TOP_RIGHT: string;
+        TO_TOP_LEFT: string;
+        TO_BOTTOM_RIGHT: string;
+        TO_BOTTOM_LEFT: string;
+    };
+};
+/**
+ * Hook para acessar design tokens de forma segura em componentes
+ *
+ * @returns Objeto contendo tokens e GRADIENT_DIRECTIONS
+ *
+ * @example
+ * ```typescript
+ * const { tokens: designTokens, GRADIENT_DIRECTIONS } = useDesignTokens();
+ * if (designTokens) {
+ *   const color = designTokens.colors.dark.primary.base;
+ * }
+ * ```
+ */
+declare function useDesignTokens(): {
+    tokens: {
+        readonly colors: {
+            readonly light: {
+                primary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                secondary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                accent: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                background: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    overlay: string;
+                    muted: string;
+                };
+                surface: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    elevated: string;
+                    overlay: string;
+                    hover: string;
+                    active: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    disabled: string;
+                    link: string;
+                    linkHover: string;
+                    linkActive: string;
+                    linkVisited: string;
+                    onPrimary: string;
+                    onSecondary: string;
+                    onAccent: string;
+                    onBackground: string;
+                    onSurface: string;
+                };
+                border: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    focus: string;
+                    focusRing: string;
+                    inverse: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                };
+                status: {
+                    success: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    warning: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    error: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    info: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                };
+                interactive: {
+                    default: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    disabledText: string;
+                    focus: string;
+                    focusRing: string;
+                };
+                primitive: {
+                    cyan: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    purple: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    pink: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    blue: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    green: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    orange: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    red: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    amber: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    emerald: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    neutral: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                        "950": string;
+                    };
+                };
+                effects: {
+                    matrixRain: {
+                        base: string;
+                    };
+                    stars: {
+                        base: string;
+                    };
+                };
+            };
+            readonly dark: {
+                primary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                secondary: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                accent: {
+                    base: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    focus: string;
+                    background: string;
+                    backgroundHover: string;
+                    backgroundActive: string;
+                    border: string;
+                    borderHover: string;
+                    borderFocus: string;
+                    text: string;
+                    textHover: string;
+                    textDisabled: string;
+                };
+                background: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    overlay: string;
+                    muted: string;
+                };
+                surface: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    elevated: string;
+                    overlay: string;
+                    glass: string;
+                    glassHover: string;
+                    hover: string;
+                    active: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    disabled: string;
+                    link: string;
+                    linkHover: string;
+                    linkActive: string;
+                    linkVisited: string;
+                    onPrimary: string;
+                    onSecondary: string;
+                    onAccent: string;
+                    onBackground: string;
+                    onSurface: string;
+                    glow: string;
+                    neonCyan: string;
+                    neonPink: string;
+                    neonPurple: string;
+                    neonGreen: string;
+                };
+                border: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    focus: string;
+                    focusRing: string;
+                    inverse: string;
+                    neon: string;
+                    neonGlow: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                };
+                status: {
+                    success: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    warning: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    error: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                    info: {
+                        base: string;
+                        hover: string;
+                        active: string;
+                        background: string;
+                        backgroundHover: string;
+                        border: string;
+                        text: string;
+                        textOnBackground: string;
+                    };
+                };
+                interactive: {
+                    default: string;
+                    hover: string;
+                    active: string;
+                    disabled: string;
+                    disabledText: string;
+                    focus: string;
+                    focusRing: string;
+                };
+                effects: {
+                    glowCyan: string;
+                    glowPink: string;
+                    glowPurple: string;
+                    glowGreen: string;
+                    shadowSm: string;
+                    shadowMd: string;
+                    shadowLg: string;
+                };
+                gradients: {
+                    primary: string;
+                    secondary: string;
+                    accent: string;
+                    background: string;
+                };
+                primitive: {
+                    cyan: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    purple: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    pink: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    blue: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    green: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    orange: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    red: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    amber: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    emerald: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                    };
+                    neutral: {
+                        "50": string;
+                        "100": string;
+                        "200": string;
+                        "300": string;
+                        "400": string;
+                        "500": string;
+                        "600": string;
+                        "700": string;
+                        "800": string;
+                        "900": string;
+                        "950": string;
+                    };
+                };
+            };
+        };
+        readonly typography: {
+            fontFamily: {
+                sans: string;
+                serif: string;
+                mono: string;
+                display: string;
+                body: string;
+                code: string;
+            };
+            fontSize: {
+                xs: string;
+                sm: string;
+                base: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+                "4xl": string;
+                "5xl": string;
+                "6xl": string;
+                "7xl": string;
+                "8xl": string;
+                "9xl": string;
+            };
+            fontWeight: {
+                thin: string;
+                extralight: string;
+                light: string;
+                normal: string;
+                medium: string;
+                semibold: string;
+                bold: string;
+                extrabold: string;
+                black: string;
+            };
+            lineHeight: {
+                none: string;
+                tight: string;
+                snug: string;
+                normal: string;
+                relaxed: string;
+                loose: string;
+            };
+            letterSpacing: {
+                tighter: string;
+                tight: string;
+                normal: string;
+                wide: string;
+                wider: string;
+                widest: string;
+            };
+            headings: {
+                h1: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h2: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h3: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h4: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h5: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                h6: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+            };
+            subtitle: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontSizeMobile: string;
+                    fontSizeTablet: string;
+                    fontSizeDesktop: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                    marginBottom: string;
+                };
+            };
+            body: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            caption: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            button: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            label: {
+                large: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                medium: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                small: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+            code: {
+                inline: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+                block: {
+                    fontFamily: string;
+                    fontSize: string;
+                    fontWeight: string;
+                    lineHeight: string;
+                    letterSpacing: string;
+                };
+            };
+        };
+        readonly spacing: {
+            "0": string;
+            px: string;
+            "0.5": string;
+            "1": string;
+            "1.5": string;
+            "2": string;
+            "2.5": string;
+            "3": string;
+            "3.5": string;
+            "4": string;
+            "5": string;
+            "6": string;
+            "7": string;
+            "8": string;
+            "9": string;
+            "10": string;
+            "11": string;
+            "12": string;
+            "14": string;
+            "16": string;
+            "20": string;
+            "24": string;
+            "28": string;
+            "32": string;
+            "36": string;
+            "40": string;
+            "44": string;
+            "48": string;
+            "52": string;
+            "56": string;
+            "60": string;
+            "64": string;
+            "72": string;
+            "80": string;
+            "96": string;
+        };
+        readonly radius: {
+            none: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+            full: string;
+        };
+        readonly shadows: {
+            light: {
+                xs: string;
+                sm: string;
+                base: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                inner: string;
+            };
+            dark: {
+                xs: string;
+                sm: string;
+                base: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                inner: string;
+                glow: {
+                    cyan: string;
+                    pink: string;
+                    purple: string;
+                    green: string;
+                };
+            };
+        };
+        readonly animations: {
+            "accordion-down": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            "accordion-up": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            "slide-in": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    "0%": {
+                        transform: string;
+                        opacity: string;
+                    };
+                    "100%": {
+                        transform: string;
+                        opacity: string;
+                    };
+                };
+            };
+            "fade-in": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                keyframes: {
+                    "0%": {
+                        opacity: string;
+                    };
+                    "100%": {
+                        opacity: string;
+                    };
+                };
+            };
+            glitch: {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%, 100%": {
+                        transform: string;
+                    };
+                    "10%": {
+                        transform: string;
+                    };
+                    "20%": {
+                        transform: string;
+                    };
+                    "30%, 50%, 70%, 90%": {
+                        transform: string;
+                    };
+                };
+            };
+            "neon-pulse": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                direction: string;
+                keyframes: {
+                    "0%, 100%": {
+                        filter: string;
+                    };
+                    "50%": {
+                        filter: string;
+                    };
+                };
+            };
+            flicker: {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%": {
+                        opacity: string;
+                        filter: string;
+                    };
+                    "20%, 21.999%, 63%, 63.999%, 65%, 69.999%": {
+                        opacity: string;
+                        filter: string;
+                    };
+                };
+            };
+            "scan-line": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%": {
+                        top: string;
+                    };
+                    "100%": {
+                        top: string;
+                    };
+                };
+            };
+            "glitch-after": {
+                name: string;
+                duration: string;
+                timingFunction: string;
+                iterationCount: string;
+                keyframes: {
+                    "0%, 100%": {
+                        opacity: string;
+                    };
+                    "5%, 10%": {
+                        opacity: string;
+                        transform: string;
+                    };
+                    "15%, 95%": {
+                        opacity: string;
+                    };
+                };
+            };
+        };
+        readonly motion: {
+            duration: {
+                instant: string;
+                fast: string;
+                normal: string;
+                slow: string;
+                slower: string;
+                slowest: string;
+            };
+            easing: {
+                linear: string;
+                easeIn: string;
+                easeOut: string;
+                easeInOut: string;
+                easeInQuad: string;
+                easeOutQuad: string;
+                easeInOutQuad: string;
+                easeInCubic: string;
+                easeOutCubic: string;
+                easeInOutCubic: string;
+                spring: string;
+            };
+            delay: {
+                none: string;
+                short: string;
+                medium: string;
+                long: string;
+            };
+        };
+        readonly breakpoints: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+        };
+        readonly zIndex: {
+            base: number;
+            dropdown: number;
+            sticky: number;
+            fixed: number;
+            modalBackdrop: number;
+            modal: number;
+            popover: number;
+            tooltip: number;
+            toast: number;
+            notification: number;
+            max: number;
+        };
+        readonly hero: {
+            title: {
+                fontSize: {
+                    mobile: string;
+                    responsive: string;
+                    desktop: string;
+                    clamp: string;
+                };
+                lineHeight: string;
+                letterSpacing: string;
+                wordSpacing: string;
+                fontWeight: string;
+                filter: string;
+                textShadow: {
+                    dark: string;
+                    light: string;
+                };
+            };
+            subtitle: {
+                fontSize: {
+                    mobile: string;
+                    responsive: string;
+                    desktop: string;
+                    clamp: string;
+                };
+                lineHeight: string;
+                letterSpacing: string;
+                fontWeight: string;
+                maxWidth: string;
+                textShadow: {
+                    dark: string;
+                    light: string;
+                };
+            };
+            container: {
+                maxWidth: {
+                    mobile: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                };
+                padding: {
+                    top: string;
+                    bottom: string;
+                    x: {
+                        mobile: string;
+                        sm: string;
+                        md: string;
+                    };
+                };
+                gap: string;
+            };
+            effects: {
+                cyberpunk: {
+                    glitch: {
+                        animation: string;
+                        animationDelay: string;
+                    };
+                    neon: {
+                        animation: string;
+                    };
+                    flicker: {
+                        animation: string;
+                    };
+                };
+            };
+        };
+        readonly effects: {
+            filter: {
+                brightness: {
+                    subtle: string;
+                    moderate: string;
+                    intense: string;
+                    strong: string;
+                    extreme: string;
+                };
+                contrast: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                    intense: string;
+                };
+                saturate: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                    intense: string;
+                };
+                combined: {
+                    "neon-subtle": string;
+                    "neon-moderate": string;
+                    "neon-intense": string;
+                    "neon-extreme": string;
+                    glass: string;
+                    frosted: string;
+                };
+            };
+            blur: {
+                none: string;
+                xs: string;
+                sm: string;
+                base: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+            };
+            backdrop: {
+                blur: {
+                    none: string;
+                    sm: string;
+                    base: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                    "2xl": string;
+                    "3xl": string;
+                };
+                saturate: {
+                    default: string;
+                    enhanced: string;
+                    strong: string;
+                };
+            };
+            glow: {
+                star: {
+                    small: {
+                        radius: string;
+                        color: string;
+                    };
+                    medium: {
+                        radius: string;
+                        color: string;
+                    };
+                    large: {
+                        radius: string;
+                        color: string;
+                    };
+                };
+                neon: {
+                    cyan: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                    purple: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                    pink: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                    green: {
+                        subtle: string;
+                        moderate: string;
+                        intense: string;
+                    };
+                };
+            };
+            textShadow: {
+                glow: {
+                    "cyan-subtle": string;
+                    "cyan-moderate": string;
+                    "cyan-intense": string;
+                };
+                depth: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                };
+            };
+            boxShadow: {
+                cyberpunk: {
+                    card: string;
+                    cardHover: string;
+                    elevated: string;
+                };
+                glass: {
+                    subtle: string;
+                    moderate: string;
+                    strong: string;
+                };
+            };
+        };
+        readonly components: {
+            readonly celestialBackground: {
+                stars: {
+                    default: {
+                        count: number;
+                        sizes: number[];
+                        opacity: number[];
+                        glow: {
+                            color: string;
+                            radius: number;
+                        };
+                    };
+                    dense: {
+                        count: number;
+                        sizes: number[];
+                        opacity: number[];
+                        glow: {
+                            color: string;
+                            radius: number;
+                        };
+                    };
+                    sparse: {
+                        count: number;
+                        sizes: number[];
+                        opacity: number[];
+                        glow: {
+                            color: string;
+                            radius: number;
+                        };
+                    };
+                };
+                nebula: {
+                    cyan: {
+                        position: {
+                            top: string;
+                            left: string;
+                        };
+                        size: {
+                            width: string;
+                            height: string;
+                        };
+                        gradient: {
+                            type: string;
+                            center: string;
+                            colorStops: {
+                                color: string;
+                                alpha: number;
+                                position: string;
+                            }[];
+                        };
+                        blur: string;
+                    };
+                    purple: {
+                        position: {
+                            top: string;
+                            right: string;
+                        };
+                        size: {
+                            width: string;
+                            height: string;
+                        };
+                        gradient: {
+                            type: string;
+                            center: string;
+                            colorStops: {
+                                color: string;
+                                alpha: number;
+                                position: string;
+                            }[];
+                        };
+                        blur: string;
+                    };
+                    pink: {
+                        position: {
+                            bottom: string;
+                            left: string;
+                        };
+                        size: {
+                            width: string;
+                            height: string;
+                        };
+                        gradient: {
+                            type: string;
+                            center: string;
+                            colorStops: {
+                                color: string;
+                                alpha: number;
+                                position: string;
+                            }[];
+                        };
+                        blur: string;
+                    };
+                };
+                baseGradient: {
+                    direction: string;
+                    from: string;
+                    via: {
+                        color: string;
+                        alpha: number;
+                    };
+                    to: string;
+                };
+            };
+        };
+    };
+    GRADIENT_DIRECTIONS: {
+        TO_TOP: string;
+        TO_RIGHT: string;
+        TO_BOTTOM: string;
+        TO_LEFT: string;
+        TO_TOP_RIGHT: string;
+        TO_TOP_LEFT: string;
+        TO_BOTTOM_RIGHT: string;
+        TO_BOTTOM_LEFT: string;
+    };
+};
+/**
+ * Delays de transição para animações e efeitos
+ *
+ * Conjunto de valores padronizados para delays de transição
+ * usados em partículas, animações e efeitos visuais.
+ *
+ * @example
+ * ```typescript
+ * import { TRANSITION_DELAYS } from '@rainersoft/design-tokens'
+ *
+ * <div style={{ animationDelay: TRANSITION_DELAYS.particle2 }}>
+ *   // partícula animada
+ * </div>
+ * ```
+ */
+declare const TRANSITION_DELAYS: {
+    /** Delay de 1s para primeira partícula */
+    readonly particle1: "1s";
+    /** Delay de 2s para segunda partícula */
+    readonly particle2: "2s";
+    /** Delay de 3s para terceira partícula */
+    readonly particle3: "3s";
+    /** Delay de 1.5s (variação) */
+    readonly short: "1.5s";
+    /** Delay de 2.5s (variação) */
+    readonly medium: "2.5s";
+    /** Delay de 4s (variação) */
+    readonly long: "4s";
+};
+/**
+ * Alias para compatibilidade - ANIMATION_DELAYS aponta para TRANSITION_DELAYS
+ */
+declare const ANIMATION_DELAYS: {
+    /** Delay de 1s para primeira partícula */
+    readonly particle1: "1s";
+    /** Delay de 2s para segunda partícula */
+    readonly particle2: "2s";
+    /** Delay de 3s para terceira partícula */
+    readonly particle3: "3s";
+    /** Delay de 1.5s (variação) */
+    readonly short: "1.5s";
+    /** Delay de 2.5s (variação) */
+    readonly medium: "2.5s";
+    /** Delay de 4s (variação) */
+    readonly long: "4s";
+};
 
 /**
  * @fileoverview Ponto de entrada principal da biblioteca @rainersoft/design-tokens
@@ -8482,4 +11380,4 @@ declare function radius(size: keyof Tokens['radius']): string;
  */
 declare const cssVarsPath = "./src/css-vars.css";
 
-export { type Animations, BACKGROUND, type Background, type Breakpoints, COLORS, type Colors, type DarkColors, type DarkTheme, GRADIENTS, GRADIENT_COLORS, GRADIENT_COMPOSITES, GRADIENT_DIRECTIONS, type GradientColors, type GradientComposites, type GradientDirections, type Gradients, type LightColors, type LightTheme, MOTION, type Motion, NAVIGATION, type Navigation, RESPONSIVE, type Radius, SHADOWS, type Shadows, type Spacing, type Themes, type Tokens, type Typography, type ZIndex, Z_INDEX, animationTokens, breakpointTokens, componentTokens, cssVarsPath, darkTheme, darkThemeColors, effectTokens, getContrast, getContrastInfo, getDarkColors, getLightColors, getLuminance, getRadius, getShadows, getSpacing, getTypography, hexToRgb, lightTheme, lightThemeColors, meetsWCAGAA, meetsWCAGAAA, motionTokens, radius, radiusTokens, shadowTokens, spacing, spacingTokens, themes, tokens, typographyTokens, validateContrast, zIndexTokens };
+export { ANIMATION_DELAYS, type Animations, BACKGROUND, type Background, type Breakpoints, COLORS, type Colors, type DarkColors, type DarkTheme, GRADIENTS, GRADIENT_COLORS, GRADIENT_COMPOSITES, GRADIENT_DIRECTIONS, type GradientColors, type GradientComposites, type GradientDirections, type Gradients, type LightColors, type LightTheme, MOTION, type Motion, NAVIGATION, type Navigation, RESPONSIVE, type Radius, SHADOWS, type Shadows, type Spacing, TRANSITION_DELAYS, type Themes, type Tokens, type Typography, type ZIndex, Z_INDEX, animationTokens, breakpointTokens, componentTokens, cssVarsPath, darkTheme, darkThemeColors, effectTokens, getContrast, getContrastInfo, getDarkColors, getLightColors, getLuminance, getRadius, getShadows, getSpacing, getTokenColor, getTypography, hexToRgb, lightTheme, lightThemeColors, loadDesignTokensSafely, meetsWCAGAA, meetsWCAGAAA, motionTokens, radius, radiusTokens, shadowTokens, spacing, spacingTokens, themes, tokens, typographyTokens, useDesignTokens, validateContrast, zIndexTokens };