/* =============================================================================
 * tl-buttons.css — TrueLink 共用「crafted」按鈕系統（B2B / 企業級）
 * 建立 2026-07-04 by Claude · 用 tl-tokens.css 的 --tl-* / --tl-btn2-* 單一來源
 *
 * 為什麼另立這支（痛點：現有按鈕「太像 AI 生成」）：
 *   舊按鈕 = 通用圓角(8/10/12/16px 到處混) + 單色平填 + 只會 hover 變暗/位移 +
 *            無層級 + 無 focus ring + 無 active tactile + 硬編 hex。
 *   這支把它治成：
 *     ① 清楚層級：primary（金 CTA·hero）→ secondary（navy）→ ghost/tertiary → danger。
 *        一畫面最多一個 .tl-btn--primary。
 *     ② 品牌語言：色全走 --tl-*（navy/green/gold）；字 --tl-font-sans；label 帶
 *        weight 800 + 適度 letter-spacing 顯份量；圓角刻意「克制」= 6px（--tl-radius-sm）。
 *     ③ 真狀態回饋：hover = 提亮 + 位移 + 邊框強化 + 品牌色陰影（非只變暗）；
 *        active = 沉色 + 位移歸零/內縮（tactile）；focus-visible = 設計過的雙層 ring；
 *        disabled 誠實（降透明 + not-allowed + 抽掉 hover）。
 *     ④ 微互動：icon 與 label 間距一致；transition 走 token；尊重 reduced-motion。
 *     ⑤ 尺寸刻度 sm / md / lg 一致；.tl-btn--block 滿寬；.tl-btn__icon 圖示槽。
 *
 * 可換色（服務線 theming）：色從 token 來、不硬編 → 覆寫 --tl-logo-*（或 --tl-brand-*）
 *   即整體換色。範例：某服務線 :root{ --tl-brand-navy:#7c3aed } → secondary 立刻變紫。
 *
 * 用法：<link rel="stylesheet" href="/global/tl-tokens.css">（必須先載）
 *       <link rel="stylesheet" href="/global/tl-buttons.css">
 *   <a class="tl-btn tl-btn--primary tl-btn--lg">
 *     <i class="fas fa-calendar-check tl-btn__icon" aria-hidden="true"></i> 預約診斷
 *   </a>
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * BASE — .tl-btn
 * 所有變體共用的骨架。故意「方正、有份量、可點」——不是圓潤 pill。
 * --------------------------------------------------------------------------- */
.tl-btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tl-space-2);                 /* icon ↔ label 一致間距 */
  vertical-align: middle;
  box-sizing: border-box;

  /* sizing（預設 = md） */
  min-height: var(--tl-btn2-min-h);       /* 44px tap target */
  padding: var(--tl-btn2-md-pad-y) var(--tl-btn2-md-pad-x);

  /* typography — label 有份量 */
  font-family: var(--tl-font-sans);
  font-size: var(--tl-btn2-md-font);
  font-weight: var(--tl-btn2-weight);     /* 800 */
  line-height: 1;
  letter-spacing: var(--tl-btn2-tracking);
  white-space: nowrap;
  text-decoration: none;

  /* shape — 圓角克制（企業級）＋ 金屬立體邊 */
  border: var(--tl-btn2-border-w) solid transparent;
  border-radius: var(--tl-btn2-radius);   /* 6px · 刻意、不過圓 */

  /* base surface（未指定變體時的中性描邊底；避免「裸」按鈕） */
  color: var(--tl-text);
  background: var(--tl-bg-elevated);
  border-color: var(--tl-border);

  /* interaction */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;               /* focus ring 用 ::after 疊；lift 有定位基準 */
  isolation: isolate;

  /* motion — 分項過場（走 token；reduced-motion 時 token=1ms 幾乎瞬間） */
  transition:
    background-color var(--tl-duration-normal) var(--tl-ease-standard),
    border-color     var(--tl-duration-normal) var(--tl-ease-standard),
    color            var(--tl-duration-normal) var(--tl-ease-standard),
    box-shadow       var(--tl-duration-normal) var(--tl-ease-standard),
    transform        var(--tl-duration-fast)   var(--tl-ease-standard);
}

/* 讓 <button> / <a> 兩種標記外觀一致（清掉 UA 預設） */
button.tl-btn { font: inherit; font-weight: var(--tl-btn2-weight); background-clip: padding-box; }

/* icon 槽：固定視覺重心，label 為主、icon 為輔 */
.tl-btn__icon { font-size: 0.95em; line-height: 0; flex: 0 0 auto; }
.tl-btn__icon svg { width: 1em; height: 1em; display: block; fill: currentColor; }

/* 中性 base 的 hover / active（未加變體時也體面） */
.tl-btn:hover {
  border-color: var(--tl-border-strong);
  background: var(--tl-bg-elevated-2);
  transform: translateY(-1px);
  box-shadow: var(--tl-shadow-md);
}
.tl-btn:active { transform: translateY(0); box-shadow: var(--tl-shadow-sm); }

/* -----------------------------------------------------------------------------
 * FOCUS-VISIBLE — 設計過的雙層 ring（非瀏覽器預設 outline）
 * 用 box-shadow 疊「offset gap + 品牌 ring」，鍵盤導覽清楚、滑鼠點不觸發。
 * gap 用 --tl-bg（本頁底色）；淺頁掛 tl-theme-light 即為白 gap、深頁為深 gap。
 * 顏色直接讀來源 token → 服務線覆寫 --tl-gold-500 / --tl-brand-navy 時 ring 也跟著換。
 * --------------------------------------------------------------------------- */
.tl-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--tl-ring-offset) var(--tl-bg),
    0 0 0 calc(var(--tl-ring-offset) + var(--tl-ring-width) + 1px) var(--tl-ring);
}
/* 各變體 focus ring 用「自己的品牌色」而非通用青，層級感更強 */
.tl-btn--primary:focus-visible {
  box-shadow:
    0 0 0 var(--tl-ring-offset) var(--tl-bg),
    0 0 0 calc(var(--tl-ring-offset) + var(--tl-ring-width) + 1px) var(--tl-gold-500);
}
.tl-btn--danger:focus-visible {
  box-shadow:
    0 0 0 var(--tl-ring-offset) var(--tl-bg),
    0 0 0 calc(var(--tl-ring-offset) + var(--tl-ring-width) + 1px) var(--tl-red-600);
}

/* -----------------------------------------------------------------------------
 * VARIANT — PRIMARY（金 · hero CTA · 一畫面最多一個）
 * 亮金底 + 深墨字＝像「鑄印/獎章」而非平填；下緣暗金邊給金屬立體感。
 * 上色**直接讀 --tl-gold-*（來源 primitive）**：服務線覆寫 --tl-gold-500 等即整體換色。
 * --------------------------------------------------------------------------- */
.tl-btn--primary {
  background: var(--tl-gold-500);
  color: var(--tl-slate-950);              /* 深墨字 · 對亮金 ≈ 9.6:1（AAA） */
  border-color: var(--tl-gold-700);        /* 金屬下緣邊 · 立體感 */
  /* 底部較深的 inset 邊＝「按鍵頂面」立體感（純加法、無圖片） */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(var(--tl-gold-rgb), 0.25);
}
.tl-btn--primary:hover {
  background: var(--tl-gold-300);          /* hover 提亮（非變暗） */
  border-color: var(--tl-gold-300);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 18px rgba(var(--tl-gold-rgb), 0.42);  /* 品牌金光暈陰影 */
}
.tl-btn--primary:active {
  background: var(--tl-gold-700);          /* active 沉色 */
  border-color: var(--tl-gold-700);
  color: var(--tl-white);                  /* 沉色金上改白字保對比 */
  transform: translateY(1px);              /* 下壓 tactile */
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(var(--tl-gold-rgb), 0.20);
}

/* -----------------------------------------------------------------------------
 * VARIANT — SECONDARY（navy · 品牌主色 · 次要主動作）
 * 上色**直接讀 --tl-brand-navy / --tl-sky-700**：服務線覆寫 --tl-brand-navy 即換色。
 * --------------------------------------------------------------------------- */
.tl-btn--secondary {
  background: var(--tl-brand-navy);
  color: var(--tl-white);                  /* navy #1B4C92 對白 ≈ 8.4:1（AAA） */
  border-color: var(--tl-brand-navy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(var(--tl-brand-navy-rgb), 0.30);
}
.tl-btn--secondary:hover {
  background: var(--tl-sky-700);           /* 提亮一階（對白 ≈ 5.9:1） */
  border-color: var(--tl-sky-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--tl-brand-navy-rgb), 0.40);
}
.tl-btn--secondary:active {
  background: var(--tl-sky-800, #075985);  /* 沉色（sky-800 · fallback 給缺該 token 的情況） */
  border-color: var(--tl-sky-800, #075985);
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.30);
}
.tl-btn--secondary:focus-visible {
  box-shadow:
    0 0 0 var(--tl-ring-offset) var(--tl-bg),
    0 0 0 calc(var(--tl-ring-offset) + var(--tl-ring-width) + 1px) var(--tl-brand-navy);
}

/* -----------------------------------------------------------------------------
 * VARIANT — GHOST / TERTIARY（描邊 · 透明底 · 最低視覺重量）
 * hover 才「顯形」：淡底 + 品牌金邊；不搶主 CTA。
 * --------------------------------------------------------------------------- */
.tl-btn--ghost {
  background: transparent;
  color: var(--tl-text);                   /* 依當前主題語意（深/淺自動跟） */
  border-color: var(--tl-border-strong);
  box-shadow: none;
}
.tl-btn--ghost:hover {
  background: var(--tl-bg-elevated-2);
  border-color: var(--tl-gold-500);        /* hover 用品牌金點題（服務線換色跟著換） */
  color: var(--tl-gold-strong);
  transform: translateY(-1px);
  box-shadow: var(--tl-shadow-sm);
}
.tl-btn--ghost:active {
  transform: translateY(0);
  background: var(--tl-bg-elevated);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* .tl-btn--tertiary = ghost 的別名（語意用；行為同 ghost 但更弱＝無邊） */
.tl-btn--tertiary {
  background: transparent;
  color: var(--tl-text-muted);
  border-color: transparent;
  box-shadow: none;
  padding-left: var(--tl-space-3);
  padding-right: var(--tl-space-3);
}
.tl-btn--tertiary:hover {
  color: var(--tl-text);
  background: var(--tl-bg-elevated-2);
  transform: none;
  box-shadow: none;
}
.tl-btn--tertiary:active { background: var(--tl-bg-elevated); }

/* -----------------------------------------------------------------------------
 * VARIANT — DANGER（紅 · 破壞性動作 · 誠實高風險）
 * --------------------------------------------------------------------------- */
.tl-btn--danger {
  /* fill 用 red-600（對白 ≈ 4.8:1 · 過 AA 一般字）而非 red-500（3.8:1 不足） */
  background: var(--tl-red-600);
  color: var(--tl-white);
  border-color: var(--tl-red-600);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(220, 38, 38, 0.30);
}
.tl-btn--danger:hover {
  background: var(--tl-red-500);           /* hover 提亮一階 */
  border-color: var(--tl-red-500);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.42);
}
.tl-btn--danger:active {
  background: #b91c1c;                      /* red-700 · 沉色（對白 ≈ 6.5:1） */
  border-color: #b91c1c;
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* -----------------------------------------------------------------------------
 * SIZES — sm / md(預設) / lg（padding + 字級 + tap 高度一致刻度）
 * --------------------------------------------------------------------------- */
.tl-btn--sm {
  min-height: var(--tl-btn2-sm-min-h);
  padding: var(--tl-btn2-sm-pad-y) var(--tl-btn2-sm-pad-x);
  font-size: var(--tl-btn2-sm-font);
  border-radius: var(--tl-radius-xs);   /* 小按鈕圓角再收一階＝更利落 */
  gap: var(--tl-space-1);
}
.tl-btn--lg {
  min-height: var(--tl-btn2-lg-min-h);
  padding: var(--tl-btn2-lg-pad-y) var(--tl-btn2-lg-pad-x);
  font-size: var(--tl-btn2-lg-font);
  gap: var(--tl-space-3);
}

/* -----------------------------------------------------------------------------
 * MODIFIERS — block（滿寬）/ icon-only（方形）
 * --------------------------------------------------------------------------- */
.tl-btn--block { display: flex; width: 100%; }

.tl-btn--icon-only {
  padding-left: 0;
  padding-right: 0;
  width: var(--tl-btn2-min-h);
  aspect-ratio: 1 / 1;
  gap: 0;
}
.tl-btn--icon-only.tl-btn--sm { width: var(--tl-btn2-sm-min-h); }
.tl-btn--icon-only.tl-btn--lg { width: var(--tl-btn2-lg-min-h); }

/* -----------------------------------------------------------------------------
 * DISABLED / LOADING — 誠實回饋
 * 用屬性 + class 雙管：<button disabled> / [aria-disabled="true"] / .is-loading
 * --------------------------------------------------------------------------- */
.tl-btn:disabled,
.tl-btn[disabled],
.tl-btn[aria-disabled="true"],
.tl-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  filter: saturate(0.7);
  box-shadow: none;
  transform: none;
  pointer-events: none;   /* 連結型也擋掉點擊（<a> 無原生 disabled） */
}
/* disabled 時抽掉所有 hover/active 動態（保險，避免疊加變體 hover 規則） */
.tl-btn:disabled:hover,
.tl-btn[disabled]:hover,
.tl-btn[aria-disabled="true"]:hover,
.tl-btn.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* loading：spinner 佔位 + 文字降透明；配合 <i class="fas fa-circle-notch fa-spin"> */
.tl-btn.is-loading { cursor: progress; pointer-events: none; }
.tl-btn.is-loading .tl-btn__label { opacity: 0.6; }

/* -----------------------------------------------------------------------------
 * REDUCED MOTION — 尊重使用者偏好（token 已把 duration→1ms；這裡再保險清 transform）
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tl-btn,
  .tl-btn:hover,
  .tl-btn:active {
    transition: background-color 1ms linear, border-color 1ms linear, box-shadow 1ms linear;
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
 * GROUP — 一排按鈕的一致間距（可選；用 <div class="tl-btn-group">）
 * --------------------------------------------------------------------------- */
.tl-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--tl-space-3);
  align-items: center;
}
