/* ============================================================
   组件基元层 (Primitives) — 令牌化可复用组件
   ------------------------------------------------------------
   依赖：tokens.css 已先加载（本文件直接使用 var(--primary) 等）。
   安全说明：本文件【只新增类，不修改任何元素级/页面级样式】。
             链接到任意页面均无副作用（未使用的类不影响渲染）。
   用途：Phase 2 起，各页逐步将硬编码/重复的 .btn / .toast / .badge 等
         迁移到本共享层，消除“34 份 btn / 34 份 toast / 5 套配色”的重复。
   注：商城页(category/product-store)刻意使用橙色品牌，其橙色按钮不在本次
       统一范围内；橙色↔蓝色主色统一属品牌决策，待另行确认。
   ============================================================ */

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  border-radius: var(--radius); padding: 8px 16px; font-size: 13px; font-family: inherit;
  line-height: 1.4; cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-ghost:hover { background: var(--primary-light); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--c-red-700); border-color: var(--c-red-700); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { padding: 10px 20px; font-size: 15px; }

/* 兼容别名：商城中性按钮。category/product-store 原 .bb-btn 定义逐字相同，
   故将唯一真源置于此处；保留类名以不动两页的 markup 与 JS 事件绑定。
   注意：与原定义逐字一致（不含 display，沿用元素默认），确保零视觉变化。 */
.bb-btn {
  background: #fff; color: #555; border: 1px solid #e0e0e0;
  padding: 3px 12px; border-radius: 12px; cursor: pointer;
  font-size: 12px; transition: all .12s;
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6;
}
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-danger  { background: var(--danger-light);  color: var(--danger); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-info    { background: var(--info-light);    color: var(--info); }
.badge-muted   { background: var(--surface-secondary); color: var(--text-secondary); }

/* ---------- Toast（深色胶囊；与原 category/product-store 近似，待品牌确认后统一 alpha/bottom） ---------- */
.toast {
  position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.8); color: #fff; padding: 10px 22px; border-radius: 22px;
  font-size: 13px; z-index: 9999; opacity: 0; pointer-events: none; max-width: 80vw; text-align: center;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Card / Input / Table / Empty ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; background: var(--surface); color: var(--text-primary);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.table-base { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-base th {
  background: var(--surface-secondary); padding: var(--sp-3) var(--sp-4); text-align: left;
  font-weight: 600; color: var(--text-secondary); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none;
}
.table-base td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text-primary); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; color: var(--text-tertiary); gap: 8px; }

/* ---------- 阶段色（订单/任务阶段节点映射，供后续迁移） ---------- */
:root {
  --stage-1: #94a3b8; --stage-2: #60a5fa; --stage-3: #3b82f6; --stage-4: #22c55e;
  --stage-5: #f59e0b; --stage-6: #ef4444; --stage-7: #a855f7; --stage-8: #64748b;
}