/* ============================================================================
聽摘 TingZhai — 元件變體制 (Component Variants)
----------------------------------------------------------------------------
這支檔案是全站按鈕／卡片／標籤的唯一定義來源。
為什麼要有它（收斂前實測的數字，2026-08-12）：
.btn 散在 6 個檔案共 40 個規則塊
（styles.css×15、faq×8、sync×8、landing-b×5、welcome×3、episode×1）
padding 至少四種：9px 20px／10px 20px／10px 24px／11px 26px
── 同一顆「開啟 App」在不同頁大小就是不一樣
同一件事有三種命名：.outline／.btn-outline／.ghost
.card 在 2 個檔案各寫一份、.chip 在 landing-b 與 deck 各長一套
----------------------------------------------------------------------------
怎麼用（借 shadcn cva 的結構，但一行框架都沒有）：
主要動作 基底＝主要按鈕
次要動作 外框
最弱動作 幽靈（只有框線）
危險
尺寸：sm ／（不加）md ／ lg
舊 class 名一律照舊有效，HTML 一個字都不用改：
.btn.outline ＝ .btn.btn-outline ＝ .btn--outline
.btn.ghost ＝ .btn--ghost
.btn.danger ＝ .btn--danger
.btn.small ＝ .btn--sm
.btn.btn-big ＝ .btn--lg
----------------------------------------------------------------------------
兩個設計決定，先講清楚免得後人踩雷：
1. 皮膚跟著主題走，不是跟著頁面走。
行銷頁（faq／sync／welcome／landing-b）＝淺色， 上沒有 data-theme；
App 頁（index／episode／…）＝深色，。
所以皮膚寫成 :where(html:not([data-theme])) 與 :where(html[data-theme="dark"])。
用 :where() 是刻意的：它把選擇器權重壓成 0，主題皮膚跟變體一樣都是 (0,1,0)，
誰在後面誰贏，順序即優先序，不會出現「主題把變體蓋掉」這種難查的坑。
2. 變體只改 --btn-* 這組元件變數，不直接寫 background／color。
基底一次把 var(--btn-*) 接到真正的屬性上，變體與各頁覆寫只要改變數。
這樣「頁面專屬覆寫」也能安全參與（例如 landing-b 的主色按鈕），
不會因為某一層寫死 box-shadow 而把 ghost 的「不要陰影」蓋回去。
----------------------------------------------------------------------------
載入順序：tokens.css → components.css → styles.css／該頁