/* 
 * 品盈科技 Design System v2.0
 * 包含：Fluid Typography, Spacing System, Layout Utilities
 */

:root {
    /* --- 1. 色彩系统 (Color System) --- */
    --primary-blue: #4E6BF4;
    --primary-dark: #1A237E;
    --secondary-gold: #D4B57E;
    --neutral-100: #FFFFFF;
    --neutral-200: #F9FAFC;
    --neutral-800: #333333;
    --neutral-600: #666666;

    /* --- 2. 流体排版 (Fluid Typography using clamp) --- */
    /* Min: 14px at 320px, Max: 16px at 1920px */
    --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); 
    --text-base: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --text-hero: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);

    /* --- 3. 间距系统 (Spacing System based on REM) --- */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 2.5rem;   /* 40px */
    --space-xl: 4rem;     /* 64px */
    --space-2xl: 6.25rem; /* 100px */

    /* --- 4. 布局变量 --- */
    --container-width: 1200px;
    --header-height: 60px;
}

/* 核心基础样式重置 */
html {
    font-size: 16px; /* Base for REM */
    scroll-behavior: smooth;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--neutral-800);
    background-color: var(--neutral-200);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* 响应式容器 */
.container {
    width: min(var(--container-width), 95%);
    margin-inline: auto;
    position: relative;
}

/* 智能网格系统 */
.grid-system {
    display: grid;
    gap: var(--space-md);
}

.grid-cols-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 动画性能优化类 */
.gpu-accelerate {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 文本截断 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 微交互效果 */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-lift:hover {
    transform: translateY(-5px);
}