/* w12-jh-compass（尺規作圖模擬器）— v2 風格覆寫，年齡層 junior。
   對應簡表：--paper→--tp-bg、--ivory→--tp-surface、--ink→--tp-text、--ink-soft／--muted→--tp-text-soft、--line→--tp-line；
   --teal 系→--tp-accent 系（選取態與 coach）、--vermilion 系→--tp-error 系；
   --radius→--tp-radius-card、--radius-sm→--tp-radius-ctl、--shadow→--tp-shadow-1、--font→--tp-font-sans。
   主按鈕與 pressed 態另指回 --tp-accent；.fb.ok 與 .pill.good 屬成功語意，改回 --tp-success 系。 */
html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text);
  --ink-soft: var(--tp-text-soft);
  --paper: var(--tp-bg);
  --ivory: var(--tp-surface);
  --teal: var(--tp-accent);
  --teal-soft: var(--tp-accent-soft);
  --vermilion: var(--tp-error);
  --vermilion-soft: var(--tp-error-soft);
  --muted: var(--tp-text-soft);
  --line: var(--tp-line);
  --shadow: var(--tp-shadow-1);
  --radius: var(--tp-radius-card);
  --radius-sm: var(--tp-radius-ctl);
  --font: var(--tp-font-sans);
}
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"] h3 {
  font-family: var(--tp-font-serif);
  font-weight: 800;
}
/* 主按鈕：墨藍底、accent-on 字，hover 加深；secondary／ghost／danger 還原各自角色 */
html[data-tp-theme="v2"] .btn {
  background: var(--tp-accent);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn:hover {
  background: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .btn.secondary {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .btn.secondary:hover {
  background: var(--tp-bg-deep);
}
html[data-tp-theme="v2"] .btn.ghost {
  background: transparent;
  color: var(--tp-accent-text);
}
html[data-tp-theme="v2"] .btn.ghost:hover {
  background: var(--tp-accent-soft);
}
html[data-tp-theme="v2"] .btn.danger {
  background: var(--tp-error);
  color: var(--tp-accent-on);
}
/* 選取態與開關 pressed 態：跟 accent，字色用 accent-on */
html[data-tp-theme="v2"] .icon-btn[aria-pressed="true"],
html[data-tp-theme="v2"] .seg button[aria-checked="true"],
html[data-tp-theme="v2"] .tools button[aria-pressed="true"] {
  background: var(--tp-accent);
  color: var(--tp-accent-on);
  border-color: var(--tp-accent);
}
/* 焦點環跟 accent */
html[data-tp-theme="v2"] button:focus-visible,
html[data-tp-theme="v2"] input:focus-visible,
html[data-tp-theme="v2"] [role="radio"]:focus-visible {
  outline-color: var(--tp-accent);
}
/* teal 兼任成功語意的部分改回 success */
html[data-tp-theme="v2"] .fb.ok {
  border-color: var(--tp-success);
  background: var(--tp-success-soft);
}
html[data-tp-theme="v2"] .pill.good {
  background: var(--tp-success-soft);
  border-color: var(--tp-success);
  color: var(--tp-success);
}
/* 寫死色碼：考卷卡片與圖框、底線、圖例文字 */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .blank {
  border-bottom-color: var(--tp-text);
}
html[data-tp-theme="v2"] .q svg {
  border-color: var(--tp-line);
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .legend {
  color: var(--tp-text-soft);
}
html[data-tp-theme="v2"] input[type="text"]:focus,
html[data-tp-theme="v2"] input[type="number"]:focus {
  border-color: var(--tp-accent);
}