/* --- START OF FILE base.css --- */

/* --- CSS Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 基准字号，通常为 16px */
  -webkit-text-size-adjust: 100%; 
  -ms-text-size-adjust: 100%; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  scroll-behavior: smooth; /* 平滑滚动效果 */
}

body {
   /* 
   * 优先使用各平台系统默认的优秀中文字体，然后是备选方案，最后是通用无衬线体。
   */
  font-family: -apple-system, BlinkMacSystemFont, 
               "PingFang SC", "Hiragino Sans GB", 
               "Microsoft YaHei UI", "Microsoft YaHei", 
               "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", 
               "Segoe UI", Roboto, "Helvetica Neue", Arial, 
               sans-serif;
  font-size: 16px; /* 明确基准字号 */
  line-height: 1.7; /* 调整基础行高以适应中文 */
  color: var(--color-text-primary); 
  background-color: var(--color-background); 
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit; /* 继承 body 字体 */
  margin-bottom: 0.75em; 
  font-weight: 600; 
  line-height: 1.3; 
  color: var(--color-text-headings); 
}

p {
  margin-bottom: 1.25em; /* 段落间距稍大一点，增加呼吸感 */
}

a {
  color: var(--color-primary); 
  text-decoration: none; 
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

a:hover {
  color: var(--color-primary-dark); 
  /* text-decoration: underline; */ /* 现代设计中，链接下划线hover时可省略，靠颜色变化区分 */
  opacity: 0.85;
}

ul,
ol {
  list-style: none; 
  margin-bottom: 1em;
  /* padding-left: 1.5em; */ /* 默认无缩进，需要时单独添加 */
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block; 
  max-width: 100%; 
  height: auto;
}

/* --- Color Variables --- */
:root {
  --color-primary: #0052CC; 
  --color-primary-light: #4C9AFF; 
  --color-primary-dark: #003E9A;  
  
  --color-background: #FFFFFF; 
  --color-background-alt: #F8F9FA; 
  --color-text-primary: #343A40; /* 调整主要文本颜色，避免纯黑 */
  --color-text-secondary: #6C757D; 
  --color-text-headings: #172B4D; 
  --color-border: #DEE2E6;      
  --color-disabled: #CED4DA;    

  --color-success: #28A745; 
  --color-danger: #DC3545;  
  --color-warning: #FFC107; 
  --color-info: #17A2B8;   
}


/* --- Typography --- */
/* 基准字号已在 body 设置 */
h1 { font-size: 2.8rem; line-height: 1.2;}  /* ~45px */
h2 { font-size: 2.2rem; line-height: 1.25;} /* ~35px */
h3 { font-size: 1.75rem; } /* ~28px */
h4 { font-size: 1.4rem; }  /* ~22px */
h5 { font-size: 1.15rem; } /* ~18px */
h6 { font-size: 1rem; }    /* ~16px */

p {
  font-size: 1rem; /* 16px */
  /* line-height: 1.7; 在 body 设置 */
  color: var(--color-text-primary);
}

.text-small {
  font-size: 0.875rem; /* 14px */
  color: var(--color-text-secondary);
}

.text-lead { /* 用于Hero区域等引导性文本 */
  font-size: 1.25rem; /* 20px */
  font-weight: 300; /* 细一点的字重 */
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5em;
}

strong, b {
  font-weight: 600; /* 明确强调字重 */
}


/* --- Spacing (Using 8px base) --- */
:root {
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem;  /* 8px */
  --space-md: 1rem;    /* 16px */
  --space-lg: 1.5rem;  /* 24px */
  --space-xl: 2.5rem;  /* 40px */
  --space-xxl: 4rem;   /* 64px */
  --space-xxxl: 6rem;  /* 96px */
}

.section {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

.section-sm { /* 小间距的 Section */
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.container { 
  width: 100%;
  max-width: 1200px; /* 调整最大宽度 */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg); /* 24px 边距 */
  padding-right: var(--space-lg);
}

/* 常用间距辅助类 (可选) */
.mt-1 { margin-top: var(--space-sm); }
.mb-1 { margin-bottom: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mb-2 { margin-bottom: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mb-3 { margin-bottom: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }
.mb-4 { margin-bottom: var(--space-xl); }
/* ... 可根据需要扩展 */


/* 组件内间距示例 (放在组件各自样式中更佳) */
/* .card { ... } */

/* 元素间垂直间距 (已在元素默认样式中设置) */
/* p, ul, ol, .form-group { margin-bottom: var(--space-md); } */
/* h1,h2,h3,h4,h5,h6 { margin-bottom: var(--space-sm); } */


/* --- Button Styles --- */
.btn {
  display: inline-block;
  font-weight: 500; 
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.75rem 1.8rem; /* 按钮稍大一点 */
  font-size: 1rem; /* 16px */
  line-height: 1.5;
  border-radius: 8px; /* 圆角稍大 */
  transition: all 0.2s ease-in-out; /* 过渡效果更平滑 */
  text-decoration: none !important; /* 强制去除按钮的下划线 */
}

/* 主要按钮 (Primary) */
.btn-primary {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 6px rgba(0, 82, 204, 0.1); /* 添加细微阴影 */
}
.btn-primary:hover {
  color: #fff;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px); /* 悬浮时轻微上移 */
  box-shadow: 0 6px 10px rgba(0, 82, 204, 0.15);
}
.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 0.25rem rgba(0, 82, 204, 0.3); /* Focus 光晕调整 */
}
.btn-primary:active, .btn-primary.active {
  color: #fff;
  background-color: #00357B; /* Active 状态更深 */
  border-color: #00357B;
  transform: translateY(0); /* 按下时复位 */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:disabled, .btn-primary.disabled {
  color: #fff;
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 次要/轮廓按钮 (Secondary / Outline) */
.btn-secondary {
  color: var(--color-primary);
  background-color: transparent;
  border: 2px solid var(--color-primary); /* 边框加粗 */
  padding: calc(0.75rem - 1px) calc(1.8rem - 1px); /* 调整内边距以匹配视觉大小 */
}
.btn-secondary:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.btn-secondary:focus, .btn-secondary.focus {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 82, 204, 0.3);
}
.btn-secondary:active, .btn-secondary.active {
  color: #fff;
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-secondary:disabled, .btn-secondary.disabled {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  background-color: transparent;
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* 文本按钮/链接按钮 (Text/Link Button) */
.btn-link {
    font-weight: 500; /* 保持一定字重 */
    color: var(--color-primary);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    padding: 0; 
}
.btn-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
    opacity: 1; /* Link 按钮 hover 时不改变透明度 */
}
.btn-link:disabled, .btn-link.disabled {
    color: var(--color-text-secondary);
    pointer-events: none;
    opacity: 0.65;
    text-decoration: none;
}

/* --- Utility Classes --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.w-100 { width: 100%; }
.bg-alt { background-color: var(--color-background-alt); }

/* --- END OF FILE base.css --- */