/* ====================
   按鈕系統 (Button System)
   參考 Bootstrap 架構：獨立變體，每個組合包含完整的 hover / active 狀態。
   特殊情境（如導覽列 .site-nav.is-solid）由外層 class 覆蓋局部屬性，
   按鈕本身不負責情境判斷。

   結構：基底（site-btn）+ 變體 + 尺寸 + 形狀 + 狀態
   變體：Solid / Outline / Ghost，各自搭配色彩寫成獨立 class

   色彩分兩類：
   - 功能色（site-btn-primary 等）：比照 Bootstrap，使用通用色票（variables.css）
   - 品牌色（site-btn-brand-1 等）：使用品牌色變數（brand.css），
     編號代表品牌色組別，非特定顏色，換專案只需改 brand.css 的值
   ==================== */

/* ==================== 基底按鈕 ==================== */
.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: var(--fs-fixed-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.site-btn:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
}

/* ==================== 色彩變體（Solid）==================== */

/* --- Primary (blue) --- */
.site-btn-primary {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
  color: var(--white);
}

.site-btn-primary:hover {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}

.site-btn-primary:active {
  background-color: var(--blue-700);
  border-color: var(--blue-700);
}

/* --- Secondary (slate) --- */
.site-btn-secondary {
  background-color: var(--slate-500);
  border-color: var(--slate-500);
  color: var(--white);
}

.site-btn-secondary:hover {
  background-color: var(--slate-600);
  border-color: var(--slate-600);
  color: var(--white);
}

.site-btn-secondary:active {
  background-color: var(--slate-700);
  border-color: var(--slate-700);
}

/* --- Success (green) --- */
.site-btn-success {
  background-color: var(--green-500);
  border-color: var(--green-500);
  color: var(--white);
}

.site-btn-success:hover {
  background-color: var(--green-600);
  border-color: var(--green-600);
  color: var(--white);
}

.site-btn-success:active {
  background-color: var(--green-700);
  border-color: var(--green-700);
}

/* --- Danger (red) --- */
.site-btn-danger {
  background-color: var(--red-500);
  border-color: var(--red-500);
  color: var(--white);
}

.site-btn-danger:hover {
  background-color: var(--red-600);
  border-color: var(--red-600);
  color: var(--white);
}

.site-btn-danger:active {
  background-color: var(--red-700);
  border-color: var(--red-700);
}

/* --- Warning (amber) --- */
.site-btn-warning {
  background-color: var(--amber-500);
  border-color: var(--amber-500);
  color: var(--gray-900);
}

.site-btn-warning:hover {
  background-color: var(--amber-600);
  border-color: var(--amber-600);
  color: var(--white);
}

.site-btn-warning:active {
  background-color: var(--amber-700);
  border-color: var(--amber-700);
}

/* --- Info (cyan) --- */
.site-btn-info {
  background-color: var(--cyan-500);
  border-color: var(--cyan-500);
  color: var(--white);
}

.site-btn-info:hover {
  background-color: var(--cyan-600);
  border-color: var(--cyan-600);
  color: var(--white);
}

.site-btn-info:active {
  background-color: var(--cyan-700);
  border-color: var(--cyan-700);
}

/* --- Light --- */
.site-btn-light {
  background-color: var(--gray-100);
  border-color: var(--gray-100);
  color: var(--gray-900);
}

.site-btn-light:hover {
  background-color: var(--gray-200);
  border-color: var(--gray-200);
  color: var(--gray-900);
}

.site-btn-light:active {
  background-color: var(--gray-300);
  border-color: var(--gray-300);
}

/* --- Dark --- */
.site-btn-dark {
  background-color: var(--gray-900);
  border-color: var(--gray-900);
  color: var(--white);
}

.site-btn-dark:hover {
  background-color: var(--gray-700);
  border-color: var(--gray-700);
  color: var(--white);
}

.site-btn-dark:active {
  background-color: var(--gray-950);
  border-color: var(--gray-950);
}

/* ==================== 品牌色變體（Brand）==================== */

/* --- Brand 1 --- */
.site-btn-brand-1 {
  background-color: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--white);
}

.site-btn-brand-1:hover {
  background-color: var(--brand-1-hover);
  border-color: var(--brand-1-hover);
  color: var(--white);
}

.site-btn-brand-1:active {
  background-color: var(--brand-1-active);
  border-color: var(--brand-1-active);
}

/* --- Brand 2 --- */
.site-btn-brand-2 {
  background-color: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--white);
}

.site-btn-brand-2:hover {
  background-color: var(--brand-2-hover);
  border-color: var(--brand-2-hover);
  color: var(--white);
}

.site-btn-brand-2:active {
  background-color: var(--brand-2-active);
  border-color: var(--brand-2-active);
}

/* ==================== 色彩變體（Outline）==================== */
.site-btn-outline {
  background-color: transparent;
  border-color: var(--gray-300);
  color: var(--gray-700);
}

.site-btn-outline:hover {
  background-color: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--white);
}

.site-btn-outline:active {
  background-color: var(--brand-1-active);
  border-color: var(--brand-1-active);
}

/* --- Outline Brand 1 --- */
.site-btn-outline-brand-1 {
  background-color: transparent;
  border-color: var(--brand-1);
  color: var(--brand-1);
}

.site-btn-outline-brand-1:hover {
  background-color: var(--brand-1);
  border-color: var(--brand-1);
  color: var(--white);
}

.site-btn-outline-brand-1:active {
  background-color: var(--brand-1-active);
  border-color: var(--brand-1-active);
}

/* --- Outline Brand 2 --- */
.site-btn-outline-brand-2 {
  background-color: transparent;
  border-color: var(--brand-2);
  color: var(--brand-2);
}

.site-btn-outline-brand-2:hover {
  background-color: var(--brand-2);
  border-color: var(--brand-2);
  color: var(--white);
}

.site-btn-outline-brand-2:active {
  background-color: var(--brand-2-active);
  border-color: var(--brand-2-active);
}

/* --- Outline Dark --- */
.site-btn-outline-dark {
  background-color: transparent;
  border-color: var(--gray-900);
  color: var(--gray-900);
}

.site-btn-outline-dark:hover {
  background-color: var(--gray-900);
  border-color: var(--gray-900);
  color: var(--white);
}

.site-btn-outline-dark:active {
  background-color: var(--gray-700);
  border-color: var(--gray-700);
}

/* --- Outline White（深色背景用）--- */
.site-btn-outline-white {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

.site-btn-outline-white:hover {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--gray-900);
}

.site-btn-outline-white:active {
  background-color: var(--gray-100);
  border-color: var(--gray-100);
}

/* ==================== Ghost（無邊框透明底）==================== */

/* --- Ghost Brand 1 --- */
.site-btn-ghost-brand-1 {
  background-color: transparent;
  border-color: transparent;
  color: var(--brand-1);
}

.site-btn-ghost-brand-1:hover {
  background-color: var(--brand-1-50);
  color: var(--brand-1-hover);
}

.site-btn-ghost-brand-1:active {
  background-color: var(--brand-1-100);
}

/* --- Ghost Brand 2 --- */
.site-btn-ghost-brand-2 {
  background-color: transparent;
  border-color: transparent;
  color: var(--brand-2);
}

.site-btn-ghost-brand-2:hover {
  background-color: var(--brand-2-50);
  color: var(--brand-2-hover);
}

.site-btn-ghost-brand-2:active {
  background-color: var(--brand-2-100);
}

/* --- Ghost White（深色背景用）--- */
.site-btn-ghost-white {
  background-color: transparent;
  border-color: transparent;
  color: var(--white);
}

.site-btn-ghost-white:hover {
  background-color: color-mix(in srgb, var(--white) 15%, transparent);
  color: var(--white);
}

.site-btn-ghost-white:active {
  background-color: color-mix(in srgb, var(--white) 25%, transparent);
}

/* ==================== 尺寸變體 ==================== */
.site-btn-sm {
  padding: 4px 12px;
  font-size: var(--fs-fixed-xs);
  border-radius: var(--border-radius-sm);
}

.site-btn-lg {
  padding: 12px 28px;
  font-size: var(--fs-fixed-base);
  font-weight: var(--fw-semibold);
  border-radius: var(--border-radius-lg);
}

/* ==================== 形狀修飾 ==================== */
.site-btn-square {
  border-radius: 0;
}

.site-btn-pill {
  border-radius: var(--border-radius-pill);
}

/* ==================== 全寬按鈕 ==================== */
.site-btn-block {
  display: flex;
  width: 100%;
}

/* ==================== 圖示按鈕（僅圖示，正方形）==================== */
.site-btn-icon {
  padding: 8px;
  aspect-ratio: 1;
}

.site-btn-icon.site-btn-sm {
  padding: 4px;
}

.site-btn-icon.site-btn-lg {
  padding: 12px;
}

/* ==================== 狀態 ==================== */

/* --- Disabled --- */
.site-btn:disabled,
.site-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* --- Loading --- */
.site-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.site-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: site-btn-spin 0.6s linear infinite;
}

/* loading 時讓 spinner 繼承按鈕的文字色 */
.site-btn-primary.is-loading::after,
.site-btn-brand-1.is-loading::after,
.site-btn-brand-2.is-loading::after,
.site-btn-dark.is-loading::after {
  border-color: var(--white);
  border-right-color: transparent;
}

@keyframes site-btn-spin {
  to {
    transform: rotate(360deg);
  }
}