/* app22-maze（解題迷宮島）— v2 主題覆寫
   年齡層：kids（朱砂強調、大圓角、溫暖圓潤）。
   對應：--ink→--tp-text、--ink-soft→--tp-text-soft、--paper→--tp-bg、--paper-deep→--tp-bg-deep、--card→--tp-surface、--line→--tp-line。
   對應：--primary→--tp-accent、--primary-deep→--tp-accent-strong、--primary-soft→--tp-accent-soft（原綠主色改朱砂系）；--font→--tp-font-sans。
   對應：--amber／--amber-deep→--tp-amber（琥珀底配深字）、--amber-soft→--tp-warning-soft、--gold→--tp-amber。
   對應：--sea→--tp-info、--sea-soft→--tp-subject-math-soft、--rose→--tp-error、--rose-soft→--tp-error-soft、--shadow*→--tp-shadow-*、--r-*→--tp-radius-*。 */

/* 一、自訂屬性整批轉向 v2 權杖（深色由 tokens 自動切換） */
html[data-tp-theme="v2"]:root {
  --ink: var(--tp-text);
  --ink-soft: var(--tp-text-soft);
  --paper: var(--tp-bg);
  --paper-deep: var(--tp-bg-deep);
  --card: var(--tp-surface);
  --line: var(--tp-line);
  --primary: var(--tp-accent-strong);
  --primary-deep: var(--tp-accent-strong);
  --primary-soft: var(--tp-accent-soft);
  --amber: var(--tp-amber);
  --amber-deep: var(--tp-amber);
  --amber-soft: var(--tp-warning-soft);
  --sea: var(--tp-info);
  --sea-soft: var(--tp-subject-math-soft);
  --gold: var(--tp-amber);
  --rose: var(--tp-error);
  --rose-soft: var(--tp-error-soft);
  --shadow: var(--tp-shadow-2);
  --shadow-sm: var(--tp-shadow-1);
  --r-sm: var(--tp-radius-ctl);
  --r: var(--tp-radius-card);
  --r-lg: var(--tp-radius-xl);
  --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);
  font-weight: var(--tp-display-weight);
}

/* 三、聚焦與選取對齊 */
html[data-tp-theme="v2"] :focus-visible {
  outline: 3px solid var(--tp-focus-ring);
}
html[data-tp-theme="v2"] ::selection {
  background: var(--tp-accent-soft);
  color: var(--tp-text);
}

/* 四、body 暈染保留、色調換成朱砂極淺底系 */
html[data-tp-theme="v2"] body {
  background: var(--tp-bg);
  background-image:
    radial-gradient(circle at 8% -8%, var(--tp-surface) 0, transparent 36%),
    radial-gradient(circle at 110% 0%, var(--tp-accent-softer) 0, transparent 32%);
}

/* 五、主色底上的寫死白字改接 accent-on；琥珀底維持深字 */
html[data-tp-theme="v2"] .btn.primary {
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .btn.amber {
  color: var(--tp-ink);
}
html[data-tp-theme="v2"] .btn.sea {
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .node.done {
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .node.now {
  box-shadow: 0 0 0 4px var(--tp-warning), var(--tp-shadow-1);
}
html[data-tp-theme="v2"] .tabs button[aria-selected="true"] {
  color: var(--tp-accent-on);
}

/* 六、寫死白底的元件改接表面權杖（選取態一併重述） */
html[data-tp-theme="v2"] .num {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .cell {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .cell.blank {
  border-color: var(--amber);
  background: var(--amber-soft);
}
html[data-tp-theme="v2"] .bank,
html[data-tp-theme="v2"] .plate {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .plate.sel {
  border-color: var(--primary);
  background: var(--primary-soft);
}
html[data-tp-theme="v2"] select,
html[data-tp-theme="v2"] .textin {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .checks label {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .star path {
  fill: var(--tp-line);
}

/* 七、答對回饋對齊成功語意（原吃 primary-soft 會變朱砂淺底） */
html[data-tp-theme="v2"] .feedback.ok {
  background: var(--tp-success-soft);
}

/* 八、列印學習單（螢幕上亦顯示）對齊紙面權杖 */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface);
  color: var(--tp-text);
}