/* ============================================================
   k17-water-weather（水與天氣觀測站）— v2 風格覆寫（只覆寫，不改版面）
   年齡層：kids；科目：自然（識別色 --tp-subject-sci）
   對應簡表：--bg→--tp-bg；--bg-soft→--tp-bg-deep；--surface→--tp-surface；
   --ink→--tp-text；--muted→--tp-text-soft；--line→--tp-line；
   --primary→--tp-accent、--primary-deep→--tp-accent-strong（主按鈕系）；
   --sun→--tp-warning、--leaf→--tp-success、--danger→--tp-error、--coral→--tp-accent；
   --ice→--tp-accent-soft；--shadow→--tp-shadow-2；圓角→--tp-radius-*；--font→--tp-font-sans。
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --bg: var(--tp-bg);
  --bg-soft: var(--tp-bg-deep);
  --surface: var(--tp-surface);
  --ink: var(--tp-text);
  --muted: var(--tp-text-soft);
  --line: var(--tp-line);
  --primary: var(--tp-accent-strong);
  --primary-deep: var(--tp-accent-strong);
  --sun: var(--tp-warning);
  --coral: var(--tp-accent-strong);
  --leaf: var(--tp-success);
  --danger: var(--tp-error);
  --ice: var(--tp-accent-soft);
  --shadow: var(--tp-shadow-2);
  --radius-sm: var(--tp-radius-ctl);
  --radius: var(--tp-radius-card);
  --radius-lg: var(--tp-radius-card);
  --font: var(--tp-font-sans);
}

/* 背景裝飾漸層：換成權杖淺底，深色自動對齊 */
html[data-tp-theme="v2"] body {
  background-image:
    radial-gradient(circle at 0 0, var(--tp-warning-soft) 0, transparent 32%),
    radial-gradient(circle at 100% 0, var(--tp-accent-soft) 0, transparent 28%);
}

/* 標題換襯線，全家一致 */
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 底＋accent-on 字 */
html[data-tp-theme="v2"] .btn-primary,
html[data-tp-theme="v2"] .seg button.is-on {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .btn-sun {
  background: var(--tp-warning);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn-leaf {
  background: var(--tp-success);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn-ghost {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  color: var(--tp-text);
}

/* 寫死 #fff 的控制面：改白面權杖 */
html[data-tp-theme="v2"] .field input,
html[data-tp-theme="v2"] .field select,
html[data-tp-theme="v2"] .seg button,
html[data-tp-theme="v2"] .check,
html[data-tp-theme="v2"] .choice,
html[data-tp-theme="v2"] .zone,
html[data-tp-theme="v2"] .drag-handle,
html[data-tp-theme="v2"] .ghost-chip {
  background: var(--tp-surface);
}

/* 回饋卡三態：語意淺底＋語意邊 */
html[data-tp-theme="v2"] .feedback.good {
  background: var(--tp-success-soft);
  border-color: var(--tp-success);
}
html[data-tp-theme="v2"] .feedback.bad {
  background: var(--tp-warning-soft);
  border-color: var(--tp-warning);
}
html[data-tp-theme="v2"] .feedback.reveal {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent-strong);
}

/* 科目識別：自然琥珀深只留給識別用途 */
html[data-tp-theme="v2"] .brand {
  color: var(--tp-subject-sci);
}
html[data-tp-theme="v2"] .card.practice {
  border-top-color: var(--tp-subject-sci);
}

/* 強調字（溫度大字、注音）改用文字用強調色，保對比 */
html[data-tp-theme="v2"] .big-temp,
html[data-tp-theme="v2"] .terms rt {
  color: var(--tp-accent-text);
}

/* 焦點環跟 accent 系 */
html[data-tp-theme="v2"] :focus-visible {
  outline-color: var(--tp-focus-ring);
}

/* D2d 對比補修（1151001）。 */
/* 琥珀鈕：深琥珀底配白字只有 3.83:1；改科目淺底配主題文字色並以琥珀描邊，亮暗兩色皆 >= 4.5:1。 */
html[data-tp-theme="v2"] .btn-sun {
  background: var(--tp-warning-soft);
  color: var(--tp-text);
  border-color: var(--tp-warning);
}