/**
 * 5G健康 V5.0 H5生产版 - CSS变量定义
 * 大厂级设计体系：更克制的色彩、更宽松的间距、更精致的阴影
 */

:root {
    /* ========== 主色调 - 沉稳天蓝 ========== */
    --primary: #4A8BDB;
    --primary-dark: #3A78C4;
    --primary-light: #6EA4E4;
    --primary-gradient: linear-gradient(135deg, #4A8BDB 0%, #5E9CE5 100%);
    --primary-bg: rgba(74, 139, 219, 0.06);
    
    /* ========== 辅助色 ========== */
    --secondary: #5D9CEC;
    --accent: #4ECDC4;
    --success: #52C41A;
    --danger: #FF4D4F;
    --warning: #FAAD14;
    --info: #1890FF;
    
    /* ========== 文字颜色（层次更分明）========== */
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-light: #999999;
    --text-white: #FFFFFF;
    
    /* ========== 背景颜色 ========== */
    --bg-primary: #F5F7FA;
    --bg-secondary: #EEF1F5;
    --bg-white: #FFFFFF;
    --bg-gray: #F7F8FA;
    
    /* ========== 边框颜色 ========== */
    --border-color: #E5E8EC;
    --border-light: #F0F2F5;
    
    /* ========== 阴影（更柔和多层）========== */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 4px 16px rgba(74, 139, 219, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
    
    /* ========== 圆角（更圆润）========== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-xxl: 24px;
    --radius-full: 9999px;
    
    /* ========== 字体大小 ========== */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-md: 15px;
    --font-lg: 17px;
    --font-xl: 20px;
    --font-xxl: 24px;
    --font-xxxl: 32px;
    
    /* ========== 间距（更宽松）========== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-xxl: 28px;
    --space-xxxl: 36px;
    
    /* ========== 动画 ========== */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== Z-index层级 ========== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    
    /* ========== TabBar高度 ========== */
    --tabbar-height: 56px;
}

/* ========== 字体大小类 ========== */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
.text-md { font-size: var(--font-md); }
.text-lg { font-size: var(--font-lg); }
.text-xl { font-size: var(--font-xl); }
.text-xxl { font-size: var(--font-xxl); }
.text-xxxl { font-size: var(--font-xxxl); }

/* ========== 文字颜色类 ========== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-white { color: var(--text-white); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }

/* ========== 背景颜色类 ========== */
.bg-primary { background: var(--bg-primary); }
.bg-white { background: var(--bg-white); }
.bg-gray { background: var(--bg-gray); }

/* ========== 文本对齐 ========== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ========== 字体加粗 ========== */
.font-bold { font-weight: 600; }
.font-medium { font-weight: 500; }