/* ========================================
   薪连薪 Design System — Typography
   受控重构：统一字体系统，参考火山引擎排版
   ======================================== */

:root {
  /* ── Font Family ── */
  /* Display: 标题用，中文优先苹方 */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN",
    "Noto Sans CJK SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* Body: 正文用，英文优先Inter */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "system-ui",
    "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN",
    "Noto Sans CJK SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Legacy alias (backward compat) */
  --font-sans: var(--font-body);
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Consolas", monospace;

  /* ── Font Sizes (Clamp-based responsive) ── */
  /* Hero 首页: clamp(54px, 4.2vw, 82px) */
  --text-hero-home: clamp(54px, 4.2vw, 82px);
  /* Hero 内页: clamp(40px, 2.8vw, 58px) */
  --text-hero-inner: clamp(40px, 2.8vw, 58px);
  /* Section 标题: clamp(32px, 2.2vw, 46px) */
  --text-section-title: clamp(32px, 2.2vw, 46px);
  /* 卡片标题: clamp(20px, 1.35vw, 27px) */
  --text-card-title: clamp(20px, 1.35vw, 27px);
  /* 主要说明: clamp(18px, 1.05vw, 20px) */
  --text-lead: clamp(18px, 1.05vw, 20px);
  /* 正文: clamp(16px, 0.92vw, 18px) */
  --text-body: clamp(16px, 0.92vw, 18px);
  /* 小字: clamp(14px, 0.78vw, 16px) */
  --text-small: clamp(14px, 0.78vw, 16px);
  /* 导航: clamp(15px, 0.82vw, 17px) */
  --text-nav: clamp(15px, 0.82vw, 17px);
  /* 按钮: clamp(15px, 0.88vw, 17px) */
  --text-btn: clamp(15px, 0.88vw, 17px);

  /* Legacy fixed size tokens (backward compat) */
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1rem;
  --text-lg:     1.125rem;
  --text-xl:     1.25rem;
  --text-2xl:    1.5rem;
  --text-3xl:    2rem;
  --text-4xl:    2.5rem;
  --text-5xl:    3.5rem;
  --text-6xl:    4.5rem;

  /* ── Font Weights ── */
  --font-weight-light:    300;
  --font-weight-regular:   400;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* ── Line Heights ── */
  --leading-display:  1.4;
  --leading-heading:   1.3;
  --leading-tight:     1.2;
  --leading-snug:      1.3;
  --leading-normal:    1.5;
  --leading-relaxed:   1.6;
  --leading-loose:     1.7;
  --leading-body:      1.65;

  /* ── Letter Spacing ── */
  --tracking-display:  -0.01em;
  --tracking-heading:   -0.01em;
  --tracking-tighter:   -0.03em;
  --tracking-tight:     -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.02em;
  --tracking-body:       0;
}

/* ── Global Body ── */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Headings ── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero-home);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-section-title);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.1vw, 22px);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

h5, .h5 {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

h6, .h6 {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* ── Utility Classes ── */
.text-xs  { font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.text-sm  { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.text-base { font-size: var(--text-base); line-height: var(--leading-loose); }
.text-lg  { font-size: var(--text-lg); line-height: var(--leading-loose); }
.text-xl  { font-size: var(--text-xl); line-height: var(--leading-relaxed); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--leading-normal); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--leading-normal); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--leading-snug); }
.text-5xl { font-size: var(--text-5xl); line-height: var(--leading-tight); }
.text-6xl { font-size: var(--text-6xl); line-height: var(--leading-tight); }

.font-light    { font-weight: var(--font-weight-light); }
.font-normal   { font-weight: var(--font-weight-normal); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }

/* ── Text Colors ── */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-disabled  { color: var(--color-text-disabled); }
.text-inverse   { color: var(--color-text-inverse); }
.text-link      { color: var(--color-text-link); }

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--color-gradient-deep-blue) 0%,
    var(--color-gradient-future-cyan) 50%,
    var(--color-gradient-accent-purple) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Links ── */
a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-text-link-hover);
}

/* ── Paragraph ── */
p {
  margin: 0 0 1rem;
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.lead {
  font-size: var(--text-lead);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* ── Code / Mono ── */
code, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ── Selection ── */
::selection {
  background: rgba(10, 61, 255, 0.2);
  color: var(--color-text-primary);
}