/* a8-jr-chinese｜國中國文｜年齡層 junior。
   對應簡表：--paper→--tp-bg、--paper-deep→--tp-bg-deep、--sheet→--tp-surface、
   --ink→--tp-text、--ink-soft→--tp-text-soft、--mute→--tp-text-soft、
   --line→--tp-line、--cinnabar→--tp-subject-zh、--cinnabar-deep→--tp-error、
   --on-fill→--tp-accent-on、--scrim→--tp-ink、--font-serif→--tp-font-serif；
   深色由權杖自動切換。 */

html[data-tp-theme="v2"]:root {
  --font-serif: var(--tp-font-serif);
  --paper: var(--tp-bg);
  --paper-deep: var(--tp-bg-deep);
  --sheet: var(--tp-surface);
  --ink: var(--tp-text);
  --ink-soft: var(--tp-text-soft);
  --mute: var(--tp-text-soft);
  --line: var(--tp-line);
  --cinnabar: var(--tp-subject-zh);
  --cinnabar-deep: var(--tp-error);
  --on-fill: var(--tp-accent-on);
  --scrim: var(--tp-ink);
}

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"] ::selection {
  background: var(--tp-subject-zh-soft);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .card,
html[data-tp-theme="v2"] .unit,
html[data-tp-theme="v2"] .mistake,
html[data-tp-theme="v2"] .result-item {
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-card);
  background: var(--tp-surface);
}

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

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

html[data-tp-theme="v2"] .btn,
html[data-tp-theme="v2"] .linkish,
html[data-tp-theme="v2"] .icon-btn,
html[data-tp-theme="v2"] .text-btn,
html[data-tp-theme="v2"] .num-btn {
  border-radius: var(--tp-radius-ctl);
}

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

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

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

html[data-tp-theme="v2"] .btn.solid:hover:not(:disabled),
html[data-tp-theme="v2"] .btn.solid:active:not(:disabled),
html[data-tp-theme="v2"] .btn.ink:hover:not(:disabled),
html[data-tp-theme="v2"] .btn.ink:active:not(:disabled) {
  background: var(--tp-accent-strong);
}

/* .chip.on 原墨色（--ink→--tp-text）實心的選取態切換鈕，改 accent */
html[data-tp-theme="v2"] .chip.on {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: var(--tp-accent-on);
}

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

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

html[data-tp-theme="v2"] .seal {
  border-color: var(--tp-subject-zh);
  color: var(--tp-subject-zh);
  border-radius: var(--tp-radius-s);
}

html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .toggle,
html[data-tp-theme="v2"] .explain,
html[data-tp-theme="v2"] .empty {
  border-radius: var(--tp-radius-card);
}

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

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

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

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

html[data-tp-theme="v2"] .stars svg.on {
  color: var(--tp-warning);
}

html[data-tp-theme="v2"] .grades,
html[data-tp-theme="v2"] .explain,
html[data-tp-theme="v2"] .badge.on,
html[data-tp-theme="v2"] .num-btn.done,
html[data-tp-theme="v2"] .choice.selected {
  background: var(--tp-bg-deep);
}

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

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

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

/* D2d 對比補修（1151001）。 */
/* 墨色卡內的 .lead 原寫死朱砂色，落在深墨底只有 2.8:1；改成卡面上的字色（深色模式墨卡變淺，accent-on 隨之變深）。 */
html[data-tp-theme="v2"] .ink-card .lead {
  color: var(--tp-accent-on);
}