/* ==========================================================================
   设计系统 - 色彩、排版、间距等基础变量
   ========================================================================== */
   :root {
    /* 品牌色 */
    --color-primary: #1a365d;    /* 主色 - 深蓝 */
    --color-primary-light: #254e89;  /* 主色浅色 - 用于hover */
    --color-primary-dark: #0f2a4a;   /* 主色深色 - 用于active */
    --color-accent: #9a1c2e;     /* 强调色 - 深红 */
    
    /* 中性色 */
    --color-text-primary: #1a1a1a;   /* 主要文字 */
    --color-text-secondary: #4a5568; /* 次要文字 */
    --color-text-tertiary: #718096; /* 辅助文字 */
    --color-text-quaternary: #a0aec0; /* 提示文字 */
    --color-border: #e2e8f0;     /* 边框颜色 */
    --color-divider: #edf2f7;    /* 分割线 */
    --color-background: #f8fafc;  /* 背景色 */
    --color-white: #ffffff;      /* 纯白 */
    
    /* 功能色 */
    --color-success: #0c9f6e;    /* 成功 */
    --color-warning: #c27803;    /* 警告 */
    --color-error: #e53e3e;      /* 错误 */
    --color-info: #3182ce;       /* 信息 */
    
    /* 间距系统 */
    --spacing-1: 0.25rem;  /* 4px */
    --spacing-2: 0.5rem;   /* 8px */
    --spacing-3: 0.75rem;  /* 12px */
    --spacing-4: 1rem;     /* 16px */
    --spacing-5: 1.5rem;   /* 24px */
    --spacing-6: 2rem;     /* 32px */
    --spacing-8: 3rem;     /* 48px */
    --spacing-10: 4rem;    /* 64px */
    
    /* 字体系统 */
    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-serif: Georgia, Cambria, serif;
    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    
    /* 字号系统 */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    
    /* 行高 */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* 圆角 */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* 过渡动画 */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;
}

/* 基础重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-white);
}

/* 基础元素样式 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast) ease;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: var(--leading-tight);
    margin-bottom: var(--spacing-4);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* 容器类 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.section {
    padding: var(--spacing-10) 0;
}

/* 响应式断点 */
@media (max-width: 1024px) {
    html { font-size: 15px; }
    .section { padding: var(--spacing-8) 0; }
}

@media (max-width: 768px) {
    html { font-size: 14px; }
    .section { padding: var(--spacing-6) 0; }
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
}

@media (max-width: 640px) {
    .container { padding: 0 var(--spacing-3); }
    .section { padding: var(--spacing-5) 0; }
}