/* a3-elem-science（國小自然，年齡層 kids）v2 風格覆寫
   對應：--paper→--tp-bg、--paper-2→--tp-surface-2、--ink→--tp-text、--muted→--tp-text-soft、
   --line→--tp-line、--leaf→--tp-accent、--leaf-2→--tp-accent-soft、--sun→--tp-warning、
   --sun-2→--tp-warning-soft、--cinnabar→--tp-error、--cinnabar-2→--tp-error-soft、
   --cream→--tp-accent-on；另覆寫 App 寫死色碼的深色規則 */

html[data-tp-theme="v2"]:root {
  --paper: var(--tp-bg);
  --paper-2: var(--tp-surface-2);
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --line: var(--tp-line);
  --leaf: var(--tp-accent-strong);
  --leaf-2: var(--tp-accent-soft);
  --sun: var(--tp-warning);
  --sun-2: var(--tp-warning-soft);
  --cinnabar: var(--tp-error);
  --cinnabar-2: var(--tp-error-soft);
  --cream: var(--tp-accent-on);
}

html[data-tp-theme="v2"] body {
  font-family: var(--tp-font-sans);
}

html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] .brand-text b,
html[data-tp-theme="v2"] .page-title,
html[data-tp-theme="v2"] .q-title {
  font-family: var(--tp-font-serif);
}

/* 答對語意改走 success 階（原與品牌色共用 --leaf） */
html[data-tp-theme="v2"] .good {
  color: var(--tp-success);
}

html[data-tp-theme="v2"] .choice.is-correct {
  border-color: var(--tp-success);
  background: var(--tp-success-soft);
}

html[data-tp-theme="v2"] .choice.is-correct .mark {
  background: var(--tp-success);
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .feedback.ok {
  background: var(--tp-success-soft);
}

html[data-tp-theme="v2"] .badge.got {
  border-color: var(--tp-success);
  background: var(--tp-success-soft);
}

/* 亮色模式寫死的色碼 */
html[data-tp-theme="v2"] .knob i {
  background: var(--tp-text);
}

html[data-tp-theme="v2"] .unit {
  box-shadow: var(--tp-card-shadow);
}

html[data-tp-theme="v2"] .heat-2 {
  color: var(--tp-accent-on);
}

/* 大圓角統一為卡片階，圖示磚與熱力格收為控制項階 */
html[data-tp-theme="v2"] .hero,
html[data-tp-theme="v2"] .card,
html[data-tp-theme="v2"] .unit,
html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .badge,
html[data-tp-theme="v2"] .switch,
html[data-tp-theme="v2"] .review,
html[data-tp-theme="v2"] .mistake,
html[data-tp-theme="v2"] .feedback,
html[data-tp-theme="v2"] .explain-list li {
  border-radius: var(--tp-radius-card);
}

html[data-tp-theme="v2"] .tile,
html[data-tp-theme="v2"] .heat,
html[data-tp-theme="v2"] .rules li {
  border-radius: var(--tp-radius-ctl);
}

/* App 在 html[data-theme="dark"] 下寫死的色碼，逐條改回權杖 */
html[data-tp-theme="v2"][data-theme="dark"] :focus-visible {
  outline-color: var(--tp-focus-ring);
}

html[data-tp-theme="v2"][data-theme="dark"] .chip-link,
html[data-tp-theme="v2"][data-theme="dark"] .tile-leaf,
html[data-tp-theme="v2"][data-theme="dark"] .link,
html[data-tp-theme="v2"][data-theme="dark"] .eyebrow,
html[data-tp-theme="v2"][data-theme="dark"] .unit-meta,
html[data-tp-theme="v2"][data-theme="dark"] .group h2 .icon-sm {
  color: var(--tp-accent-text);
}

html[data-tp-theme="v2"][data-theme="dark"] .good {
  color: var(--tp-success);
}

html[data-tp-theme="v2"][data-theme="dark"] .bad,
html[data-tp-theme="v2"][data-theme="dark"] .btn-soft {
  color: var(--tp-error);
}

html[data-tp-theme="v2"][data-theme="dark"] .badge.got,
html[data-tp-theme="v2"][data-theme="dark"] .choice.is-correct {
  border-color: var(--tp-success);
}

html[data-tp-theme="v2"][data-theme="dark"] .choice.is-wrong {
  border-color: var(--tp-error);
}

html[data-tp-theme="v2"][data-theme="dark"] .heat-2 {
  background: var(--tp-warning-soft);
  border-color: var(--tp-warning);
  color: var(--tp-text);
}

html[data-tp-theme="v2"][data-theme="dark"] .sw2 {
  background: var(--tp-warning-soft);
  border-color: var(--tp-warning);
}

html[data-tp-theme="v2"][data-theme="dark"] .knob i {
  background: var(--tp-text);
}

/* 系統深色（未掛 data-theme）時熱力格與圖例的對比修正 */
@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:not([data-theme="light"]) .heat-2 {
    background: var(--tp-warning-soft);
    border-color: var(--tp-warning);
    color: var(--tp-text);
  }

  html[data-tp-theme="v2"]:not([data-theme="light"]) .sw2 {
    background: var(--tp-warning-soft);
    border-color: var(--tp-warning);
  }
}