export declare const card: import('@vanilla-extract/recipes').RuntimeFn<{
    size: {
        sm: {
            minWidth: "200px";
            padding: `var(--${string})`;
            borderRadius: `var(--${string})`;
        };
        md: {
            minWidth: "280px";
            padding: `var(--${string})`;
        };
        lg: {
            minWidth: "320px";
            padding: `var(--${string})`;
        };
    };
    elevation: {
        flat: {
            boxShadow: `var(--${string})`;
        };
        low: {
            boxShadow: `var(--${string})`;
        };
        medium: {
            boxShadow: `var(--${string})`;
        };
        high: {
            boxShadow: `var(--${string})`;
        };
    };
    interactive: {
        true: {
            cursor: "pointer";
            selectors: {
                '&:hover': {
                    transform: "translateY(-2px)";
                    boxShadow: `var(--${string})`;
                };
                '&:active': {
                    transform: "translateY(0px)";
                    transition: string;
                };
            };
        };
        false: {};
    };
    animation: {
        none: {};
        fadeIn: string;
        slideLeft: string;
        slideRight: string;
        slideTop: string;
    };
    bordered: {
        true: {
            '::before': {
                content: "\"\"";
                position: "absolute";
                inset: number;
                borderRadius: "inherit";
                padding: "1px";
                background: `var(--${string})`;
                mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
                maskComposite: "xor";
                WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)";
                WebkitMaskComposite: "xor";
                pointerEvents: "none";
            };
        };
        false: {};
    };
}>;
export declare const cardContent: import('@vanilla-extract/recipes').RuntimeFn<{
    spacing: {
        tight: {
            gap: `var(--${string})`;
        };
        normal: {
            gap: `var(--${string})`;
        };
        loose: {
            gap: `var(--${string})`;
        };
    };
    alignment: {
        start: {
            alignItems: "flex-start";
        };
        center: {
            alignItems: "center";
        };
        end: {
            alignItems: "flex-end";
        };
    };
}>;
export declare const cardHeader: string;
export declare const cardTitle: string;
export declare const cardSubtitle: string;
export declare const cardBody: string;
//# sourceMappingURL=card-system.css.d.ts.map