/**
 * KodexaLabs Unified Design Tokens
 * Single source of truth for all design tokens across the system
 *
 * @module @kodexalabs/design-tokens
 * @author KodexaLabs
 * @version 1.0.0
 */
/**
 * Color token structure with HSL support for runtime manipulation
 */
interface ColorToken {
    /** Hue value (0-360) */
    h: number;
    /** Saturation percentage */
    s: string;
    /** Lightness percentage */
    l: string;
    /** Computed HSL color string */
    hsl: string;
    /** RGB color string for compatibility */
    rgb: string;
    /** Hex color string */
    hex: string;
}
/**
 * Complete design token system interface
 */
interface DesignTokens {
    color: {
        brand: {
            /** Base workspace background - pure black */
            background: ColorToken;
            /** Primary foreground for text and UI on black */
            foreground: ColorToken;
            /** Kodexa white accent */
            white: ColorToken;
            /** High-contrast white for active states */
            whiteStrong: ColorToken;
            /** Success signal */
            success: ColorToken;
            /** Muted neutral for secondary content */
            muted: ColorToken;
            /** Logo gradient start */
            logoPrimary: ColorToken;
            /** Logo gradient end */
            logoSecondary: ColorToken;
        };
        semantic: {
            background: string;
            foreground: string;
            surface: string;
            elev1: string;
            elev2: string;
            text: string;
            textMuted: string;
            textSubtle: string;
            border: string;
            borderSubtle: string;
            overlay: string;
            surfaceOverlay: string;
            overlayDark: string;
            textPrimary: string;
            textMutedLight: string;
            textSubtleLight: string;
            progressTrack: string;
            workspaceDark: string;
            scrollbarThumb: string;
            scrollbarThumbHover: string;
            cardDark: string;
        };
        ui: {
            card: string;
            cardForeground: string;
            popover: string;
            popoverForeground: string;
            primary: string;
            primaryForeground: string;
            secondary: string;
            secondaryForeground: string;
            muted: string;
            mutedForeground: string;
            accent: string;
            accentForeground: string;
            destructive: string;
            destructiveForeground: string;
            success: string;
            successForeground: string;
            warning: string;
            warningForeground: string;
            info: string;
            infoForeground: string;
            input: string;
            ring: string;
        };
        gray: {
            50: string;
            100: string;
            200: string;
            300: string;
            400: string;
            500: string;
            600: string;
            700: string;
            800: string;
            900: string;
            950: string;
            textDark: string;
            textLight: string;
            accentPrimary: string;
            accentHover: string;
            accentDark: string;
            accentDarkHover: string;
        };
        chart: {
            1: string;
            2: string;
            3: string;
            4: string;
            5: string;
        };
    };
    typography: {
        fontFamily: {
            sans: string;
            mono: string;
            display: string;
            heading: string;
            body: string;
        };
        fontSize: {
            micro: string;
            caption: string;
            body: string;
            subhead: string;
            headline: string;
            title: string;
            display: string;
            hero: string;
        };
        fontWeight: {
            regular: number;
            medium: number;
            semibold: number;
            bold: number;
            black: number;
            thin: number;
        };
        lineHeight: {
            tight: number;
            snug: number;
            normal: number;
            relaxed: number;
            loose: number;
        };
        letterSpacing: {
            tighter: string;
            tight: string;
            normal: string;
            wide: string;
            wider: string;
        };
    };
    spacing: {
        0: 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;
        12: string;
        14: string;
        16: string;
        20: string;
        24: string;
        32: string;
    };
    radius: {
        none: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        "2xl": string;
        "3xl": string;
        round: string;
        circle: string;
    };
    shadow: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        "2xl": string;
        inner: string;
        glow: string;
        glowStrong: string;
        shadowCardHover: string;
        shadowElevated: string;
    };
    motion: {
        easing: {
            standard: string;
            emphasized: string;
            decelerate: string;
            accelerate: string;
            sharp: string;
        };
        duration: {
            instant: string;
            fast: string;
            base: string;
            slow: string;
            slower: string;
        };
    };
    layout: {
        container: {
            xs: string;
            sm: string;
            md: string;
            lg: string;
            xl: string;
            "2xl": string;
        };
        measure: string;
    };
    borderWidth: {
        thin: string;
        base: string;
        thick: string;
    };
    zIndex: {
        bg: number;
        base: number;
        content: number;
        dropdown: number;
        sticky: number;
        overlay: number;
        modal: number;
        popover: number;
        tooltip: number;
        toast: number;
    };
}
/**
 * Default design tokens (light theme)
 */
declare const designTokens: DesignTokens;
/**
 * Dark theme token overrides
 */
declare const darkThemeTokens: Partial<DesignTokens>;
/**
 * Export individual token groups for tree-shaking
 */
declare const colors: {
    brand: {
        /** Base workspace background - pure black */
        background: ColorToken;
        /** Primary foreground for text and UI on black */
        foreground: ColorToken;
        /** Kodexa white accent */
        white: ColorToken;
        /** High-contrast white for active states */
        whiteStrong: ColorToken;
        /** Success signal */
        success: ColorToken;
        /** Muted neutral for secondary content */
        muted: ColorToken;
        /** Logo gradient start */
        logoPrimary: ColorToken;
        /** Logo gradient end */
        logoSecondary: ColorToken;
    };
    semantic: {
        background: string;
        foreground: string;
        surface: string;
        elev1: string;
        elev2: string;
        text: string;
        textMuted: string;
        textSubtle: string;
        border: string;
        borderSubtle: string;
        overlay: string;
        surfaceOverlay: string;
        overlayDark: string;
        textPrimary: string;
        textMutedLight: string;
        textSubtleLight: string;
        progressTrack: string;
        workspaceDark: string;
        scrollbarThumb: string;
        scrollbarThumbHover: string;
        cardDark: string;
    };
    ui: {
        card: string;
        cardForeground: string;
        popover: string;
        popoverForeground: string;
        primary: string;
        primaryForeground: string;
        secondary: string;
        secondaryForeground: string;
        muted: string;
        mutedForeground: string;
        accent: string;
        accentForeground: string;
        destructive: string;
        destructiveForeground: string;
        success: string;
        successForeground: string;
        warning: string;
        warningForeground: string;
        info: string;
        infoForeground: string;
        input: string;
        ring: string;
    };
    gray: {
        50: string;
        100: string;
        200: string;
        300: string;
        400: string;
        500: string;
        600: string;
        700: string;
        800: string;
        900: string;
        950: string;
        textDark: string;
        textLight: string;
        accentPrimary: string;
        accentHover: string;
        accentDark: string;
        accentDarkHover: string;
    };
    chart: {
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
    };
};
declare const typography: {
    fontFamily: {
        sans: string;
        mono: string;
        display: string;
        heading: string;
        body: string;
    };
    fontSize: {
        micro: string;
        caption: string;
        body: string;
        subhead: string;
        headline: string;
        title: string;
        display: string;
        hero: string;
    };
    fontWeight: {
        regular: number;
        medium: number;
        semibold: number;
        bold: number;
        black: number;
        thin: number;
    };
    lineHeight: {
        tight: number;
        snug: number;
        normal: number;
        relaxed: number;
        loose: number;
    };
    letterSpacing: {
        tighter: string;
        tight: string;
        normal: string;
        wide: string;
        wider: string;
    };
};
declare const spacing: {
    0: 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;
    12: string;
    14: string;
    16: string;
    20: string;
    24: string;
    32: string;
};
declare const radius: {
    none: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    "2xl": string;
    "3xl": string;
    round: string;
    circle: string;
};
declare const shadow: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    "2xl": string;
    inner: string;
    glow: string;
    glowStrong: string;
    shadowCardHover: string;
    shadowElevated: string;
};
declare const motion: {
    easing: {
        standard: string;
        emphasized: string;
        decelerate: string;
        accelerate: string;
        sharp: string;
    };
    duration: {
        instant: string;
        fast: string;
        base: string;
        slow: string;
        slower: string;
    };
};
declare const layout: {
    container: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        "2xl": string;
    };
    measure: string;
};
declare const borderWidth: {
    thin: string;
    base: string;
    thick: string;
};
declare const zIndex: {
    bg: number;
    base: number;
    content: number;
    dropdown: number;
    sticky: number;
    overlay: number;
    modal: number;
    popover: number;
    tooltip: number;
    toast: number;
};

/**
 * CSS Variables Generator
 * Converts design tokens to CSS custom properties
 *
 * @module @kodexalabs/design-tokens/css
 */

/**
 * Generates CSS custom properties string from design tokens
 *
 * @param tokens - Design tokens object
 * @param prefix - Prefix for CSS variables (default: '--')
 * @param selector - CSS selector to wrap variables (default: ':root')
 * @returns CSS string with custom properties
 *
 * @example
 * ```typescript
 * const css = generateCSSVars(designTokens);
 * // Returns: ':root { --color-brand-magenta: hsl(336 98% 52%); ... }'
 * ```
 */
declare function generateCSSVars(tokens: DesignTokens | Partial<DesignTokens>, prefix?: string, selector?: string): string;
/**
 * Generates CSS custom properties for light theme
 *
 * @example
 * ```typescript
 * const lightCSS = generateLightThemeCSS();
 * ```
 */
declare function generateLightThemeCSS(): string;
/**
 * Generates CSS custom properties for dark theme
 *
 * @example
 * ```typescript
 * const darkCSS = generateDarkThemeCSS();
 * ```
 */
declare function generateDarkThemeCSS(): string;
/**
 * Generates complete CSS with both light and dark themes
 *
 * @example
 * ```typescript
 * const css = generateCompleteCSS();
 * // Inject into document or save to file
 * ```
 */
declare function generateCompleteCSS(): string;
/**
 * Applies CSS variables to document at runtime
 * Useful for client-side theme switching
 *
 * @param theme - Theme to apply ('light' or 'dark')
 *
 * @example
 * ```typescript
 * // In your React app
 * useEffect(() => {
 *   applyCSSVarsToDocument('dark');
 * }, []);
 * ```
 */
declare function applyCSSVarsToDocument(theme?: 'light' | 'dark'): void;
/**
 * Gets a CSS variable value from the document
 *
 * @param varName - CSS variable name (without -- prefix)
 * @returns CSS variable value or empty string if not found
 *
 * @example
 * ```typescript
 * const primaryColor = getCSSVar('color-brand-magenta');
 * ```
 */
declare function getCSSVar(varName: string): string;
/**
 * Sets a CSS variable value on the document
 *
 * @param varName - CSS variable name (without -- prefix)
 * @param value - CSS variable value
 *
 * @example
 * ```typescript
 * setCSSVar('color-brand-magenta', 'hsl(336 98% 60%)');
 * ```
 */
declare function setCSSVar(varName: string, value: string): void;
/**
 * Export CSS as a string for injection into <style> tags or files
 */
declare const cssVarsString: string;
/**
 * Export individual theme CSS strings
 */
declare const lightThemeCSS: string;
declare const darkThemeCSS: string;

export { type ColorToken as C, type DesignTokens as D, darkThemeTokens as a, shadow as b, colors as c, designTokens as d, borderWidth as e, generateLightThemeCSS as f, generateCSSVars as g, generateDarkThemeCSS as h, generateCompleteCSS as i, applyCSSVarsToDocument as j, getCSSVar as k, layout as l, motion as m, setCSSVar as n, cssVarsString as o, lightThemeCSS as p, darkThemeCSS as q, radius as r, spacing as s, typography as t, zIndex as z };