/* j22-exam-mock（會考衝刺卷工廠）｜年齡層：junior（墨藍強調、圓角收斂、參考書般俐落）。
   對應簡表：--ink→--tp-text；--ink-soft→--tp-text-soft；--paper→--tp-bg；--paper-2→--tp-surface；--line→--tp-line。
   --primary→--tp-accent；--primary-2→--tp-accent-strong；--tint→--tp-accent-soft；--accent-2→--tp-info。
   --accent→--tp-warning；--accent-soft→--tp-warning-soft；--star→--tp-warning（保留原橘褐次強調角色）。
   --ok→--tp-success；--ok-soft→--tp-success-soft；--bad→--tp-error；--bad-soft→--tp-error-soft。
   --radius→--tp-radius-card；--shadow→--tp-shadow-1；--font→--tp-font-sans；寫死色碼與選取、聚焦色逐條覆寫。 */

/* 一、自訂屬性整批改指 tp 權杖（深色自動對齊，不必另寫深色規則） */
html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text);
  --ink-soft: var(--tp-text-soft);
  --paper: var(--tp-bg);
  --paper-2: var(--tp-surface);
  --line: var(--tp-line);
  --primary: var(--tp-accent);
  --primary-2: var(--tp-accent-strong);
  --tint: var(--tp-accent-soft);
  --accent: var(--tp-warning);
  --accent-soft: var(--tp-warning-soft);
  --accent-2: var(--tp-info);
  --ok: var(--tp-success);
  --ok-soft: var(--tp-success-soft);
  --bad: var(--tp-error);
  --bad-soft: var(--tp-error-soft);
  --star: var(--tp-warning);
  --radius: var(--tp-radius-card);
  --shadow: var(--tp-shadow-1);
  --font: var(--tp-font-sans);
}

/* 二、body 裝飾漸層保留，色調換成 accent／warning 淺底系 */
html[data-tp-theme="v2"] body {
  background:
    radial-gradient(880px 380px at 0% -8%, var(--tp-accent-soft), transparent 55%),
    radial-gradient(720px 340px at 100% 0%, var(--tp-warning-soft), transparent 48%),
    var(--tp-bg);
}

/* 三、標題換襯線字，字重走 junior 的 800 */
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: var(--tp-display-weight);
}

/* 四、按鈕：主色底上的字用 accent-on；線框款補回自己的文字與邊色 */
html[data-tp-theme="v2"] .btn { color: var(--tp-accent-on); }
html[data-tp-theme="v2"] .btn.ghost {
  color: var(--tp-accent);
  background: transparent;
  border-color: var(--tp-accent);
}
html[data-tp-theme="v2"] .btn.bad {
  color: var(--tp-error);
  background: transparent;
  border-color: var(--tp-error);
}

/* 五、寫死 #fff 的輸入框與小元件改 surface；狀態色補回 */
html[data-tp-theme="v2"] input[type="text"],
html[data-tp-theme="v2"] input[type="number"],
html[data-tp-theme="v2"] select,
html[data-tp-theme="v2"] .checks label,
html[data-tp-theme="v2"] .stepper button,
html[data-tp-theme="v2"] .calc,
html[data-tp-theme="v2"] .qdots button {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .choice { background: var(--tp-surface); }
html[data-tp-theme="v2"] .choice.on {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent);
}
html[data-tp-theme="v2"] .choice.wrong {
  background: var(--tp-error-soft);
  border-color: var(--tp-error);
}
html[data-tp-theme="v2"] .choice.right {
  background: var(--tp-success-soft);
  border-color: var(--tp-success);
}
html[data-tp-theme="v2"] .qdots button.done {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent);
}

/* 六、進度條軌道寫死米色，換深一階背景 */
html[data-tp-theme="v2"] .bar { background: var(--tp-bg-deep); }

/* 七、列印卷面維持白紙黑墨，深色下也像一張卷子 */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface-white);
  color: var(--tp-ink);
}

/* 八、星星與雷達圖寫死色改權杖 */
html[data-tp-theme="v2"] .star { fill: var(--tp-line); }
html[data-tp-theme="v2"] .star.on { fill: var(--tp-warning); }
html[data-tp-theme="v2"] .radar .ring { stroke: var(--tp-line); }
html[data-tp-theme="v2"] .radar .axis { stroke: var(--tp-line-strong); }
html[data-tp-theme="v2"] .radar .blob {
  fill: var(--tp-accent-soft);
  stroke: var(--tp-accent);
}

/* 九、選取與聚焦對齊 */
html[data-tp-theme="v2"] ::selection { background: var(--tp-accent-soft); }
html[data-tp-theme="v2"] :focus-visible { outline-color: var(--tp-focus-ring); }