/* ============================================
   全局字体排版设计系统 (Global Typography Design System)
   字体: Noto Sans SC
   ============================================ */

/* -------------------------------------------
   1. CSS 自定义属性 / 设计令牌 (Design Tokens)
   ------------------------------------------- */
:root {
  /* 品牌色 */
  --brand: #f11158;
  --brand-hover: #f62869;
  --brand-light: #f4cdd9;
  
  /* 文本颜色 - 禁用纯黑，使用深灰 */
  --text-primary: #333333;
  --text-secondary: #4a4a4a;
  --text-tertiary: #707c84;
  --text-white: #ffffff;
  
  /* 背景色 */
  --bg-dark: #131516;
  --bg-gray: #f4f5f6;
  --bg-white: #ffffff;
  
  /* 字体族 */
  --font-primary: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  
  /* -----------------------------------------
     排版层级 (Typography Hierarchy)
     ----------------------------------------- */
  
  /* Primary - 主要标题 (视觉锤) */
  --text-primary-size: 3.5rem;        /* 56px */
  --text-primary-size-mobile: 2rem;   /* 32px - 移动端 */
  --text-primary-weight: 800;         /* Extra Bold */
  --text-primary-line: 1.2;
  --text-primary-letter: 1px;
  
  /* Secondary - 次要标题 (骨架) */
  --text-secondary-size: 2rem;        /* 32px */
  --text-secondary-size-mobile: 1.5rem; /* 24px - 移动端 */
  --text-secondary-weight: 600;       /* Semi Bold */
  --text-secondary-line: 1.4;
  --text-secondary-letter: 0.5px;
  
  /* Text - 正文 (血液) */
  --text-body-size: 1rem;             /* 16px */
  --text-body-size-lg: 1.125rem;      /* 18px - 大龄友好 */
  --text-body-weight: 400;            /* Normal */
  --text-body-line: 1.7;              /* 中文排版灵魂 */
  --text-body-letter: 0;
  
  /* Accent - 强调 (触点) */
  --text-accent-size: 0.875rem;       /* 14px */
  --text-accent-size-lg: 1rem;        /* 16px */
  --text-accent-weight: 500;          /* Medium */
  --text-accent-line: 1;
  --text-accent-letter: 1px;
  
  /* 其他 */
  --card-radius: 16px;
  --transition-base: 0.3s ease;
}

/* -------------------------------------------
   2. 基础重置 (@layer base)
   ------------------------------------------- */
@layer base {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-primary);
    /* 禁用纯黑，使用深灰作为基础文本色 */
    color: var(--text-primary);
  }
  
  body {
    font-family: var(--font-primary);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line);
    letter-spacing: var(--text-body-letter);
    color: var(--text-primary);
    background-color: var(--bg-gray);
  }
  
  /* 主要标题 (Primary) - H1 */
  h1, .text-primary {
    font-family: var(--font-primary);
    font-size: var(--text-primary-size-mobile);
    font-weight: var(--text-primary-weight);
    line-height: var(--text-primary-line);
    letter-spacing: var(--text-primary-letter);
    color: var(--text-primary);
  }
  
  @media (min-width: 640px) {
    h1, .text-primary {
      font-size: 2.5rem; /* 40px - 平板 */
    }
  }
  
  @media (min-width: 1024px) {
    h1, .text-primary {
      font-size: var(--text-primary-size); /* 56px - 桌面 */
    }
  }
  
  /* 次要标题 (Secondary) - H2, H3 */
  h2, h3, .text-secondary {
    font-family: var(--font-primary);
    font-size: var(--text-secondary-size-mobile);
    font-weight: var(--text-secondary-weight);
    line-height: var(--text-secondary-line);
    letter-spacing: var(--text-secondary-letter);
    color: var(--text-primary);
  }
  
  @media (min-width: 640px) {
    h2, h3, .text-secondary {
      font-size: 1.75rem; /* 28px - 平板 */
    }
  }
  
  @media (min-width: 1024px) {
    h2, h3, .text-secondary {
      font-size: var(--text-secondary-size); /* 32px - 桌面 */
    }
  }
  
  /* 正文 (Text) - p, article */
  p, .text-body {
    font-family: var(--font-primary);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line);
    letter-spacing: var(--text-body-letter);
    color: var(--text-secondary);
  }
  
  /* 大号正文 - 适合大龄用户 */
  .text-body-lg {
    font-size: var(--text-body-size-lg);
    line-height: 1.7;
  }
  
  /* 强调/交互元素 (Accent) - button, tag, link */
  button, .btn, .tag, .text-accent {
    font-family: var(--font-primary);
    font-size: var(--text-accent-size);
    font-weight: var(--text-accent-weight);
    line-height: var(--text-accent-line);
    letter-spacing: var(--text-accent-letter);
  }
  
  /* 稍大的强调文字 */
  .text-accent-lg {
    font-size: var(--text-accent-size-lg);
  }
  
  /* 移除默认外边距 */
  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }
  
  /* 链接基础样式 */
  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
  }
  
  /* 选中文本高亮 */
  ::selection {
    background-color: var(--brand);
    color: var(--text-white);
  }
}

/* -------------------------------------------
   3. 颜色工具类 (Color Utilities)
   ------------------------------------------- */

/* 文本颜色 */
.text-text-primary { color: var(--text-primary) !important; }
.text-text-secondary { color: var(--text-secondary) !important; }
.text-text-tertiary { color: var(--text-tertiary) !important; }

/* -------------------------------------------
   4. 工具类 (Utility Classes)
   ------------------------------------------- */

/* 主要标题类 */
.heading-primary {
  font-family: var(--font-primary);
  font-size: var(--text-primary-size-mobile);
  font-weight: var(--text-primary-weight);
  line-height: var(--text-primary-line);
  letter-spacing: var(--text-primary-letter);
  color: var(--text-primary);
}

@media (min-width: 640px) {
  .heading-primary {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .heading-primary {
    font-size: var(--text-primary-size);
  }
}

/* 次要标题类 */
.heading-secondary {
  font-family: var(--font-primary);
  font-size: var(--text-secondary-size-mobile);
  font-weight: var(--text-secondary-weight);
  line-height: var(--text-secondary-line);
  letter-spacing: var(--text-secondary-letter);
  color: var(--text-primary);
}

@media (min-width: 640px) {
  .heading-secondary {
    font-size: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .heading-secondary {
    font-size: var(--text-secondary-size);
  }
}

/* 正文类 */
.text-content {
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-line);
  letter-spacing: var(--text-body-letter);
  color: var(--text-secondary);
}

.text-content-lg {
  font-size: var(--text-body-size-lg);
}

/* 强调/交互类 */
.text-interactive {
  font-family: var(--font-primary);
  font-size: var(--text-accent-size);
  font-weight: var(--text-accent-weight);
  line-height: var(--text-accent-line);
  letter-spacing: var(--text-accent-letter);
}

.text-interactive-lg {
  font-size: var(--text-accent-size-lg);
}

/* 中文排版优化 */
.text-optimized {
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* -------------------------------------------
   4. 组件特定样式
   ------------------------------------------- */

/* 导航链接 */
.nav-link {
  font-family: var(--font-primary);
  font-size: var(--text-accent-size);
  font-weight: var(--text-accent-weight);
  letter-spacing: var(--text-accent-letter);
  color: var(--text-white);
  opacity: 0.9;
  transition: opacity var(--transition-base), color var(--transition-base);
}

.nav-link:hover {
  opacity: 1;
  color: var(--brand);
}

.nav-link-active {
  color: var(--brand);
  opacity: 1;
}

/* 按钮 */
.btn-primary {
  font-family: var(--font-primary);
  font-size: var(--text-accent-size-lg);
  font-weight: var(--text-accent-weight);
  letter-spacing: var(--text-accent-letter);
  line-height: var(--text-accent-line);
}

/* 标签/徽章 */
.tag {
  font-family: var(--font-primary);
  font-size: 0.75rem; /* 12px */
  font-weight: var(--text-accent-weight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 卡片标题 */
.card-title {
  font-family: var(--font-primary);
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

/* -------------------------------------------
   5. 其他工具样式
   ------------------------------------------- */

/* 信任徽章 */
.trust-badge {
  filter: grayscale(100%) opacity(0.6);
  transition: filter var(--transition-base);
}

.trust-badge:hover {
  filter: grayscale(0%) opacity(1);
}

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

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

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-gray);
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}