/* ============================================================
   k04-area-perimeter（面積周長工坊）v2 風格覆寫　年齡層：kids（數學）
   對應簡表：--c-bg／--c-bg-deep → --tp-bg／--tp-bg-deep；--c-surface → --tp-surface
   --c-ink／--c-muted → --tp-text／--tp-text-soft；--c-line → --tp-line
   --c-primary(-dark) → accent 系；--c-secondary(-dark) → success 系；--c-accent(-dark) → warning 系
   --c-danger／--c-ok(-bg)／--c-hint(-bg)／--c-bad-bg → error／success／warning 系
   --r-* → --tp-radius-ctl／-card／-xl；--sh-* → --tp-shadow-1／-2／-3；--font → --tp-font-sans
   ============================================================ */

/* 一、自訂屬性整批指向 v2 權杖（深色隨權杖自動切換） */
html[data-tp-theme="v2"]:root {
  --c-primary: var(--tp-accent-strong);
  --c-primary-dark: var(--tp-accent-strong);
  --c-secondary: var(--tp-success);
  --c-secondary-dark: var(--tp-success);
  --c-accent: var(--tp-warning);
  --c-accent-dark: var(--tp-warning);
  --c-bg: var(--tp-bg);
  --c-bg-deep: var(--tp-bg-deep);
  --c-surface: var(--tp-surface);
  --c-ink: var(--tp-text);
  --c-muted: var(--tp-text-soft);
  --c-line: var(--tp-line);
  --c-danger: var(--tp-error);
  --c-ok: var(--tp-success);
  --c-ok-bg: var(--tp-success-soft);
  --c-hint-bg: var(--tp-warning-soft);
  --c-hint: var(--tp-warning);
  --c-bad-bg: var(--tp-error-soft);
  --r-sm: var(--tp-radius-ctl);
  --r-md: var(--tp-radius-card);
  --r-lg: var(--tp-radius-xl);
  --r-xl: var(--tp-radius-xl);
  --sh-sm: var(--tp-shadow-1);
  --sh-md: var(--tp-shadow-2);
  --sh-lg: var(--tp-shadow-3);
  --font: var(--tp-font-sans);
}

/* 二、寫死色碼逐條改指語意權杖 */
/* 背景點點：棕點改主題邊線色，深色自動轉淡 */
html[data-tp-theme="v2"] body {
  background-image: radial-gradient(var(--tp-line) 1px, transparent 1px);
}
/* 捲尺裝飾帶：金底改 warning-soft、刻度改 warning */
html[data-tp-theme="v2"] .tape-strip {
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, var(--tp-warning) 10px 12px, transparent 12px 22px),
    linear-gradient(var(--tp-warning-soft), var(--tp-warning-soft));
}
/* 主、次按鈕字色隨 accent-on（深色為深字） */
html[data-tp-theme="v2"] .btn-primary,
html[data-tp-theme="v2"] .btn-secondary {
  color: var(--tp-accent-on);
}
/* 焦點環跟 accent 系（原為 success 綠） */
html[data-tp-theme="v2"] :focus-visible { outline-color: var(--tp-focus-ring); }
/* 白底輸入框與勾選、單選膠囊 */
html[data-tp-theme="v2"] select.big,
html[data-tp-theme="v2"] input.code,
html[data-tp-theme="v2"] input.ans {
  background: var(--tp-surface);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .checks label,
html[data-tp-theme="v2"] .radios label {
  background: var(--tp-surface);
}
/* 圖框、方格板、作答列、晶片的白底 */
html[data-tp-theme="v2"] .fig-box,
html[data-tp-theme="v2"] .grid-svg,
html[data-tp-theme="v2"] .scene-svg,
html[data-tp-theme="v2"] .answer-row,
html[data-tp-theme="v2"] .chip {
  background: var(--tp-surface);
}
/* 作答列亮起態改 success-soft */
html[data-tp-theme="v2"] .answer-row.hot { background: var(--tp-success-soft); }
/* 揭曉回饋的寫死深紅字改 error */
html[data-tp-theme="v2"] .feedback.reveal { color: var(--tp-error); }
/* 星星：未得星由寫死米灰改主題邊線色 */
html[data-tp-theme="v2"] .star polygon { fill: var(--tp-line); }
/* 分頁選取態（墨色底）字色隨 accent-on */
html[data-tp-theme="v2"] .tabs button[aria-selected="true"] { color: var(--tp-accent-on); }
/* 列印學習單：紙面、墨色隨主題，題目虛線改邊線色 */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .q-item { border-color: var(--tp-line); }

/* 三、教學圖 SVG（fill／stroke 寫死色改語意權杖；吉祥物不在此列） */
html[data-tp-theme="v2"] .fig-svg .shape,
html[data-tp-theme="v2"] .scene-svg .shape {
  fill: var(--tp-warning-soft);
  stroke: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .fig-svg .shape-b,
html[data-tp-theme="v2"] .scene-svg .shape-b {
  fill: var(--tp-success-soft);
  stroke: var(--tp-success);
}
html[data-tp-theme="v2"] .fig-svg .ghost {
  fill: var(--tp-success-soft);
  stroke: var(--tp-success);
}
html[data-tp-theme="v2"] .fig-svg .ht,
html[data-tp-theme="v2"] .fig-svg .cut-line,
html[data-tp-theme="v2"] .scene-svg .ht {
  stroke: var(--tp-success);
}
html[data-tp-theme="v2"] .fig-svg .dim { stroke: var(--tp-text-soft); }
html[data-tp-theme="v2"] .fig-svg .right,
html[data-tp-theme="v2"] .scene-svg .right {
  stroke: var(--tp-text);
}
html[data-tp-theme="v2"] .fig-svg .fig-label,
html[data-tp-theme="v2"] .fig-svg .fig-big,
html[data-tp-theme="v2"] .fig-svg .fig-tag,
html[data-tp-theme="v2"] .scene-svg .fig-label {
  fill: var(--tp-text);
}
html[data-tp-theme="v2"] .fig-svg .grid-line { stroke: var(--tp-line); }
html[data-tp-theme="v2"] .fig-svg .shade {
  fill: var(--tp-accent-softer);
  stroke: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .fig-svg .sel {
  fill: var(--tp-accent-soft);
  stroke: var(--tp-accent-strong);
}
/* 表單控件的強調色與游標色 */
html[data-tp-theme="v2"] input,
html[data-tp-theme="v2"] select {
  accent-color: var(--tp-accent-strong);
  caret-color: var(--tp-accent-strong);
}