/* a5-elem-english（國小英語）｜年齡層 kids｜v2 風格覆寫
   對應：--paper→--tp-bg、--paper-deep→--tp-bg-deep、--card→--tp-surface
   --ink→--tp-text、--muted→--tp-text-soft、--line→--tp-line、--font→--tp-font-sans
   --coral→--tp-accent、--coral-soft→--tp-accent-soft、--sage→--tp-success、--sage-soft→--tp-success-soft
   App 的 html[data-theme="dark"] 變數特異性較低自動失效，深色由 tp 權杖切換。 */

html[data-tp-theme="v2"]:root {
  --paper: var(--tp-bg);
  --paper-deep: var(--tp-bg-deep);
  --card: var(--tp-surface);
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --line: var(--tp-line);
  --coral: var(--tp-accent-strong);
  --coral-soft: var(--tp-accent-soft);
  --sage: var(--tp-success);
  --sage-soft: var(--tp-success-soft);
  --font: 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);
}

/* 純文字角色的珊瑚色：改用紙上對比合格的 accent-text */
html[data-tp-theme="v2"] .kicker,
html[data-tp-theme="v2"] .fresh,
html[data-tp-theme="v2"] .timer.low {
  color: var(--tp-accent-text);
}

/* 聚焦環改為 v2 聚焦色 */
html[data-tp-theme="v2"] button:focus-visible {
  outline-color: var(--tp-focus-ring);
}

/* 寫死 rgba 陰影改為權杖陰影（:root 提升特異性，壓過 App 的深色 swatch 規則） */
html[data-tp-theme="v2"]:root .swatch {
  box-shadow: var(--tp-shadow-1);
}

/* 卡片群：卡片圓角，主要卡片加陰影 */
html[data-tp-theme="v2"] .stat,
html[data-tp-theme="v2"] .card,
html[data-tp-theme="v2"] .topic,
html[data-tp-theme="v2"] .badge,
html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .panel,
html[data-tp-theme="v2"] .miss,
html[data-tp-theme="v2"] .word,
html[data-tp-theme="v2"] .empty {
  border-radius: var(--tp-radius-card);
}
html[data-tp-theme="v2"] .card,
html[data-tp-theme="v2"] .topic,
html[data-tp-theme="v2"] .panel,
html[data-tp-theme="v2"] .mode {
  box-shadow: var(--tp-card-shadow);
}

/* 控制項與互動件：控制項圓角 */
html[data-tp-theme="v2"] .go,
html[data-tp-theme="v2"] .soft,
html[data-tp-theme="v2"] .key,
html[data-tp-theme="v2"] .slot,
html[data-tp-theme="v2"] .heat,
html[data-tp-theme="v2"] .mode,
html[data-tp-theme="v2"] .note,
html[data-tp-theme="v2"] .ask,
html[data-tp-theme="v2"] .toggle,
html[data-tp-theme="v2"] .wide {
  border-radius: var(--tp-radius-ctl);
}

/* 主按鈕 accent 化：.go 與 .wide.ink 原以墨色 --ink（→--tp-text）上底的實心主操作鈕；
   .seg[aria-pressed="true"] 原墨色實心的選取態切換鈕。
   .go.coral 原本即 accent（--coral→--tp-accent），不動。 */
html[data-tp-theme="v2"] .go,
html[data-tp-theme="v2"] .wide.ink {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .wide.ink small {
  color: var(--tp-accent-on);
  opacity: 0.85;
}

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

html[data-tp-theme="v2"] .seg[aria-pressed="true"] {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}