/* ═══════════════════════════════════════════════════════════════════
   SITU · Buttons
   ───────────────────────────────────────────────────────────────────
   两层:
     A. 全站 polish — applies to <button> 及 15+ 已知按钮 class，
        仅添加大多 page 未设置的属性（focus-visible / disabled /
        active / cursor / outline）。**不会破坏 page 原有外观。**
     B. Canonical 系统 — .btn 基础 + .btn--{primary|ghost|text|danger}
        × .btn--{sm|lg} 修饰符。新代码用这套。

   加载顺序: 必须在 situ-tokens.css 之后（要用 token 变量），但
   在 page <style> 之前没关系——A 层只设 page 没设的属性，B 层是
   新 class 不冲突。
   ═══════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════
   A · Global Polish · 全站按钮通用 polish
   仅添加 "横向加分但不影响现有视觉" 的属性
   ═════════════════════════════════════════════════════════════════ */

button,
.btn,
.btn-primary, .btn-outline,
.canvas-cta, .studio-cta, .page-cta,
.submit-btn,
.plan-buy,
.ph-btn,
.ig-gen, .tripo-gen, .marble-gen,
.agent-send, .agent-btn,
.rd-send-canvas,
.link-btn,
.cs-btn,
.pm-new {
  cursor: pointer;
  /* 大部分 page 没设 transition；那些设了的会被自己的规则覆盖 */
  transition: background-color var(--dur-fast, 200ms) var(--ease, ease),
              color            var(--dur-fast, 200ms) var(--ease, ease),
              border-color     var(--dur-fast, 200ms) var(--ease, ease),
              transform        var(--dur-instant, 100ms) var(--ease, ease),
              box-shadow       var(--dur-fast, 200ms) var(--ease, ease),
              opacity          var(--dur-fast, 200ms) var(--ease, ease);
}

/* 键盘 focus 环 — 几乎没有 page 设过这个，所以会全站生效。
   :focus-visible 只在键盘 Tab 时出现，不影响鼠标点击体验。 */
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible, .btn-outline:focus-visible,
.canvas-cta:focus-visible, .studio-cta:focus-visible, .page-cta:focus-visible,
.submit-btn:focus-visible,
.plan-buy:focus-visible,
.ph-btn:focus-visible,
.ig-gen:focus-visible, .tripo-gen:focus-visible, .marble-gen:focus-visible,
.agent-send:focus-visible, .agent-btn:focus-visible,
.rd-send-canvas:focus-visible,
.link-btn:focus-visible,
.cs-btn:focus-visible {
  outline: 2px solid var(--aura, currentColor);
  outline-offset: 2px;
  /* 显示焦点时去掉浏览器默认 dotted outline */
}

/* 鼠标点击 / 触屏按下时按钮微微下沉 1px，给力觉反馈 */
button:not(:disabled):active,
.btn:not(:disabled):active,
.btn-primary:not(:disabled):active, .btn-outline:not(:disabled):active,
.canvas-cta:not(:disabled):active, .studio-cta:not(:disabled):active,
.submit-btn:not(:disabled):active,
.plan-buy:not(:disabled):active,
.ph-btn:not(:disabled):active,
.ig-gen:not(:disabled):active, .tripo-gen:not(:disabled):active, .marble-gen:not(:disabled):active,
.agent-send:not(:disabled):active, .agent-btn:not(:disabled):active,
.rd-send-canvas:not(:disabled):active {
  transform: translateY(1px);
}

/* 禁用状态 — 大部分 page 没系统设过 */
button:disabled,
.btn:disabled,
.btn-primary:disabled, .btn-outline:disabled,
.canvas-cta:disabled, .studio-cta:disabled,
.submit-btn:disabled,
.plan-buy:disabled,
.ph-btn:disabled,
.ig-gen:disabled, .tripo-gen:disabled, .marble-gen:disabled,
.agent-send:disabled, .agent-btn:disabled,
.link-btn:disabled,
.cs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* aria-busy 状态：按钮正在执行任务（如加载） */
button[aria-busy="true"],
.btn[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
  pointer-events: none;
}


/* ═════════════════════════════════════════════════════════════════
   B · Canonical Buttons · 新代码用
   ═════════════════════════════════════════════════════════════════ */

/* ── 基础 .btn ──
   reset 浏览器默认 + 安全 defaults。新增 .btn--* modifier 来变形。  */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2, 8px);

  /* defaults 对应 medium size，可被 .btn--sm/lg 覆盖 */
  padding: 10px 18px;
  font: 500 var(--t-sm, 13px) / 1 var(--f-body, inherit);
  letter-spacing: var(--ls-wide, 0.04em);

  border: 1px solid transparent;
  border-radius: var(--r-md, 10px);
  background: transparent;
  color: inherit;

  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn i,
.btn svg { font-size: 0.9em; }


/* ── Size modifiers ── */
.btn--sm {
  padding: 6px 12px;
  font-size: var(--t-xs, 11px);
  border-radius: var(--r-sm, 6px);
  gap: var(--s-1, 4px);
}
.btn--lg {
  padding: 14px 28px;
  font-size: var(--t-md, 17px);
  border-radius: var(--r-md, 10px);
  gap: var(--s-3, 12px);
  letter-spacing: 0.08em;
}


/* ── Primary · 主 CTA：实心 accent ── */
.btn--primary {
  background: var(--aura, currentColor);
  color: #fff;
  border-color: var(--aura, currentColor);
  box-shadow: var(--elev-flat, 0 1px 2px rgba(0,0,0,0.04));
}
.btn--primary:hover {
  background: var(--aura-bright, var(--aura, currentColor));
  border-color: var(--aura-bright, var(--aura, currentColor));
  box-shadow: var(--elev-hover, 0 4px 12px rgba(0,0,0,0.08));
}
.btn--primary:active {
  background: var(--aura-deep, var(--aura, currentColor));
  border-color: var(--aura-deep, var(--aura, currentColor));
}


/* ── Ghost · 次级：透明底 + accent 描边/字 ── */
.btn--ghost {
  background: transparent;
  color: var(--aura, inherit);
  border-color: var(--aura, currentColor);
}
.btn--ghost:hover {
  background: rgba(var(--aura-rgb, 0,0,0), 0.08);
}
.btn--ghost:active {
  background: rgba(var(--aura-rgb, 0,0,0), 0.16);
}


/* ── Text · 最弱：纯文字按钮（link-like） ── */
.btn--text {
  background: transparent;
  color: var(--aura, currentColor);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn--text:hover {
  color: var(--aura-bright, var(--aura, currentColor));
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn--text:active {
  color: var(--aura-deep, var(--aura, currentColor));
}


/* ── Danger · 破坏性操作 ── */
.btn--danger {
  background: #b54028;
  color: #fff;
  border-color: #b54028;
}
.btn--danger:hover {
  background: #d9522e;
  border-color: #d9522e;
}
.btn--danger:active {
  background: #962f1c;
  border-color: #962f1c;
}


/* ── 图标按钮: 方形，只放 icon ── */
.btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-pill, 999px);
}
.btn--icon.btn--sm { width: 28px; height: 28px; }
.btn--icon.btn--lg { width: 44px; height: 44px; }


/* ─────────────────────────────────────────────────────────────────
   迁移指南（写给团队 & 后续维护者）：

   旧代码:
     <button class="canvas-cta">Open Canvas</button>
     <button class="submit-btn">Sign in</button>
     <button class="plan-buy">Buy Studio</button>
     <button class="ph-btn primary">Submit</button>

   新等价:
     <button class="btn btn--primary">Open Canvas</button>
     <button class="btn btn--primary btn--lg">Sign in</button>
     <button class="btn btn--primary">Buy Studio</button>
     <button class="btn btn--primary btn--sm">Submit</button>

   旧 .btn-outline / .page-cta → .btn .btn--ghost 或 .btn--text
   旧 button.danger / .delete-btn → .btn .btn--danger

   迁移时:
   1. 改 HTML class
   2. 从对应 page 的 <style> 删除该 class 的定义
   3. 视觉应该几乎不变（canonical 是基于现有主流 page 抽取的）
   ───────────────────────────────────────────────────────────────── */