/* ============================================================
   globals.css — 全局排版 & 工具类
   ============================================================ */

/* --- 容器 --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

/* --- 排版工具 --- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: var(--sp-2);
}

.section-title {
  font-size: var(--fs-28);
  font-weight: var(--fw-700);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}

.section-desc {
  font-size: var(--fs-15);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 640px;
  margin-bottom: var(--sp-6);
}

.section-head {
  text-align: center;
  margin-bottom: var(--sp-10);
}
.section-head .section-title { margin-bottom: var(--sp-2); }
.section-head .section-desc { margin: 0 auto; }

/* --- 工具类 --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent    { color: var(--brand-accent); }
.text-success   { color: var(--brand-success); }
.text-danger    { color: var(--brand-danger); }
.text-inverse   { color: var(--text-inverse); }

.fs-12 { font-size: var(--fs-12); }
.fs-13 { font-size: var(--fs-13); }
.fs-14 { font-size: var(--fs-14); }
.fs-16 { font-size: var(--fs-16); }
.fs-18 { font-size: var(--fs-18); }
.fs-20 { font-size: var(--fs-20); }
.fs-24 { font-size: var(--fs-24); }
.fs-28 { font-size: var(--fs-28); }
.fs-32 { font-size: var(--fs-32); }
.fs-40 { font-size: var(--fs-40); }

.fw-400 { font-weight: var(--fw-400); }
.fw-500 { font-weight: var(--fw-500); }
.fw-600 { font-weight: var(--fw-600); }
.fw-700 { font-weight: var(--fw-700); }

.lh-tight   { line-height: var(--lh-tight); }
.lh-normal  { line-height: var(--lh-normal); }
.lh-relaxed { line-height: var(--lh-relaxed); }

.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- 分隔线 --- */
.divider {
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin: var(--sp-6) 0;
}

/* --- 标签/Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  font-size: var(--fs-11);
  font-weight: var(--fw-600);
  border-radius: var(--radius-full);
  background: var(--brand-accent-bg);
  color: var(--brand-accent);
}
.badge--success { background: var(--state-success-bg); color: var(--state-success-text); }
.badge--warn    { background: var(--state-warn-bg);    color: var(--state-warn-text); }
.badge--danger  { background: var(--state-danger-bg);  color: var(--state-danger-text); }
.badge--info    { background: var(--state-info-bg);    color: var(--state-info-text); }

/* --- Skeleton 骨架屏 --- */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Spinner --- */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 阅读宽度约束 --- */
.reading-width { max-width: var(--reading-max); }