/* =========================================================
   開源古籍 Kaiyuan Guji · 控件系統
   一個基座（.btn）＋ 三個變體（primary / outline / ghost）＋ 三個尺寸
   規則：
     1. 一屏之內只允許一個實心朱紅按鈕 —— 它就是該屏的主要操作
     2. 所有控件（按鈕、輸入框）共用同一組高度，因此天然對齊
     3. 圓角只有兩個值：控件 8px、卡片 14px；膠囊只留給狀態標籤
   本檔須在 styles.css 與各頁樣式「之後」載入
   ========================================================= */

:root {
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;

  --r-control: 8px;
  --r-card: 14px;
  --r-chip: 999px;

  /* 語義色：與品牌朱紅分開，狀態才用 */
  --ok: #4f9d6b;
  --warn: #c9922f;
  --err: var(--vermilion);
}

html.light-mode {
  --ok: #2f7a4d;
  --warn: #9a6512;
}

/* ---------- 基座 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  height: var(--h-md);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--primary-ink);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermilion) 32%, transparent);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- 變體：邊框寬度恆為 1px，填充與描邊佔位一致，不會跳動 ---------- */
.btn--primary {
  background: var(--vermilion);
  color: #fff;
}

.btn--primary:hover {
  background: var(--vermilion-deep);
  color: #fff;
}

.btn--outline {
  border-color: var(--border);
}

.btn--outline:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  background: color-mix(in srgb, var(--vermilion) 8%, transparent);
}

.btn--ghost {
  color: var(--muted);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--primary-ink) 8%, transparent);
  color: var(--primary-ink);
}

/* ---------- 尺寸 ---------- */
.btn--sm { height: var(--h-sm); padding: 0 12px; font-size: 13.5px; }
.btn--lg { height: var(--h-lg); padding: 0 26px; font-size: 16.5px; }

.btn--icon { width: var(--h-md); padding: 0; }
.btn--icon.btn--sm { width: var(--h-sm); }
.btn--icon.btn--lg { width: var(--h-lg); }

/* ---------- 輸入框：與按鈕同高 ---------- */
.search-input,
.bi-search-input,
.sub-search-input {
  height: var(--h-lg);
  padding: 0 16px;
  border-radius: var(--r-control);
  font-size: 15.5px;
}

.login-input {
  height: var(--h-md);
  padding: 0 14px;
  border-radius: var(--r-control);
  font-size: 15px;
}

.search-input:focus,
.bi-search-input:focus,
.sub-search-input:focus,
.login-input:focus {
  outline: none;
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermilion) 22%, transparent);
}

/* ---------- 下載連結：中性描邊，hover 才點亮語義色 ---------- */
.btn--download:hover {
  border-color: var(--ok);
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}