/* ============================================================
   yizi-yiri（一字一日）— v2 風格覆寫
   年齡層：kids（國小）　科目：國語生字（--tp-subject-zh）
   自訂屬性→權杖對應簡表：
   --bg→--tp-bg；--card→--tp-surface；--line→--tp-line；--muted→--tp-text-soft
   --ink→--tp-text；--ink-soft→--tp-text-soft；--good→--tp-success
   --accent→--tp-accent（與國語科目色同系）；--accent-soft→--tp-accent-soft
   --grid→--tpz-grid（田字格線）；注音／生字楷體→--tp-font-kai
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --bg: var(--tp-bg);
  --ink: var(--tp-text);
  --ink-soft: var(--tp-text-soft);
  --accent: var(--tp-accent-strong);
  --accent-soft: var(--tp-accent-soft);
  --card: var(--tp-surface);
  --line: var(--tp-line);
  --grid: var(--tpz-grid);
  --good: var(--tp-success);
  --muted: var(--tp-text-soft);
}

/*  全站內文字體  */
html[data-tp-theme="v2"] body {
  font-family: var(--tp-font-sans);
}

/*  標題換襯線  */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2 {
  font-family: var(--tp-font-serif);
}

/*  頁首：墨底白字；--ink 已指墨色，白字改指紙色讓深色自動反轉  */
html[data-tp-theme="v2"] header {
  background: var(--tp-text);
  color: var(--tp-bg);
}

/*  導航列與下拉選單  */
html[data-tp-theme="v2"] nav {
  background: var(--tp-surface);
  border-bottom-color: var(--tp-line);
}
html[data-tp-theme="v2"] nav button.on {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] select {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
}

/*  卡片：圓角與陰影對齊 kids 層  */
html[data-tp-theme="v2"] .card {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-shadow-1);
}

/*  徽章：淺朱砂底＋深朱砂字  */
html[data-tp-theme="v2"] .badge {
  background: var(--tp-accent-soft);
  color: var(--tp-accent-text);
}

/*  生字 chip：hover 實底白字  */
html[data-tp-theme="v2"] .chip {
  background: var(--tp-accent-soft);
  color: var(--tp-text);
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .chip:hover {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

/*  課次清單  */
html[data-tp-theme="v2"] .lessonitem {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-ctl);
}
html[data-tp-theme="v2"] .lessonitem:hover {
  border-color: var(--tp-accent-strong);
  box-shadow: var(--tp-shadow-2);
}
html[data-tp-theme="v2"] .lessonitem.now {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-softer);
}
html[data-tp-theme="v2"] .lessonitem .no {
  color: var(--tp-accent-text);
}

/*  字卡與大字格  */
html[data-tp-theme="v2"] .charcard {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
}
html[data-tp-theme="v2"] .charbig {
  background: var(--tp-bg-deep);
  font-family: var(--tp-font-kai);
}
html[data-tp-theme="v2"] .charcard a {
  color: var(--tp-accent-text);
}

/*  注音與生字：楷體  */
html[data-tp-theme="v2"] .zy,
html[data-tp-theme="v2"] .zycol,
html[data-tp-theme="v2"] .wordblank .wzy {
  font-family: var(--tp-font-kai);
}
html[data-tp-theme="v2"] .zycol {
  border-color: var(--tp-text-faint);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .wordblank .wzy {
  color: var(--tp-text);
}

/*  收藏星：未選用淡墨色  */
html[data-tp-theme="v2"] .star {
  color: var(--tp-text-faint);
}
html[data-tp-theme="v2"] .star.on {
  color: var(--tp-accent-strong);
}

/*  主按鈕：朱砂底＋白字，hover 加深  */
html[data-tp-theme="v2"] .btn {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  border-radius: var(--tp-radius-ctl);
}
html[data-tp-theme="v2"] .btn:hover {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn.ghost {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
}

/*  搜尋框  */
html[data-tp-theme="v2"] .searchbox input {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
  caret-color: var(--tp-accent-strong);
}

/*  測驗卷：白底改表面色  */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface);
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .sheet .meta {
  color: var(--tp-text-soft);
}
html[data-tp-theme="v2"] .anspage {
  border-top-color: var(--tp-line-strong);
}

/*  田字格外框與填入答案（紅字改深朱砂保對比）  */
html[data-tp-theme="v2"] .tian {
  border-color: var(--tpz-cell-border);
}
html[data-tp-theme="v2"] .tian .ans {
  color: var(--tp-accent-text);
}

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