/* ============================================================
   k11-sentence-patterns（句型積木）v2 風格覆寫
   年齡層：kids（國語科練習 App）
   自訂屬性 → 權杖對應簡表：
   --c-bg→--tp-bg、--c-bg-warm→--tp-accent-softer、--c-surface→--tp-surface、--c-line→--tp-line
   --c-ink→--tp-text、--c-ink-soft→--tp-text-soft
   --c-primary／--c-primary-dark→--tp-accent／--tp-accent-strong（主按鈕、勾選態、品牌字）
   --c-secondary(-dark)→--tp-success（選取態、進度條）；--c-accent(-dark)→--tp-warning（金色裝飾、星星）
   --c-info→--tp-info、--c-danger→--tp-error、--c-ok-bg→--tp-success-soft、--c-hint-bg→--tp-warning-soft、--c-bad-bg→--tp-error-soft
   --radius-sm→--tp-radius-ctl、--radius→--tp-radius-card、--radius-lg→--tp-radius-xl、--shadow(-sm)→--tp-shadow-2/-1、--font→--tp-font-sans
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --c-bg: var(--tp-bg);
  --c-bg-warm: var(--tp-accent-softer);
  --c-surface: var(--tp-surface);
  --c-ink: var(--tp-text);
  --c-ink-soft: var(--tp-text-soft);
  --c-line: var(--tp-line);
  --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-info: var(--tp-info);
  --c-danger: var(--tp-error);
  --c-ok-bg: var(--tp-success-soft);
  --c-hint-bg: var(--tp-warning-soft);
  --c-bad-bg: var(--tp-error-soft);
  --radius-sm: var(--tp-radius-ctl);
  --radius: var(--tp-radius-card);
  --radius-lg: var(--tp-radius-xl);
  --shadow: var(--tp-shadow-2);
  --shadow-sm: var(--tp-shadow-1);
  --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);
}
html[data-tp-theme="v2"] .stem {
  font-family: var(--tp-font-kai);
}

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

/* 背景裝飾暈染（原寫死蜜桃與薄荷）改跟 accent／success 極淺底 */
html[data-tp-theme="v2"] body::before {
  background: var(--tp-accent-softer);
}
html[data-tp-theme="v2"] body::after {
  background: var(--tp-success-soft);
}

/* 黏貼頂列原為半透明寫死米色，改隨主題紙色 */
html[data-tp-theme="v2"] .topbar {
  background: var(--tp-bg);
}

/* 主按鈕與勾選態字色跟隨 accent-on，深色自動反轉 */
html[data-tp-theme="v2"] .btn.primary,
html[data-tp-theme="v2"] .seg:has(input:checked),
html[data-tp-theme="v2"] .check:has(input:checked) {
  color: var(--tp-accent-on);
}

/* 金色按鈕改為提示淺底款，維持深淺模式對比 */
html[data-tp-theme="v2"] .btn.accent {
  background: var(--tp-warning-soft);
  border-color: var(--tp-warning);
  color: var(--tp-text);
}

/* 標籤徽章用國語科目色識別 */
html[data-tp-theme="v2"] .tag {
  background: var(--tp-subject-zh-soft);
}

/* 寫死白面與淺底覆寫：輸入框、圖示鈕、落格 */
html[data-tp-theme="v2"] input[type="text"],
html[data-tp-theme="v2"] textarea,
html[data-tp-theme="v2"] .icon-btn {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .slot {
  background: var(--tp-success-soft);
}

/* 未得星星（原寫死淺褐）改跟邊線色，深色可辨 */
html[data-tp-theme="v2"] .star polygon {
  fill: var(--tp-line);
}

/* D2d 對比補修（1151001）。 */
/* 八種句型鈕的底色是 JS 行內寫死的淺粉彩，深色模式下淺字落在淺底（約 1.0:1）；深色改成主題面底。 */
@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:not([data-theme="light"]) .pattern-grid .btn {
    background: var(--tp-surface) !important;
  }
}

html[data-tp-theme="v2"][data-theme="dark"] .pattern-grid .btn {
  background: var(--tp-surface) !important;
}

/* D2d 對比補修（1151001）。 */
/* 考卷紙張維持白底（App 寫死白底，深色權杖會把紙內字變淺而落在白紙上）：深色模式下紙內一律用列印深墨 #1F1B14；亮色模式不變。 */
@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:not([data-theme="light"]) .sheet,
  html[data-tp-theme="v2"]:not([data-theme="light"]) .sheet * {
    color: #1F1B14 !important;
  }
}

html[data-tp-theme="v2"][data-theme="dark"] .sheet,
html[data-tp-theme="v2"][data-theme="dark"] .sheet * {
  color: #1F1B14 !important;
}