/* ============================================================
   k09-radicals（部首偵探社）v2 風格覆寫
   年齡層：kids（國語科練習 App）
   自訂屬性 → 權杖對應簡表：
   --ink→--tp-text、--muted→--tp-text-soft、--paper→--tp-bg、--card→--tp-surface、--line→--tp-line
   --primary／--primary-deep→--tp-accent／--tp-accent-strong（主按鈕、選取態、頁籤）
   --accent／--accent-deep→--tp-success（確認鈕）；--accent-2→--tp-info（品牌字、注音、幽靈鈕）
   --ok／--ok-bg→--tp-success(-soft)、--no／--no-bg→--tp-error(-soft)、--hint／--hint-bg→--tp-warning(-soft)
   --radius→--tp-radius-card、--shadow→--tp-shadow-2、--font→--tp-font-sans
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --paper: var(--tp-bg);
  --card: var(--tp-surface);
  --primary: var(--tp-accent-strong);
  --primary-deep: var(--tp-accent-strong);
  --accent: var(--tp-success);
  --accent-deep: var(--tp-success);
  --accent-2: var(--tp-info);
  --gold: var(--tp-warning);
  --line: var(--tp-line);
  --ok: var(--tp-success);
  --ok-bg: var(--tp-success-soft);
  --hint: var(--tp-warning);
  --hint-bg: var(--tp-warning-soft);
  --no: var(--tp-error);
  --no-bg: var(--tp-error-soft);
  --radius: var(--tp-radius-card);
  --shadow: var(--tp-shadow-2);
  --font: var(--tp-font-sans);
}

/* 標題用襯線、部首大字與注音用楷書，統一 kids 層氣質 */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] h3 {
  font-family: var(--tp-font-serif);
}
html[data-tp-theme="v2"] .big-char,
html[data-tp-theme="v2"] .rshow,
html[data-tp-theme="v2"] .zhuyin {
  font-family: var(--tp-font-kai);
}

/* 焦點環改跟 accent 系 */
html[data-tp-theme="v2"] :focus-visible {
  outline-color: var(--tp-focus-ring);
}

/* 寫死色覆寫：現行頁籤淺底 */
html[data-tp-theme="v2"] .tab[aria-current="page"] {
  background: var(--tp-accent-soft);
}

/* 主按鈕與確認鈕：字色跟隨 accent-on，深色自動反轉 */
html[data-tp-theme="v2"] .btn-primary,
html[data-tp-theme="v2"] .btn-ok {
  color: var(--tp-accent-on);
}

/* 拖曳選取態（原青綠寫死底）改跟 accent 系 */
html[data-tp-theme="v2"] .piece.is-held,
html[data-tp-theme="v2"] .chip.is-in,
html[data-tp-theme="v2"] .slot.has {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-soft);
}
html[data-tp-theme="v2"] .basket {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-soft);
}
html[data-tp-theme="v2"] .ghost {
  background: var(--tp-surface);
  border-color: var(--tp-accent-strong);
}

/* 進度條：軌道用深一階紙色，填充用國語科目色 */
html[data-tp-theme="v2"] .progress {
  background: var(--tp-bg-deep);
}
html[data-tp-theme="v2"] .progress > span {
  background: var(--tp-subject-zh);
}

/* 輸入框白面改隨主題 */
html[data-tp-theme="v2"] select,
html[data-tp-theme="v2"] input[type="text"],
html[data-tp-theme="v2"] input[type="number"] {
  background: var(--tp-surface);
}