/* ============================================================
   Ztor Creator Studio · R 2.1 — Button
   Differs from ztor: primary fill flips from near-black #171717
   to highlighter orange #ffa33f with dark text. Outline variant
   is unchanged (token-driven).
   ============================================================ */

/* ============================================================
   .ztor-btn — 退場 2026-07-21（STYLE-DECISIONS Q25 延伸，使用者裁示）
   ------------------------------------------------------------
   墓碑：.ztor-btn 及其 outline 變體與 xs/sm/lg/xl 四個尺寸變體
   曾是「design-system 文件用的 canonical 按鈕」，預設 44px（--control-h-md），
   與產品頁實際使用的 `.btn`（預設 36px）並存成兩個家族。

   為什麼退場：使用者檢視元件的唯一入口是 design-system.html，那裡把 44px 標成
   「預設按鈕」，但 236+ 處真實頁面渲染的都是 36px——DS 頁在按鈕這一項與出貨結果不符。
   退場時全站已無任何 markup 消費它（僅剩 design-system.html 一行 class API 說明），
   等於這個家族早就只剩 CSS 與文件。比照 2026-07-10 `.ztor-input` 替身退場的前例。

   替代：一律用 `.btn`——orange primary＝`.btn.btn--primary`、外框＝`.btn.btn--outline`、
   尺寸＝`.btn--sm`(28) / 預設(36) / `.btn--lg`(44)。
   副作用：`--control-h-lg`(52) 與 `--control-h-xl`(60) 隨之失去唯一消費者，
   已在 design-system.md 標為「待採用」（定義保留，尚無元件使用）。
   ============================================================ */


/* ============================================================
   .btn — 全站唯一的按鈕（2026-07-21 起）。原本是 card.css 那種雙命名空間的
   下半部（.ztor-btn = 文件用 canonical、.btn = 產品頁密度版），上半部已於
   2026-07-21 退場，見本檔開頭墓碑。現在 .btn 就是 canonical，DS 頁與產品頁同源。
   (Moved out of shared.css 2026-05-27.)
   ============================================================ */
/* .btn heights track the shared --control-h scale (same tokens as input, 2026-07-03；
   2026-07-21 Q25 起 input 也真的吃這套，不再是 padding 撐開)：
   default = --control-h-sm (36), --sm = --control-h-xs (28), --lg = --control-h-md (44). Height is pinned per size; vertical padding is
   dropped and the label is vertically centred by align-items — box-sizing:border-box
   keeps the outline variant's 1px border inside the same height. */
.btn {
  --btn-pad-x: var(--sp-14);

  display: inline-flex;
  align-items: center;
  /* 2026-07-28：沒有這行，任何 min-width 大於內容寬度的按鈕，文字都會靠左而非置中。
     分頁鍵是最明顯的案例（.pager .btn min-width:34px 配單一數字，實測偏左 4.91px）。
     一般按鈕因為寬度由內容撐開，看不出來——但 bug 一直都在。 */
  justify-content: center;
  gap: var(--sp-8);   /* icon ↔ label spacing (§4.2) */
  height: var(--control-h-sm);
  padding: 0 var(--btn-pad-x);
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  letter-spacing: -0.2px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  transition: filter 150ms ease, background 150ms ease;
}
/* [hidden] 必須蓋過上面的 display:inline-flex，否則帶 hidden 屬性的按鈕（如編輯態才出現的 Delete）會誤顯示 */
.btn[hidden] { display: none; }
.btn--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-raise);
}
.btn--primary:hover { background: var(--primary-hover); }
/* Outline = white surface + real 1px hairline border (2026-06-12).
   History: 05-28 transparent fill disappeared on warm-paper canvas → fill+micro-shadow;
   06-09 canvas flipped clean white → fill-only outline disappeared again (user feedback).
   A real border works on both white and gray grounds — and is what "outline" means.
   Flat, no shadow: the border is the edge; adding micro-shadow on top read as too
   much shadow (user feedback 2026-06-12). Padding −1px each side vs .btn base. */
.btn--outline {
  --btn-pad-x: 13px;

  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.btn--outline:hover { background: var(--accent); }
.btn--outline.btn--lg { --btn-pad-x: 17px; }
.btn--outline.btn--sm { --btn-pad-x: 9px; }
.btn--ghost {
  background: transparent;
  color: var(--foreground-muted);
}
.btn--ghost:hover { background: var(--accent); color: var(--foreground); }
/* Destructive ghost：紅字＋hover 淡紅底。綁 ghost 防止誤掛 primary（2026-07-09 自 create-product/auction 頁內樣式 promote） */
.btn--ghost.btn--destructive { color: var(--destructive); }
.btn--ghost.btn--destructive:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); color: var(--destructive); }
/* Destructive 實心（2026-07-27）：只給「確認彈窗裡真正執行破壞」的那一顆——入口用上面的 ghost 版
   （紅字、不搶眼），真的要按下去的那一步才給實心紅。
   ⚠ 必須 :not(.btn--ghost)。ghost 版只設 color、沒設 background，兩條規則管的是不同屬性，
   光靠特異度不會互相取代——第一版沒排除 ghost，結果紅底＋紅字，整顆按鈕變成看不見字的紅方塊。 */
.btn--destructive:not(.btn--ghost) {
  background: var(--destructive);
  color: var(--destructive-foreground, #fff);
  border-color: transparent;
}
.btn--destructive:not(.btn--ghost):hover {
  background: color-mix(in srgb, var(--destructive) 86%, #000);
  color: var(--destructive-foreground, #fff);
}
.btn--destructive:not(.btn--ghost):disabled { opacity: .5; cursor: not-allowed; }
/* Soft / tonal secondary (2026-06-12) — resting light-grey fill, no border.
   Sits between ghost (transparent until hover) and outline (white + border):
   use for a quiet-but-always-visible secondary like a toolbar Export. */
.btn--soft {
  background: color-mix(in srgb, var(--foreground) 6%, var(--card));
  color: var(--foreground);
}
.btn--soft:hover { background: color-mix(in srgb, var(--foreground) 10%, var(--card)); }
.btn--lg { --btn-pad-x: var(--sp-18); height: var(--control-h-md); font-size: var(--fs-14); }
.btn--sm { --btn-pad-x: var(--sp-10); height: var(--control-h-xs); font-size: var(--fs-12); }
/* Disabled — e.g. a primary gated by a readiness check (2026-06-12) */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ============================================================
   Shared button variants (2026-06-01) — promoted from bespoke
   per-component controls so molecules/organisms compose the Button
   atom instead of rolling their own. Each consumer keeps only a
   layout hook (grid placement / position:relative) and pulls the
   LOOK from these classes.
   ============================================================ */

/* ---------- Icon-only button (ghost square) ----------
   replaces: composer__icon-btn · app-topbar__icon-btn ·
   alert__close · chart-card__icon-btn */
.btn--icon {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  color: var(--foreground-muted);
  background: transparent;
  border-radius: var(--radius);
}
.btn--icon:hover { background: var(--accent); color: var(--foreground); }
.btn--icon.btn--sm { width: 32px; height: 32px; padding: 0; }
.btn--icon.btn--xs { width: 32px; height: 32px; padding: 0; }
/* 字符 20px（語意階梯 --md）。2026-07-21：原為 16px，在 32／36px 框裡偏小、辨識度不足，
   全站 icon 按鈕一起上調。--xs 原本另寫一條 16px，但它的框跟 --sm 同為 32×32，
   留著會讓同尺寸按鈕出現兩種字符大小，故移除、統一吃這條。 */
.btn--icon .ztor-icon { width: 20px; height: 20px; stroke-width: 1.2; }

/* ---------- Circular icon button (submit / send) ----------
   replaces: composer__send. Add .btn--primary (or .is-active) to flip
   to the orange filled state when there's content to submit. */
.btn--icon-circle {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--muted);
  color: var(--muted-foreground);
}
.btn--icon-circle:hover { background: var(--accent); color: var(--foreground); }
.btn--icon-circle.btn--primary,
.btn--icon-circle.is-active {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn--icon-circle.btn--primary:hover,
.btn--icon-circle.is-active:hover { background: var(--primary-hover); color: var(--primary-foreground); }
.btn--icon-circle .ztor-icon { width: 20px; height: 20px; stroke-width: 1.2; }

/* (Text links — card__link, alert__cta, cookie settings — stay component-owned:
   they differ per context (status color / trailing chevron / no underline), so
   they are NOT forced into a shared atom. Only the icon/send buttons above were
   genuine duplicates worth promoting.) */

@media (prefers-reduced-motion: reduce) {
  .btn--icon, .btn--icon-circle { transition: none; }
}