/* ============================================================
   w13-picture-writing（看圖寫作教練）— v2 風格覆寫
   年齡層：kids（國小）　科目：國語寫作（--tp-subject-zh）
   自訂屬性→權杖對應簡表：
   --ink→--tp-text；--muted→--tp-text-soft；--paper→--tp-bg；--paper-2→--tp-bg-deep
   --card→--tp-surface；--line→--tp-line；--primary→--tp-accent；--on-primary→--tp-accent-on
   --accent／--ok→--tp-success；--danger→--tp-error；--gold→--tp-focus-ring
   --shadow→--tp-shadow-2；--radius→--tp-radius-card；--radius-sm→--tp-radius-ctl；--font→--tp-font-sans
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text);
  --paper: var(--tp-bg);
  --paper-2: var(--tp-bg-deep);
  --card: var(--tp-surface);
  --primary: var(--tp-accent-strong);
  --on-primary: var(--tp-accent-on);
  --accent: var(--tp-success);
  --on-accent: var(--tp-accent-on);
  --gold: var(--tp-focus-ring);
  --muted: var(--tp-text-soft);
  --line: var(--tp-line);
  --danger: var(--tp-error);
  --ok: var(--tp-success);
  --shadow: var(--tp-shadow-2);
  --radius: var(--tp-radius-card);
  --radius-sm: var(--tp-radius-ctl);
  --font: var(--tp-font-sans);
}

/*  body 原為紙色加朱砂圓點紋理；改為純 --tp-bg（連同背景圖一起重置）  */
html[data-tp-theme="v2"] body {
  background: var(--tp-bg);
}

/*  置頂列原為寫死的半透明米色，改為語意背景  */
html[data-tp-theme="v2"] #chrome {
  background: var(--tp-bg);
  border-bottom-color: var(--tp-line);
}

/*  標題換襯線，孩子向的溫暖書卷感  */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2,
html[data-tp-theme="v2"] h3 {
  font-family: var(--tp-font-serif);
}

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

/*  選項鈕三態：選取跟 accent、錯誤與正確用狀態色  */
html[data-tp-theme="v2"] .btn.pick.on {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-soft);
}
html[data-tp-theme="v2"] .btn.pick.bad {
  border-color: var(--tp-error);
  background: var(--tp-error-soft);
}
html[data-tp-theme="v2"] .btn.pick.good {
  border-color: var(--tp-success);
  background: var(--tp-success-soft);
}

/*  回饋條  */
html[data-tp-theme="v2"] .feedback.ok {
  background: var(--tp-success-soft);
}
html[data-tp-theme="v2"] .feedback.bad {
  background: var(--tp-error-soft);
}

/*  輸入框與勾選列原寫死白底，改為表面色  */
html[data-tp-theme="v2"] textarea,
html[data-tp-theme="v2"] input[type="text"],
html[data-tp-theme="v2"] input[type="number"],
html[data-tp-theme="v2"] .checks label {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
  caret-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .checks input {
  accent-color: var(--tp-accent-strong);
}

/*  練習稿紙與作文格  */
html[data-tp-theme="v2"] .paper {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
}
html[data-tp-theme="v2"] .write-line {
  border-bottom-color: var(--tp-line-strong);
}
html[data-tp-theme="v2"] .cells,
html[data-tp-theme="v2"] .cells i {
  border-color: var(--tp-text-soft);
}

/*  浮動提示吐司：墨色底＋紙色字，深色自動反轉  */
html[data-tp-theme="v2"] .toast {
  background: var(--tp-text);
  color: var(--tp-bg);
}

/*  焦點環（--gold 已指向 --tp-focus-ring，此處補柔和光暈）  */
html[data-tp-theme="v2"] :focus-visible {
  outline-color: var(--tp-focus-ring);
}