/* k26-fraction-lab（分數實驗室）— v2 風格覆寫；年齡層：kids（朱砂強調、大圓角、溫暖圓潤）。
   對應簡表：--color-bg→--tp-bg、--color-bg-soft→--tp-bg-deep、--color-card→--tp-surface、
   --color-ink→--tp-text、--color-ink-soft→--tp-text-soft、--color-line→--tp-line、
   --color-primary→--tp-accent、--color-primary-deep→--tp-accent-strong、--color-on-primary→--tp-accent-on、
   --color-secondary→--tp-success、--color-accent→--tp-warning、--color-accent-soft→--tp-warning-soft、
   --color-ok→--tp-success、--color-ok-bg→--tp-success-soft、--color-warn→--tp-warning、--color-warn-bg→--tp-warning-soft、
   --color-bad→--tp-error、--color-bad-bg→--tp-error-soft、--font→--tp-font-sans；圓角與陰影對應 --tp-radius-* 與 --tp-shadow-*。 */

/* 主軸：把 App 自訂屬性整批改指向 v2 權杖，深色自動對齊 */
html[data-tp-theme="v2"]:root {
  --color-bg: var(--tp-bg);
  --color-bg-soft: var(--tp-bg-deep);
  --color-card: var(--tp-surface);
  --color-ink: var(--tp-text);
  --color-ink-soft: var(--tp-text-soft);
  --color-line: var(--tp-line);
  --color-primary: var(--tp-accent-strong);
  --color-primary-deep: var(--tp-accent-strong);
  --color-on-primary: var(--tp-accent-on);
  --color-secondary: var(--tp-success);
  --color-secondary-deep: var(--tp-success);
  --color-accent: var(--tp-warning);
  --color-accent-soft: var(--tp-warning-soft);
  --color-ok: var(--tp-success);
  --color-ok-bg: var(--tp-success-soft);
  --color-warn: var(--tp-warning);
  --color-warn-bg: var(--tp-warning-soft);
  --color-bad: var(--tp-error);
  --color-bad-bg: var(--tp-error-soft);
  --radius-sm: var(--tp-radius-ctl);
  --radius-md: var(--tp-radius-card);
  --radius-lg: var(--tp-radius-xl);
  --radius-pill: var(--tp-radius-pill);
  --shadow-sm: var(--tp-shadow-1);
  --shadow-md: var(--tp-shadow-2);
  --shadow-lg: var(--tp-shadow-3);
  --font: var(--tp-font-sans);
}

/* 標題字體與字重對齊 kids 層 */
html[data-tp-theme="v2"] h1,
html[data-tp-theme="v2"] h2 {
  font-family: var(--tp-font-serif);
  font-weight: var(--tp-display-weight);
}

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

/* 寫死色碼逐條覆寫（主色底上的字用 --tp-accent-on） */
html[data-tp-theme="v2"] .mode-card.primary span,
html[data-tp-theme="v2"] .mode-card.secondary span {
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .seg-btns button[aria-pressed="true"],
html[data-tp-theme="v2"] .tabs button[aria-selected="true"] {
  color: var(--tp-accent-on);
}

/* 寫死 #fff 的輸入與紙面改跟表面權杖，深色才不會破版 */
html[data-tp-theme="v2"] .id-input,
html[data-tp-theme="v2"] .text-input,
html[data-tp-theme="v2"] .seg-btns button,
html[data-tp-theme="v2"] .symbols button,
html[data-tp-theme="v2"] .knife-stops button,
html[data-tp-theme="v2"] .field input,
html[data-tp-theme="v2"] .list article,
html[data-tp-theme="v2"] .paper {
  background: var(--tp-surface);
}

/* 寫死琥珀淺色的拖曳熱區改跟警告淺底 */
html[data-tp-theme="v2"] .drop.over {
  background: var(--tp-warning-soft);
}