/* ============================================================
   k19-typing（鍵盤小超人）— v2 風格覆寫（只覆寫，不改版面）
   年齡層：kids；科目：綜合（原橘主色與 kids 朱砂同族，直接併入 accent 系）
   對應簡表：--c-paper→--tp-bg；--c-card→--tp-surface；--c-cream→--tp-bg-deep；
   --c-ink→--tp-text；--c-ink-soft→--tp-text-soft；--c-line→--tp-line；
   --c-primary 系→--tp-accent 系（主按鈕、當前字）；--c-on-primary→--tp-accent-on；
   --c-accent 系→--tp-accent 系（次主色併入）；--c-gold 系→--tp-warning 系（星星、提示）；
   --c-good(-soft)→--tp-success(-soft)、--c-bad(-soft)→--tp-error(-soft)；
   圓角→--tp-radius-*；--shadow(-sm)→--tp-shadow-2／-1；--font→--tp-font-sans；
   手指分區色 --f-* 保留原色（教學編碼），僅深色降明度。
   ============================================================ */

html[data-tp-theme="v2"]:root {
  --c-primary: var(--tp-accent-strong);
  --c-primary-dark: var(--tp-accent-strong);
  --c-primary-soft: var(--tp-accent-soft);
  --c-accent: var(--tp-accent-strong);
  --c-accent-dark: var(--tp-accent-strong);
  --c-accent-soft: var(--tp-accent-soft);
  --c-gold: var(--tp-warning);
  --c-gold-ink: var(--tp-warning);
  --c-gold-soft: var(--tp-warning-soft);
  --c-ink: var(--tp-text);
  --c-ink-soft: var(--tp-text-soft);
  --c-line: var(--tp-line);
  --c-paper: var(--tp-bg);
  --c-card: var(--tp-surface);
  --c-cream: var(--tp-bg-deep);
  --c-good: var(--tp-success);
  --c-good-soft: var(--tp-success-soft);
  --c-bad: var(--tp-error);
  --c-bad-soft: var(--tp-error-soft);
  --c-on-primary: var(--tp-accent-on);
  --shadow: var(--tp-shadow-2);
  --shadow-sm: var(--tp-shadow-1);
  --r-sm: var(--tp-radius-ctl);
  --r-md: var(--tp-radius-ctl);
  --r-lg: var(--tp-radius-card);
  --r-pill: var(--tp-radius-chip);
  --font: var(--tp-font-sans);
}

/* 背景圓點：原橘點換 accent 淺底，深色自動對齊 */
html[data-tp-theme="v2"] body {
  background-image: radial-gradient(var(--tp-accent-soft) 1.1px, transparent 1.1px);
}

/* 標題換襯線 */
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 淺底＋文字用強調色 */
html[data-tp-theme="v2"] .btn-soft {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-text);
}

/* 已打過的字：改成功綠，與當前字（accent）區分 */
html[data-tp-theme="v2"] .glyph .did {
  color: var(--tp-success);
}

/* 鍵盤提示條：琥珀字對比不足，改主文字 */
html[data-tp-theme="v2"] .kb-hint {
  background: var(--tp-warning-soft);
  color: var(--tp-text);
}

/* 寫死 white 的面：改白面權杖 */
html[data-tp-theme="v2"] .chip,
html[data-tp-theme="v2"] .field,
html[data-tp-theme="v2"] .paper {
  background: var(--tp-surface);
}

/* 進度條軌道 */
html[data-tp-theme="v2"] .prog {
  background: var(--tp-bg-deep);
}

/* 鍵盤 SVG：鍵帽描邊與功能鍵底色改權杖 */
html[data-tp-theme="v2"] .kb .keycap {
  stroke: var(--tp-line-strong);
}
html[data-tp-theme="v2"] .kb .finger-mod {
  fill: var(--tp-surface);
}

/* 答案與選取態外光圈：跟焦點環柔色 */
html[data-tp-theme="v2"] .finger-btn.is-answer,
html[data-tp-theme="v2"] .keybig.is-on {
  box-shadow: 0 0 0 3px var(--tp-focus-ring-soft);
}

/* 圖例色票描邊 */
html[data-tp-theme="v2"] .sw {
  border-color: var(--tp-line-strong);
}

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

/* 深色：手指分區色降明度，保持可分辨又不刺眼 */
@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:not([data-theme="light"]):root {
    --f-lp: #8a5a4c;
    --f-lr: #8f6b3f;
    --f-lm: #7d6e30;
    --f-li: #5f7a45;
    --f-ri: #4c7a72;
    --f-rm: #4e6e8f;
    --f-rr: #6a5e8f;
    --f-rp: #8f5a6e;
    --f-th: #6e5c4c;
  }
}
html[data-tp-theme="v2"][data-theme="dark"]:root {
  --f-lp: #8a5a4c;
  --f-lr: #8f6b3f;
  --f-lm: #7d6e30;
  --f-li: #5f7a45;
  --f-ri: #4c7a72;
  --f-rm: #4e6e8f;
  --f-rr: #6a5e8f;
  --f-rp: #8f5a6e;
  --f-th: #6e5c4c;
}

/* D2d 對比補修（1151001）：深色模式下手指分區色是中低明度色塊，字用主題淺字只有 1.9 到 2.8:1；字改白色（黃綠分區同步加深）。 */
@media (prefers-color-scheme: dark) {
  html[data-tp-theme="v2"]:not([data-theme="light"]) [class^="finger-"],
  html[data-tp-theme="v2"]:not([data-theme="light"]) [class*=" finger-"] {
    color: #FFFFFF;
  }
}

html[data-tp-theme="v2"][data-theme="dark"] [class^="finger-"],
html[data-tp-theme="v2"][data-theme="dark"] [class*=" finger-"] {
  color: #FFFFFF;
}