/* app20-reading（閱讀小天地）— v2 主題覆寫
   年齡層：kids（朱砂強調、大圓角、溫暖圓潤）。
   對應：--c-ink→--tp-text、--c-ink-soft→--tp-text-soft、--c-paper→--tp-bg、--c-card→--tp-surface、--c-line→--tp-line。
   對應：--c-primary→--tp-accent、--c-primary-d→--tp-accent-strong、--c-primary-s→--tp-accent-soft、--font→--tp-font-sans。
   對應：--c-secondary→--tp-success、--c-accent→--tp-info（淺底接 --tp-subject-math-soft）、--c-ok→--tp-success、--c-bad→--tp-error。
   對應：--c-star→--tp-warning、--c-mark→--tp-warning-soft、--sh-sm→--tp-shadow-1、--sh-md→--tp-shadow-2、--r-*→--tp-radius-*。 */

/* 一、自訂屬性整批轉向 v2 權杖（深色由 tokens 自動切換） */
html[data-tp-theme="v2"]:root {
  --c-ink: var(--tp-text);
  --c-ink-soft: var(--tp-text-soft);
  --c-paper: var(--tp-bg);
  --c-card: var(--tp-surface);
  --c-line: var(--tp-line);
  --c-primary: var(--tp-accent-strong);
  --c-primary-d: var(--tp-accent-strong);
  --c-primary-s: var(--tp-accent-soft);
  --c-secondary: var(--tp-success);
  --c-secondary-s: var(--tp-success-soft);
  --c-accent: var(--tp-info);
  --c-accent-s: var(--tp-subject-math-soft);
  --c-ok: var(--tp-success);
  --c-ok-s: var(--tp-success-soft);
  --c-bad: var(--tp-error);
  --c-bad-s: var(--tp-error-soft);
  --c-star: var(--tp-warning);
  --c-mark: var(--tp-warning-soft);
  --sh-sm: var(--tp-shadow-1);
  --sh-md: var(--tp-shadow-2);
  --r-sm: var(--tp-radius-ctl);
  --r-md: var(--tp-radius-card);
  --r-lg: var(--tp-radius-card);
  --r-pill: var(--tp-radius-chip);
  --font: var(--tp-font-sans);
}

/* 二、標題換襯線大標字重 */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] h3 {
  font-family: var(--tp-font-serif);
  font-weight: var(--tp-display-weight);
}

/* 三、聚焦、選取、占位文字對齊 */
html[data-tp-theme="v2"] :focus-visible {
  outline: 3px solid var(--tp-focus-ring);
}
html[data-tp-theme="v2"] ::selection {
  background: var(--tp-accent-soft);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] ::placeholder {
  color: var(--tp-text-faint);
}

/* 四、主色底上的寫死白字改接 accent-on（含 topbar 與按鈕） */
html[data-tp-theme="v2"] .topbar {
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .brand {
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn {
  color: var(--tp-accent-on);
}
/* 主按鈕原用 --c-primary-d（accent-strong）實心，底色改 accent、hover/active 才用 accent-strong；
   secondary／ghost／light 次要變體維持原樣 */
html[data-tp-theme="v2"] .btn:not(.secondary):not(.ghost):not(.light) {
  background: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .btn:not(.secondary):not(.ghost):not(.light):hover,
html[data-tp-theme="v2"] .btn:not(.secondary):not(.ghost):not(.light):active {
  background: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .btn.ghost {
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .btn.light {
  color: var(--tp-accent-on);
  border-color: var(--tp-accent-on);
}

/* 五、寫死底色的元件改接表面權杖 */
html[data-tp-theme="v2"] .passage-body {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .track {
  background: var(--tp-bg-deep);
}
html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .order-item {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .choice.is-picked {
  border-color: var(--c-accent);
  background: var(--c-accent-s);
}
html[data-tp-theme="v2"] .choice.is-right {
  border-color: var(--c-ok);
  background: var(--c-ok-s);
}
html[data-tp-theme="v2"] .choice.is-wrong {
  border-color: var(--c-bad);
  background: var(--c-bad-s);
}
html[data-tp-theme="v2"] .dropzone.over {
  background: var(--tp-accent-soft);
}
html[data-tp-theme="v2"] input[type="text"],
html[data-tp-theme="v2"] input[type="number"],
html[data-tp-theme="v2"] select,
html[data-tp-theme="v2"] textarea {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .check {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .rec {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .star {
  fill: var(--tp-line);
}

/* 六、列印學習單（螢幕上亦顯示）對齊紙面權杖 */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-text);
  border-top-color: var(--tp-accent-strong);
}