/* a6-jr-math｜國中數學｜年齡層 junior。
   對應簡表：--paper→--tp-bg、--card→--tp-surface、--ink→--tp-text、
   --muted→--tp-text-soft、--line→--tp-line、--cinnabar→--tp-subject-math、
   --cinnabar-soft→--tp-subject-math-soft、--moss→--tp-success、--moss-soft→--tp-success-soft。
   答錯態（wrong、bad、urgent）另覆寫為 --tp-error 系；深色由權杖自動切換。 */

html[data-tp-theme="v2"]:root {
  --paper: var(--tp-bg);
  --card: var(--tp-surface);
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --line: var(--tp-line);
  --cinnabar: var(--tp-subject-math);
  --cinnabar-soft: var(--tp-subject-math-soft);
  --moss: var(--tp-success);
  --moss-soft: var(--tp-success-soft);
}

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

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

html[data-tp-theme="v2"] ::selection {
  background: var(--tp-subject-math-soft);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .card {
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
  background: var(--tp-surface);
  box-shadow: var(--tp-card-shadow);
}

html[data-tp-theme="v2"] .btn {
  border-radius: var(--tp-radius-ctl);
  font-weight: var(--tp-fw-medium);
}

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

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

html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .fill,
html[data-tp-theme="v2"] .reveal,
html[data-tp-theme="v2"] .toggle {
  border-radius: var(--tp-radius-ctl);
}

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

html[data-tp-theme="v2"] .reveal.bad {
  border-color: var(--tp-error);
  background: var(--tp-error-soft);
}

html[data-tp-theme="v2"] .clock.urgent {
  color: var(--tp-error);
}

html[data-tp-theme="v2"] .heat-cell,
html[data-tp-theme="v2"] .badge-mini,
html[data-tp-theme="v2"] .dot {
  border-radius: var(--tp-radius-s);
}

html[data-tp-theme="v2"] .heat0 {
  background: var(--tp-bg-deep);
  color: var(--tp-text-soft);
}

html[data-tp-theme="v2"] .bar {
  background: var(--tp-line);
}

html[data-tp-theme="v2"] .bar > span {
  background: var(--tp-subject-math);
}

html[data-tp-theme="v2"] .switch.on {
  background: var(--tp-subject-math);
}

/* 主按鈕 hover/:active 用 accent-strong；聚焦環改用 v2 聚焦色（原 App 為科目色 --cinnabar） */
html[data-tp-theme="v2"] .btn.primary:hover:not(:disabled),
html[data-tp-theme="v2"] .btn.primary:active:not(:disabled) {
  background: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] button:focus-visible {
  outline-color: var(--tp-focus-ring);
}