/* CSS变量定义 */
:root {
    /* 布局相关 Layout */
    --container-width-sm: 540px;
    --container-width-md: 720px;
    --container-width-lg: 960px;
    --container-padding: 16px;
    --container-max-width: 1400px;

    /* 间距 Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* 断点 Breakpoints */
    --breakpoint-mobile: 576px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;

    /* Z-index 层级 */
    --z-negative: -1;
    --z-elevate: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-popover: 1050;
    --z-tooltip: 1060;

    /* 动画 Animation */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 450ms;
    --easing-base: cubic-bezier(0.4, 0, 0.2, 1);

    /* 阴影 Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* 圆角 Border Radius */
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}