/* ==========================================================================
   阿渡 · 三國志知識庫 — 品牌設計令牌 v1.0
   全站首先引入，其他樣式透過 var(--brand-*) 引用。
   更新品牌色：改這裡 → 重跑 build_seo.py（premium.html 已自動引入）。
   ========================================================================== */

:root {
  /* ── 品牌核心色 ───────────────────────────────────────────── */
  --brand-ink:        #2B2019;   /* 墨棕：標題 / 正文 / Logo 字體 */
  --brand-vermilion:  #8B0000;   /* 朱紅：印章 / 主 CTA / 強調 */
  --brand-paper:      #FBF8F1;   /* 紙色：頁面背景（米白帶暖） */
  --brand-gold:       #B8860B;   /* 金色：點綴 / OG 圖分割線 / 輔助 CTA hover */

  /* ── 語義輔色 ───────────────────────────────────────────── */
  --color-muted:       #6B5B4B;   /* 副標題 / 說明 */
  --color-faint:       #9B8B7B;   /* 最弱提示 */
  --color-line:        #E2D6C4;   /* 細分隔 / 卡片邊框 */
  --color-line-strong: #D0BDA3;   /* 粗分隔 / 表格標題底 */
  --color-card:        #FFFDF8;   /* 卡片底色 */
  --color-ok:          #2F6B3A;   /* 成功提示 */
  --color-err:         #A00000;   /* 錯誤提示（比朱紅略亮） */

  /* ── 字體棧 ───────────────────────────────────────────── */
  --font-serif: "Songti SC", "Noto Serif TC", "Noto Serif SC", "SimSun", serif;
  --font-ui:    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-en:    "Georgia", "Times New Roman", serif;

  /* ── 間距 ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;

  /* ── 圓角 / 陰影 ───────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(43,32,25,0.06);

  /* ── 默認值 ───────────────────────────────────────────── */
  color-scheme: light;
}

/* ==========================================================================
   全站基礎（body / 默認字體 / 紙色底）
   ========================================================================== */

html, body {
  background: var(--brand-paper);
  color: var(--brand-ink);
  font-family: var(--font-serif);
}

a { color: var(--brand-vermilion); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   按鈕（.btn-primary / .btn-ghost）
   ========================================================================== */

.btn-primary,
.btn-ghost {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary {
  background: var(--brand-vermilion);
  color: var(--brand-paper);
  border-color: var(--brand-vermilion);
}
.btn-primary:hover { background: #A80000; }

.btn-ghost {
  background: transparent;
  color: var(--brand-vermilion);
  border-color: var(--brand-vermilion);
}
.btn-ghost:hover { background: rgba(139,0,0,0.06); }

/* ==========================================================================
   品牌標識（.brand-lockup / .brand-wordmark）
   ========================================================================== */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-lockup:hover { text-decoration: none; }
.brand-lockup .brand-seal {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--brand-vermilion);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-paper);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
.brand-lockup .brand-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: 1px;
}

/* ==========================================================================
   卡片（.card / .plan）
   ========================================================================== */

.card,
.plan {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   簡繁切換按鈕（.t2s-toggle 令牌化）
   ========================================================================== */

#t2s-toggle {
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--brand-ink);
  border-radius: 50% !important;
}
#t2s-toggle:hover {
  background: var(--brand-vermilion);
  color: var(--brand-paper);
  border-color: var(--brand-vermilion);
}
#t2s-toggle[aria-pressed="true"] {
  background: var(--brand-vermilion);
  border-color: var(--brand-vermilion);
  color: var(--brand-paper);
}