/* ============================================================
   k12-phonics（自然發音樂園）v2 風格覆寫
   年齡層：kids（英語科練習 App）
   自訂屬性 → 權杖對應簡表：
   --c-paper→--tp-bg、--c-surface→--tp-surface、--c-line→--tp-line
   --c-ink→--tp-text、--c-ink-soft→--tp-text-soft
   --c-primary／--c-primary-dark／--c-primary-soft→--tp-accent／--tp-accent-strong／--tp-accent-soft（主按鈕、選取態）
   --c-secondary(-dark/-soft)→--tp-success(-soft)（次按鈕、進度條、投放區；色值同英語科目色）
   --c-accent(-dark/-soft)→--tp-warning(-soft)（星星、焦點）；--c-ok(-soft)→--tp-success(-soft)、--c-no(-soft)→--tp-error(-soft)、--c-hint→--tp-warning-soft
   --r-sm→--tp-radius-ctl、--r-md→--tp-radius-card、--r-lg→--tp-radius-xl、--shadow→--tp-shadow-2、--shadow-lift→--tp-shadow-lift、--font→--tp-font-sans
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --c-primary: var(--tp-accent-strong);
  --c-primary-dark: var(--tp-accent-strong);
  --c-primary-soft: var(--tp-accent-soft);
  --c-secondary: var(--tp-success);
  --c-secondary-dark: var(--tp-success);
  --c-secondary-soft: var(--tp-success-soft);
  --c-accent: var(--tp-warning);
  --c-accent-dark: var(--tp-warning);
  --c-accent-soft: var(--tp-warning-soft);
  --c-ink: var(--tp-text);
  --c-ink-soft: var(--tp-text-soft);
  --c-paper: var(--tp-bg);
  --c-surface: var(--tp-surface);
  --c-line: var(--tp-line);
  --c-ok: var(--tp-success);
  --c-ok-soft: var(--tp-success-soft);
  --c-no: var(--tp-error);
  --c-no-soft: var(--tp-error-soft);
  --c-hint: var(--tp-warning-soft);
  --r-sm: var(--tp-radius-ctl);
  --r-md: var(--tp-radius-card);
  --r-lg: var(--tp-radius-xl);
  --shadow: var(--tp-shadow-2);
  --shadow-lift: var(--tp-shadow-lift);
  --font: var(--tp-font-sans);
}

/* 標題用襯線，與同層國語 App 一致 */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] h3 {
  font-family: var(--tp-font-serif);
}

/* 焦點環改跟 accent 系（原為金色外框） */
html[data-tp-theme="v2"] .icon-btn:focus-visible,
html[data-tp-theme="v2"] .btn:focus-visible,
html[data-tp-theme="v2"] .choice:focus-visible,
html[data-tp-theme="v2"] .tile:focus-visible,
html[data-tp-theme="v2"] select:focus-visible,
html[data-tp-theme="v2"] input:focus-visible {
  outline-color: var(--tp-focus-ring);
}

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

/* 寫死白面覆寫：選項、字磚、落格、輸入框、清單卡、按鍵帽、拖曳幽靈 */
html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .tile,
html[data-tp-theme="v2"] .slot,
html[data-tp-theme="v2"] select,
html[data-tp-theme="v2"] input[type="text"],
html[data-tp-theme="v2"] input[type="number"],
html[data-tp-theme="v2"] .list article,
html[data-tp-theme="v2"] kbd,
html[data-tp-theme="v2"] .ghost {
  background: var(--tp-surface);
}

/* 進度條：軌道用深一階紙色 */
html[data-tp-theme="v2"] .bar {
  background: var(--tp-bg-deep);
}

/* 選取頁籤原為墨底白字，改跟 accent 選取態 */
html[data-tp-theme="v2"] .tab.is-on {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

/* 答對提示盒文字（原寫死深綠）改跟成功色 */
html[data-tp-theme="v2"] .ok-box {
  color: var(--tp-success);
}

/* 未得星星（原寫死淺褐）改跟邊線色，深色可辨 */
html[data-tp-theme="v2"] .star-off {
  color: var(--tp-line);
}