/* ========================================
   环亚实验室 - 通用CSS变量
   HY-LAB Common CSS Variables
   避免重复定义，提高代码复用性
   ======================================== */

:root {
    /* ========== 主题色彩 ========== */
    --hylab-primary: #0066CC;
    --hylab-primary-dark: #004C99;
    --hylab-primary-light: #3399FF;
    --hylab-secondary: #00C853;
    --hylab-secondary-dark: #009624;
    --hylab-accent: #FF6B35;
    
    /* ========== 文本颜色 ========== */
    --hylab-text-primary: #243352;
    --hylab-text-secondary: #44506B;
    --hylab-text-muted: #6C7A91;
    --hylab-text-light: #8A94A6;
    
    /* ========== 背景色 ========== */
    --hylab-bg-primary: #FFFFFF;
    --hylab-bg-secondary: #F5F9FF;
    --hylab-bg-tertiary: #EFF5FC;
    --hylab-bg-gradient-blue: linear-gradient(180deg, #f3f8ff 0%, #ffffff 45%, #f0f7ff 100%);
    --hylab-bg-gradient-light: linear-gradient(135deg, rgba(0, 102, 204, 0.08), rgba(0, 200, 83, 0.05));
    
    /* ========== 阴影效果 ========== */
    --hylab-shadow-sm: 0 4px 12px rgba(15, 76, 129, 0.08);
    --hylab-shadow-md: 0 12px 32px rgba(15, 76, 129, 0.12);
    --hylab-shadow-lg: 0 24px 60px rgba(15, 76, 129, 0.16);
    --hylab-shadow-xl: 0 30px 70px rgba(15, 76, 129, 0.18);
    --hylab-shadow-hover: 0 18px 45px rgba(0, 102, 204, 0.2);
    
    /* ========== 边框圆角 ========== */
    --hylab-radius-sm: 12px;
    --hylab-radius-md: 20px;
    --hylab-radius-lg: 28px;
    --hylab-radius-xl: 36px;
    --hylab-radius-pill: 999px;
    
    /* ========== 渐变效果 ========== */
    --hylab-gradient-primary: linear-gradient(135deg, var(--hylab-secondary), var(--hylab-primary));
    --hylab-gradient-hero: linear-gradient(135deg, rgba(0, 102, 204, 0.18), rgba(0, 200, 83, 0.15));
    --hylab-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 249, 255, 0.9));
    --hylab-gradient-hover: linear-gradient(135deg, var(--hylab-primary), var(--hylab-primary-dark));
    
    /* ========== 过渡动画 ========== */
    --hylab-transition-fast: 0.2s ease;
    --hylab-transition-normal: 0.3s ease;
    --hylab-transition-slow: 0.5s ease;
    --hylab-transition-transform: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========== 间距 ========== */
    --hylab-spacing-xs: 8px;
    --hylab-spacing-sm: 16px;
    --hylab-spacing-md: 24px;
    --hylab-spacing-lg: 32px;
    --hylab-spacing-xl: 48px;
    --hylab-spacing-2xl: 64px;
    
    /* ========== 字体 ========== */
    --hylab-font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    --hylab-font-size-xs: 13px;
    --hylab-font-size-sm: 15px;
    --hylab-font-size-md: 16px;
    --hylab-font-size-lg: 18px;
    --hylab-font-size-xl: 20px;
    --hylab-font-size-2xl: 24px;
    --hylab-font-size-3xl: 32px;
    --hylab-font-size-4xl: 44px;
    
    /* ========== 响应式断点 ========== */
    --hylab-breakpoint-sm: 576px;
    --hylab-breakpoint-md: 768px;
    --hylab-breakpoint-lg: 992px;
    --hylab-breakpoint-xl: 1200px;
    --hylab-breakpoint-2xl: 1600px;
}

/* ========== 通用工具类 ========== */
.hylab-shadow-sm { box-shadow: var(--hylab-shadow-sm); }
.hylab-shadow-md { box-shadow: var(--hylab-shadow-md); }
.hylab-shadow-lg { box-shadow: var(--hylab-shadow-lg); }
.hylab-shadow-xl { box-shadow: var(--hylab-shadow-xl); }

.hylab-gradient-primary { background: var(--hylab-gradient-primary); }
.hylab-gradient-hero { background: var(--hylab-gradient-hero); }

.hylab-text-primary { color: var(--hylab-text-primary); }
.hylab-text-secondary { color: var(--hylab-text-secondary); }
.hylab-text-muted { color: var(--hylab-text-muted); }

.hylab-transition { transition: var(--hylab-transition-normal); }
.hylab-transition-fast { transition: var(--hylab-transition-fast); }
.hylab-transition-slow { transition: var(--hylab-transition-slow); }

/* ========== 图片通用样式 ========== */
.hylab-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hylab-img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ========== 卡片通用样式 ========== */
.hylab-card {
    background: var(--hylab-bg-primary);
    border-radius: var(--hylab-radius-lg);
    box-shadow: var(--hylab-shadow-md);
    transition: var(--hylab-transition-transform), box-shadow var(--hylab-transition-normal);
}

.hylab-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hylab-shadow-hover);
}

/* ========== 按钮通用样式 ========== */
.hylab-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: var(--hylab-radius-pill);
    background: var(--hylab-gradient-primary);
    color: var(--hylab-bg-primary);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--hylab-shadow-md);
    transition: var(--hylab-transition-transform), box-shadow var(--hylab-transition-normal);
}

.hylab-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--hylab-shadow-lg);
    color: var(--hylab-bg-primary);
}

/* ========== 响应式容器 ========== */
.hylab-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--hylab-spacing-md);
}

@media (max-width: 767px) {
    :root {
        --hylab-font-size-3xl: 24px;
        --hylab-font-size-4xl: 32px;
        --hylab-spacing-xl: 32px;
        --hylab-spacing-2xl: 48px;
    }
}