/* ============================================================
   w17-fraction-lab（分數實驗室）— v2 風格覆寫
   年齡層：kids（國小）　科目：數學（--tp-subject-math）
   自訂屬性→權杖對應簡表：
   --ink→--tp-text；--muted→--tp-text-soft；--bone→--tp-bg；--card→--tp-surface
   --line→--tp-line；--primary→--tp-accent；--on-primary→--tp-accent-on
   --basil→--tp-success；--basil-soft→--tp-success-soft
   --cheese→--tp-warning；--cheese-soft→--tp-warning-soft
   --radius→--tp-radius-card；--radius-sm→--tp-radius-ctl；--shadow→--tp-shadow-2；--font→--tp-font-sans
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --bone: var(--tp-bg);
  --card: var(--tp-surface);
  --line: var(--tp-line);
  --primary: var(--tp-accent-strong);
  --on-primary: var(--tp-accent-on);
  --basil: var(--tp-success);
  --basil-soft: var(--tp-success-soft);
  --cheese: var(--tp-warning);
  --cheese-soft: var(--tp-warning-soft);
  --radius: var(--tp-radius-card);
  --radius-sm: var(--tp-radius-ctl);
  --shadow: var(--tp-shadow-2);
  --font: var(--tp-font-sans);
}

/*  body 保留紙色底，圓點紋理重置（深色下原點紋會隱沒，直接移除）  */
html[data-tp-theme="v2"] body {
  background: var(--tp-bg);
}

/*  置頂列原為寫死的半透明米色  */
html[data-tp-theme="v2"] .top {
  background: var(--tp-bg);
  border-bottom-color: var(--tp-line);
}

/*  標題換襯線  */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2 {
  font-family: var(--tp-font-serif);
}

/*  主按鈕：朱砂底＋白字，hover／按下加深  */
html[data-tp-theme="v2"] .btn.primary {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  border-color: var(--tp-accent-strong);
}
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);
  color: var(--tp-accent-on);
}

/*  羅勒綠次按鈕指到成功綠  */
html[data-tp-theme="v2"] .btn.basil {
  background: var(--tp-success);
  color: var(--tp-accent-on);
  border-color: var(--tp-success);
}

/*  選取態跟 accent：on 系列原寫死淺紅底  */
html[data-tp-theme="v2"] .btn.on,
html[data-tp-theme="v2"] .compare button.on,
html[data-tp-theme="v2"] .seg button.on {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-soft);
}

/*  提示／讀出區用琥珀淺底（--cheese-soft 已指向 warning-soft）  */
html[data-tp-theme="v2"] .chips button.on {
  background: var(--tp-warning-soft);
  border-color: var(--tp-warning);
}

/*  横幅三態  */
html[data-tp-theme="v2"] .banner.ok {
  background: var(--tp-success-soft);
  color: var(--tp-success);
}
html[data-tp-theme="v2"] .banner.hint {
  background: var(--tp-warning-soft);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .banner.show {
  background: var(--tp-surface);
  border-color: var(--tp-line);
}

/*  進度條：軌道用深一階紙色，填充用 accent  */
html[data-tp-theme="v2"] .progress {
  background: var(--tp-bg-deep);
}
html[data-tp-theme="v2"] .progress i {
  background: var(--tp-accent-strong);
}

/*  步進器輸入框原寫死白底  */
html[data-tp-theme="v2"] .stepper input {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
  caret-color: var(--tp-accent-strong);
}

/*  提示小字原用主紅，文字用 accent-text 保對比  */
html[data-tp-theme="v2"] .note {
  color: var(--tp-accent-text);
}

/*  列印卷：原寫死白底深色字  */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .q-block {
  border-bottom-color: var(--tp-line);
}

/*  焦點環：原用奶酪黃，改為全站聚焦色  */
html[data-tp-theme="v2"] :focus-visible {
  outline-color: var(--tp-focus-ring);
}