/* ============================================================
   progress（國語課本進度對照）— v2 風格覆寫｜年齡層：kids（朱砂強調）
   自訂屬性→權杖對應簡表：
   ・--tp-cinnabar→--tp-accent，--tp-cinnabar-dark→--tp-accent-text，--tp-cinnabar-soft→--tp-accent-soft
   ・深色：--tp-paper→--tp-night-paper，--tp-paper-deep→--tp-night-deep
   ・深色：--tp-ink→--tp-night-ink，--tp-ink-soft→--tp-night-soft，--tp-ink-faint→--tp-night-faint
   ・深色：--tp-sage 系→--tp-sage-night 系，--tp-amber 系→--tp-amber-night 系
   ・深色：--tp-ink-blue→--tp-blue-night，--tp-grid-line→--tp-night-line
   ============================================================ */

/* ---- v1 朱砂系整批指向 kids accent 語意層（亮色同值，深色自動跟 accent 夜間階） ---- */
html[data-tp-theme="v2"]:root {
  --tp-cinnabar: var(--tp-accent-strong);
  --tp-cinnabar-dark: var(--tp-accent-text);
  --tp-cinnabar-soft: var(--tp-accent-soft);
}

/* ---- 頁面基底：字色與底色改走語意層，深色自動對齊 ---- */
html[data-tp-theme="v2"] body {
  color: var(--tp-text);
  background-color: var(--tp-bg);
}

/* ---- 主操作鈕統一：accent 底、accent-on 字、hover 加深 ---- */
html[data-tp-theme="v2"] .tp-btn--primary {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .tp-btn--primary:hover:not([disabled]) {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

/* ---- 獎勵回饋視窗 .tpr-*：<style> 寫死色全部改指語意權杖 ---- */
html[data-tp-theme="v2"] .tpr-modal {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-radius: var(--tp-radius-xl);
  box-shadow: var(--tp-shadow-pop);
  font-family: var(--tp-font-sans);
}

html[data-tp-theme="v2"] .tpr-title,
html[data-tp-theme="v2"] .tpr-label {
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .tpr-lead,
html[data-tp-theme="v2"] .tpr-counter,
html[data-tp-theme="v2"] .tpr-privacy {
  color: var(--tp-text-soft);
}

html[data-tp-theme="v2"] .tpr-err { color: var(--tp-error); }
html[data-tp-theme="v2"] .tpr-status-ok { color: var(--tp-success); }
html[data-tp-theme="v2"] .tpr-status-err { color: var(--tp-error); }

/* 年級與範圍勾選 chip */
html[data-tp-theme="v2"] .tpr-chip {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-ctl);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .tpr-chip input {
  accent-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-chip.tpr-checked {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-chip:focus-within {
  outline: 3px solid var(--tp-focus-ring);
}

/* 視窗內輸入框 */
html[data-tp-theme="v2"] .tpr-modal textarea,
html[data-tp-theme="v2"] .tpr-modal input[type="text"],
html[data-tp-theme="v2"] .tpr-modal input[type="email"] {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-ctl);
  color: var(--tp-text);
  caret-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-modal textarea:focus,
html[data-tp-theme="v2"] .tpr-modal input[type="text"]:focus,
html[data-tp-theme="v2"] .tpr-modal input[type="email"]:focus {
  outline: 3px solid var(--tp-focus-ring);
  border-color: var(--tp-accent-strong);
}

/* 視窗主操作鈕：accent 底、accent-on 字、hover 加深 */
html[data-tp-theme="v2"] .tpr-btn-primary {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .tpr-btn-primary:hover:not(:disabled) {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-btn-ghost {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .tpr-btn-ghost:hover:not(:disabled) {
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-text);
}

html[data-tp-theme="v2"] .tpr-btn:focus-visible {
  outline: 3px solid var(--tp-focus-ring);
}

html[data-tp-theme="v2"] .tpr-open:hover,
html[data-tp-theme="v2"] .tpr-open:focus-visible {
  color: var(--tp-accent-text);
}

/* ============================================================
   深色模式：v1 寫死值的 primitive 換夜間階
   （語意層 --tp-bg／--tp-surface／--tp-text…由 tokens 自行切換；
     行內 st-* 統計色用 var(--tp-amber-deep) 等，隨 remap 自動對齊）
   ============================================================ */


html[data-tp-theme="v2"][data-theme="dark"] {
  --tp-paper: var(--tp-night-paper);
  --tp-paper-deep: var(--tp-night-deep);
  --tp-ink: var(--tp-night-ink);
  --tp-ink-soft: var(--tp-night-soft);
  --tp-ink-faint: var(--tp-night-faint);
  --tp-ink-blue: var(--tp-blue-night);
  --tp-grid-line: var(--tp-night-line);
  --tp-sage: var(--tp-sage-night);
  --tp-sage-deep: var(--tp-sage-night);
  --tp-sage-soft: var(--tp-sage-soft-night);
  --tp-amber: var(--tp-amber-night);
  --tp-amber-deep: var(--tp-amber-night);
  --tp-amber-soft: var(--tp-amber-soft-night);
}

html[data-tp-theme="v2"][data-theme="dark"] body {
  background-image: none;
}

html[data-tp-theme="v2"][data-theme="dark"] .tp-site-header {
  background: var(--tp-bg);
}

html[data-tp-theme="v2"][data-theme="dark"] .tp-float-layer .tp-float-char {
  color: var(--tp-night-ink);
  opacity: 0.05;
}

/* D2d 對比補修（1151001）：說明小字原用 ink-faint（紙上約 2.5:1），改次要文字色。 */
html[data-tp-theme="v2"] .tp-caption {
  color: var(--tp-text-soft);
}