/**
 * @deprecated This file is deprecated. Use `tokens` from '@/styles/tokens/index.css' instead.
 *
 * This design system token contract is maintained for backward compatibility only.
 * It has been superseded by the unified token system in `tokens/index.css`.
 *
 * Migration guide:
 * - Old: `import { designTokens } from '@/styles/design-system.css'`
 * - New: `import { tokens } from '@/styles/tokens/index.css'`
 *
 * Token mapping:
 * - `designTokens.color` → `tokens.semantic.color`
 * - `designTokens.spacing` → `tokens.semantic.spacing`
 * - `designTokens.typography` → `tokens.semantic.typography`
 * - `designTokens.radius` → `tokens.semantic.borderRadius`
 * - `designTokens.elevation` → `tokens.semantic.shadow`
 * - `designTokens.animation` → `tokens.semantic.motion`
 * - `designTokens.zIndex` → `tokens.semantic.zIndex`
 */
export declare const designTokens: {
    primitive: {
        color: {
            white: `var(--${string})`;
            black: `var(--${string})`;
            gray: {
                50: `var(--${string})`;
                100: `var(--${string})`;
                200: `var(--${string})`;
                300: `var(--${string})`;
                400: `var(--${string})`;
                500: `var(--${string})`;
                600: `var(--${string})`;
                700: `var(--${string})`;
                800: `var(--${string})`;
                900: `var(--${string})`;
            };
            blue: {
                50: `var(--${string})`;
                100: `var(--${string})`;
                200: `var(--${string})`;
                300: `var(--${string})`;
                400: `var(--${string})`;
                500: `var(--${string})`;
                600: `var(--${string})`;
                700: `var(--${string})`;
                800: `var(--${string})`;
                900: `var(--${string})`;
            };
            green: {
                400: `var(--${string})`;
                500: `var(--${string})`;
                600: `var(--${string})`;
            };
            red: {
                400: `var(--${string})`;
                500: `var(--${string})`;
                600: `var(--${string})`;
            };
            yellow: {
                400: `var(--${string})`;
                500: `var(--${string})`;
                600: `var(--${string})`;
            };
        };
        spacing: {
            0: `var(--${string})`;
            1: `var(--${string})`;
            2: `var(--${string})`;
            3: `var(--${string})`;
            4: `var(--${string})`;
            5: `var(--${string})`;
            6: `var(--${string})`;
            8: `var(--${string})`;
            10: `var(--${string})`;
            12: `var(--${string})`;
            16: `var(--${string})`;
            20: `var(--${string})`;
            24: `var(--${string})`;
        };
        fontSize: {
            xs: `var(--${string})`;
            sm: `var(--${string})`;
            base: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
            '2xl': `var(--${string})`;
            '3xl': `var(--${string})`;
            '4xl': `var(--${string})`;
        };
        lineHeight: {
            tight: `var(--${string})`;
            normal: `var(--${string})`;
            relaxed: `var(--${string})`;
        };
        fontWeight: {
            normal: `var(--${string})`;
            medium: `var(--${string})`;
            semibold: `var(--${string})`;
            bold: `var(--${string})`;
        };
        borderRadius: {
            none: `var(--${string})`;
            sm: `var(--${string})`;
            md: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
            '2xl': `var(--${string})`;
            full: `var(--${string})`;
        };
        shadow: {
            xs: `var(--${string})`;
            sm: `var(--${string})`;
            md: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
        };
        zIndex: {
            base: `var(--${string})`;
            elevated: `var(--${string})`;
            sticky: `var(--${string})`;
            overlay: `var(--${string})`;
            modal: `var(--${string})`;
            tooltip: `var(--${string})`;
        };
        transition: {
            duration: {
                instant: `var(--${string})`;
                fast: `var(--${string})`;
                normal: `var(--${string})`;
                slow: `var(--${string})`;
            };
            easing: {
                linear: `var(--${string})`;
                ease: `var(--${string})`;
                easeIn: `var(--${string})`;
                easeOut: `var(--${string})`;
                easeInOut: `var(--${string})`;
                spring: `var(--${string})`;
            };
        };
    };
    semantic: {
        timeline: {
            point: {
                background: {
                    active: `var(--${string})`;
                    inactive: `var(--${string})`;
                    hover: `var(--${string})`;
                };
            };
        };
        color: {
            text: {
                primary: `var(--${string})`;
                secondary: `var(--${string})`;
                muted: `var(--${string})`;
                inverse: `var(--${string})`;
            };
            background: {
                primary: `var(--${string})`;
                secondary: `var(--${string})`;
                elevated: `var(--${string})`;
                overlay: `var(--${string})`;
            };
            interactive: {
                primary: `var(--${string})`;
                primaryHover: `var(--${string})`;
                primaryActive: `var(--${string})`;
                secondary: `var(--${string})`;
                secondaryHover: `var(--${string})`;
                muted: `var(--${string})`;
                mutedHover: `var(--${string})`;
                toolbarBg: `var(--${string})`;
                toolbarText: `var(--${string})`;
                buttonBg: `var(--${string})`;
                buttonBorder: `var(--${string})`;
                focusRing: `var(--${string})`;
            };
            border: {
                default: `var(--${string})`;
                muted: `var(--${string})`;
                emphasis: `var(--${string})`;
                interactive: `var(--${string})`;
            };
            status: {
                success: `var(--${string})`;
                warning: `var(--${string})`;
                error: `var(--${string})`;
                info: `var(--${string})`;
            };
            icon: {
                default: `var(--${string})`;
                muted: `var(--${string})`;
                emphasis: `var(--${string})`;
            };
            card: {
                bg: `var(--${string})`;
                border: `var(--${string})`;
                title: `var(--${string})`;
                subtitle: `var(--${string})`;
                details: `var(--${string})`;
            };
            primary: `var(--${string})`;
            muted: `var(--${string})`;
            nestedCardBg: `var(--${string})`;
            nestedCardTitle: `var(--${string})`;
            nestedCardSubtitle: `var(--${string})`;
            nestedCardDetails: `var(--${string})`;
            buttonBorder: `var(--${string})`;
        };
        spacing: {
            xs: `var(--${string})`;
            sm: `var(--${string})`;
            md: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
            '2xl': `var(--${string})`;
            '3xl': `var(--${string})`;
        };
        typography: {
            fontSize: {
                caption: `var(--${string})`;
                body: `var(--${string})`;
                base: `var(--${string})`;
                heading3: `var(--${string})`;
                heading2: `var(--${string})`;
                heading1: `var(--${string})`;
                cardTitle: `var(--${string})`;
                cardText: `var(--${string})`;
                title: `var(--${string})`;
                sm: `var(--${string})`;
                md: `var(--${string})`;
                xs: `var(--${string})`;
                lg: `var(--${string})`;
                xl: `var(--${string})`;
            };
            lineHeight: {
                tight: `var(--${string})`;
                normal: `var(--${string})`;
                relaxed: `var(--${string})`;
            };
            fontWeight: {
                normal: `var(--${string})`;
                medium: `var(--${string})`;
                semibold: `var(--${string})`;
                bold: `var(--${string})`;
            };
        };
        borderRadius: {
            sm: `var(--${string})`;
            md: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
            full: `var(--${string})`;
        };
        shadow: {
            card: `var(--${string})`;
            cardHover: `var(--${string})`;
            cardActive: `var(--${string})`;
            toolbar: `var(--${string})`;
            modal: `var(--${string})`;
            none: `var(--${string})`;
        };
        zIndex: {
            timelineCard: `var(--${string})`;
            controls: `var(--${string})`;
            popover: `var(--${string})`;
            outline: `var(--${string})`;
        };
        motion: {
            duration: {
                fast: `var(--${string})`;
                normal: `var(--${string})`;
                slow: `var(--${string})`;
            };
            easing: {
                standard: `var(--${string})`;
                emphasized: `var(--${string})`;
                easeIn: `var(--${string})`;
                easeOut: `var(--${string})`;
                easeInOut: `var(--${string})`;
            };
        };
        card: {
            background: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
                active: `var(--${string})`;
                gradient: `var(--${string})`;
            };
            border: {
                color: `var(--${string})`;
                gradient: `var(--${string})`;
                radius: {
                    sm: `var(--${string})`;
                    md: `var(--${string})`;
                    lg: `var(--${string})`;
                };
            };
            shadow: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
                active: `var(--${string})`;
                flat: `var(--${string})`;
                low: `var(--${string})`;
                medium: `var(--${string})`;
                high: `var(--${string})`;
                interactive: `var(--${string})`;
            };
            content: {
                spacing: {
                    tight: `var(--${string})`;
                    normal: `var(--${string})`;
                    loose: `var(--${string})`;
                };
            };
        };
        toolbar: {
            background: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
            };
            text: {
                default: `var(--${string})`;
                muted: `var(--${string})`;
            };
            button: {
                background: {
                    default: `var(--${string})`;
                    hover: `var(--${string})`;
                    active: `var(--${string})`;
                };
                border: {
                    default: `var(--${string})`;
                    hover: `var(--${string})`;
                };
                text: {
                    default: `var(--${string})`;
                    disabled: `var(--${string})`;
                };
                size: {
                    sm: `var(--${string})`;
                    md: `var(--${string})`;
                    lg: `var(--${string})`;
                };
            };
        };
        states: {
            focus: {
                outline: `var(--${string})`;
                ring: {
                    color: `var(--${string})`;
                    width: `var(--${string})`;
                    offset: `var(--${string})`;
                    outline: `var(--${string})`;
                };
            };
            disabled: {
                opacity: `var(--${string})`;
                filter: `var(--${string})`;
            };
            hover: {
                opacity: `var(--${string})`;
                transform: `var(--${string})`;
                background: `var(--${string})`;
                border: `var(--${string})`;
            };
            active: {
                opacity: `var(--${string})`;
                transform: `var(--${string})`;
                background: `var(--${string})`;
                border: `var(--${string})`;
            };
        };
        layout: {
            container: {
                maxWidth: {
                    sm: `var(--${string})`;
                    md: `var(--${string})`;
                    lg: `var(--${string})`;
                    xl: `var(--${string})`;
                };
            };
        };
    };
    component: {
        timeline: {
            line: {
                width: `var(--${string})`;
                color: `var(--${string})`;
            };
            point: {
                size: {
                    sm: `var(--${string})`;
                    md: `var(--${string})`;
                    lg: `var(--${string})`;
                };
                color: {
                    active: `var(--${string})`;
                    inactive: `var(--${string})`;
                    hover: `var(--${string})`;
                };
                background: {
                    active: `var(--${string})`;
                    inactive: `var(--${string})`;
                    hover: `var(--${string})`;
                };
            };
            card: {
                width: {
                    vertical: `var(--${string})`;
                    horizontal: `var(--${string})`;
                    min: `var(--${string})`;
                    max: `var(--${string})`;
                };
                spacing: {
                    vertical: `var(--${string})`;
                    horizontal: `var(--${string})`;
                };
            };
        };
        toolbar: {
            height: `var(--${string})`;
            padding: `var(--${string})`;
            background: `var(--${string})`;
            button: {
                size: `var(--${string})`;
                spacing: `var(--${string})`;
            };
        };
    };
};
export declare const vars: {
    timeline: {
        point: {
            background: {
                active: `var(--${string})`;
                inactive: `var(--${string})`;
                hover: `var(--${string})`;
            };
        };
    };
    color: {
        text: {
            primary: `var(--${string})`;
            secondary: `var(--${string})`;
            muted: `var(--${string})`;
            inverse: `var(--${string})`;
        };
        background: {
            primary: `var(--${string})`;
            secondary: `var(--${string})`;
            elevated: `var(--${string})`;
            overlay: `var(--${string})`;
        };
        interactive: {
            primary: `var(--${string})`;
            primaryHover: `var(--${string})`;
            primaryActive: `var(--${string})`;
            secondary: `var(--${string})`;
            secondaryHover: `var(--${string})`;
            muted: `var(--${string})`;
            mutedHover: `var(--${string})`;
            toolbarBg: `var(--${string})`;
            toolbarText: `var(--${string})`;
            buttonBg: `var(--${string})`;
            buttonBorder: `var(--${string})`;
            focusRing: `var(--${string})`;
        };
        border: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
            emphasis: `var(--${string})`;
            interactive: `var(--${string})`;
        };
        status: {
            success: `var(--${string})`;
            warning: `var(--${string})`;
            error: `var(--${string})`;
            info: `var(--${string})`;
        };
        icon: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
            emphasis: `var(--${string})`;
        };
        card: {
            bg: `var(--${string})`;
            border: `var(--${string})`;
            title: `var(--${string})`;
            subtitle: `var(--${string})`;
            details: `var(--${string})`;
        };
        primary: `var(--${string})`;
        muted: `var(--${string})`;
        nestedCardBg: `var(--${string})`;
        nestedCardTitle: `var(--${string})`;
        nestedCardSubtitle: `var(--${string})`;
        nestedCardDetails: `var(--${string})`;
        buttonBorder: `var(--${string})`;
    };
    spacing: {
        xs: `var(--${string})`;
        sm: `var(--${string})`;
        md: `var(--${string})`;
        lg: `var(--${string})`;
        xl: `var(--${string})`;
        '2xl': `var(--${string})`;
        '3xl': `var(--${string})`;
    };
    typography: {
        fontSize: {
            caption: `var(--${string})`;
            body: `var(--${string})`;
            base: `var(--${string})`;
            heading3: `var(--${string})`;
            heading2: `var(--${string})`;
            heading1: `var(--${string})`;
            cardTitle: `var(--${string})`;
            cardText: `var(--${string})`;
            title: `var(--${string})`;
            sm: `var(--${string})`;
            md: `var(--${string})`;
            xs: `var(--${string})`;
            lg: `var(--${string})`;
            xl: `var(--${string})`;
        };
        lineHeight: {
            tight: `var(--${string})`;
            normal: `var(--${string})`;
            relaxed: `var(--${string})`;
        };
        fontWeight: {
            normal: `var(--${string})`;
            medium: `var(--${string})`;
            semibold: `var(--${string})`;
            bold: `var(--${string})`;
        };
    };
    borderRadius: {
        sm: `var(--${string})`;
        md: `var(--${string})`;
        lg: `var(--${string})`;
        xl: `var(--${string})`;
        full: `var(--${string})`;
    };
    shadow: {
        card: `var(--${string})`;
        cardHover: `var(--${string})`;
        cardActive: `var(--${string})`;
        toolbar: `var(--${string})`;
        modal: `var(--${string})`;
        none: `var(--${string})`;
    };
    zIndex: {
        timelineCard: `var(--${string})`;
        controls: `var(--${string})`;
        popover: `var(--${string})`;
        outline: `var(--${string})`;
    };
    motion: {
        duration: {
            fast: `var(--${string})`;
            normal: `var(--${string})`;
            slow: `var(--${string})`;
        };
        easing: {
            standard: `var(--${string})`;
            emphasized: `var(--${string})`;
            easeIn: `var(--${string})`;
            easeOut: `var(--${string})`;
            easeInOut: `var(--${string})`;
        };
    };
    card: {
        background: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
            active: `var(--${string})`;
            gradient: `var(--${string})`;
        };
        border: {
            color: `var(--${string})`;
            gradient: `var(--${string})`;
            radius: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
            };
        };
        shadow: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
            active: `var(--${string})`;
            flat: `var(--${string})`;
            low: `var(--${string})`;
            medium: `var(--${string})`;
            high: `var(--${string})`;
            interactive: `var(--${string})`;
        };
        content: {
            spacing: {
                tight: `var(--${string})`;
                normal: `var(--${string})`;
                loose: `var(--${string})`;
            };
        };
    };
    toolbar: {
        background: {
            default: `var(--${string})`;
            hover: `var(--${string})`;
        };
        text: {
            default: `var(--${string})`;
            muted: `var(--${string})`;
        };
        button: {
            background: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
                active: `var(--${string})`;
            };
            border: {
                default: `var(--${string})`;
                hover: `var(--${string})`;
            };
            text: {
                default: `var(--${string})`;
                disabled: `var(--${string})`;
            };
            size: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
            };
        };
    };
    states: {
        focus: {
            outline: `var(--${string})`;
            ring: {
                color: `var(--${string})`;
                width: `var(--${string})`;
                offset: `var(--${string})`;
                outline: `var(--${string})`;
            };
        };
        disabled: {
            opacity: `var(--${string})`;
            filter: `var(--${string})`;
        };
        hover: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
            background: `var(--${string})`;
            border: `var(--${string})`;
        };
        active: {
            opacity: `var(--${string})`;
            transform: `var(--${string})`;
            background: `var(--${string})`;
            border: `var(--${string})`;
        };
    };
    layout: {
        container: {
            maxWidth: {
                sm: `var(--${string})`;
                md: `var(--${string})`;
                lg: `var(--${string})`;
                xl: `var(--${string})`;
            };
        };
    };
};
//# sourceMappingURL=design-system.css.d.ts.map