/* ============================================================
   components.css — gdnms.com 规范化组件与令牌工具类
   作用：
   1) 提供令牌工具类（text-*/bg-*/border-*），用于替代模板中
      写死的 color/background inline 样式（"全清内联"）。
   2) 统一定义可被复用的一致性组件基类（按钮 / 表格 / 标签），
      仅用令牌变量，不改变任何既有结构与文案。
   注意：所有规则均为"附加/归一"，不覆盖 index.css 既有布局。
   ============================================================ */
@charset "utf-8";

/* ---------- 文本颜色工具类 ---------- */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-quaternary{ color: var(--color-text-quaternary); }
.text-disabled  { color: var(--color-text-disabled); }
.text-white     { color: var(--color-white); }
.text-accent    { color: var(--color-accent-500); }
.text-error     { color: var(--color-error); }
.text-success   { color: var(--color-success); }
.text-link      { color: var(--color-link); }

/* ---------- 背景颜色工具类 ---------- */
.bg-white     { background-color: var(--color-white); }
.bg-page      { background-color: var(--color-bg-page); }
.bg-light     { background-color: var(--color-bg-light); }
.bg-secondary { background-color: var(--color-secondary-500); }
.bg-primary   { background-color: var(--color-primary-500); }
.bg-gong      { background-color: var(--color-gong); }
.bg-qiu       { background-color: var(--color-qiu); }

/* ---------- 边框工具类 ---------- */
.border-light { border: 1px solid var(--color-border-light); }
.border       { border: 1px solid var(--color-border); }
.border-blue  { border: 1px solid var(--color-primary-500); }

/* ============================================================
   归一化组件基类（令牌驱动，供后续模板渐进迁移使用）
   —— 不强制替换现有 .btn* 类，仅作为统一规范留存。
   ============================================================ */

/* 按钮基元 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-family-base);
  font-weight: 500; text-decoration: none; border: none; cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
.btn--primary   { background: var(--color-primary-500); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-600); }
.btn--secondary { background: var(--color-secondary-500); color: #fff; }
.btn--accent    { background: var(--color-accent-500); color: #fff; }
.btn--accent:hover:not(:disabled) { background: var(--color-accent-600); }

/* 标签 / 徽章基元 */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 8px; border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); line-height: 1.6;
}
.tag--gong { background: var(--color-gong); color: #fff; }
.tag--qiu  { background: var(--color-qiu);  color: #fff; }
.tag--accent { background: var(--color-accent-500); color: #fff; }

/* 表格基元 */
.table-base { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
.table-base th {
  background: var(--color-bg-light); color: var(--color-text-tertiary);
  font-weight: 400; border: 1px solid var(--color-border);
  padding: 10px 12px; text-align: left;
}
.table-base td {
  border: 1px solid var(--color-border); padding: 10px 5px;
  color: var(--color-text-primary);
}
.table-base tbody tr:nth-child(even) { background: var(--color-bg-stripe); }
.table-base tbody tr:hover { background: var(--color-bg-blue-tint2); }