/**
 * Design tokens and constants for MoonCard component
 * Centralized values improve maintainability and consistency
 */
import type { Theme } from "@mui/material/styles";
export declare const SKELETON_SIZES: {
    readonly moonEmoji: {
        readonly width: 96;
        readonly height: 96;
    };
    readonly header: {
        readonly width: 160;
        readonly height: 20;
    };
    readonly phaseName: {
        readonly width: 200;
        readonly height: 48;
    };
    readonly descriptionLine1: {
        readonly width: 280;
        readonly height: 20;
    };
    readonly descriptionLine2: {
        readonly width: 260;
        readonly height: 20;
    };
    readonly zodiac: {
        readonly width: 120;
        readonly height: 18;
    };
    readonly progressBar: {
        readonly width: 280;
        readonly height: 4;
    };
    readonly percentage: {
        readonly width: 100;
        readonly height: 18;
    };
};
export declare const LAYOUT: {
    readonly maxWidth: "100%";
    readonly maxWidthPx: "100%";
    readonly minWidth: {
        readonly xs: 0;
        readonly sm: 0;
    };
    readonly padding: {
        readonly xs: 2;
        readonly sm: 2.5;
        readonly md: 3;
    };
    readonly contentMaxWidth: 280;
    readonly borderRadius: 1;
};
export declare const GLOW_EFFECT: {
    readonly size: {
        readonly xs: 150;
        readonly sm: 192;
    };
    readonly blur: "70px";
    readonly opacity: 0.2;
};
export declare const TYPOGRAPHY_SCALE: {
    readonly moonEmoji: {
        readonly xs: "5rem";
        readonly sm: "6rem";
    };
    readonly phaseName: {
        readonly xs: "2rem";
        readonly sm: "2.5rem";
    };
    readonly caption: {
        readonly xs: "0.7rem";
        readonly sm: "0.75rem";
    };
    readonly body: {
        readonly xs: "0.875rem";
        readonly sm: "0.9rem";
    };
    readonly zodiac: {
        readonly xs: "0.75rem";
        readonly sm: "0.8rem";
    };
};
/**
 * Generates card base styles shared between loading and loaded states
 * Prevents duplication and ensures consistency
 */
export declare const getCardBaseStyles: (theme: Theme, isClickable: boolean) => {
    transition?: string | undefined;
    cursor?: string | undefined;
    "&:hover"?: {
        transform: string;
        boxShadow: string;
    } | undefined;
    "&:active"?: {
        transform: string;
    } | undefined;
    position: "relative";
    overflow: string;
    borderRadius: 1;
    bgcolor: string;
    color: string;
    p: {
        readonly xs: 2;
        readonly sm: 2.5;
        readonly md: 3;
    };
    boxShadow: string;
    width: "100%";
    maxWidth: "100%";
    minWidth: {
        readonly xs: 0;
        readonly sm: 0;
    };
    mx: string;
    border: number;
    borderColor: string;
};
/**
 * Content wrapper styles - extracted for reusability
 */
export declare const CARD_CONTENT_STYLES: {
    readonly position: "relative";
    readonly zIndex: 10;
    readonly display: "flex";
    readonly flexDirection: "column";
    readonly alignItems: "center";
    readonly textAlign: "center";
    readonly p: 0;
    readonly "&:last-child": {
        readonly pb: 0;
    };
};