/* ============================================================
   土砲 toopower 學習站 — v2 主題覆寫（theme-v2/k.css）
   slug：k　年齡層：kids　年級：幼兒園（學齡前）（數學・國語單元練習）
   對應簡表：
   ・頁面 <style> 的獎勵視窗 .tpr-*：寫死的白底、墨字、綠色
     accent 全部改接 v2 語意權杖（surface／text／line／accent）。
   ・主按鈕 .tpr-btn-primary 一律 accent 朱砂系，不用語意色。
   ・共用檔寫死淺色處（頁首、body 紙紋、漂浮字）補深色覆寫。
   ・深色模式把 v1 常用 primitive 轉指 night 階，元件自動換色。
   ============================================================ */

/* ============================================================
   一、獎勵視窗 .tpr-*（頁面 <style> 寫死色，逐條改接權杖）
   ============================================================ */

html[data-tp-theme="v2"] .tpr-modal {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-radius: var(--tp-radius-card);
  box-shadow: var(--tp-shadow-pop);
  font-family: var(--tp-font-sans);
}

html[data-tp-theme="v2"] .tpr-title,
html[data-tp-theme="v2"] .tpr-label {
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .tpr-lead,
html[data-tp-theme="v2"] .tpr-counter,
html[data-tp-theme="v2"] .tpr-privacy {
  color: var(--tp-text-soft);
}

/* 選項 chip：邊線、選取態、radio 與 focus 全改 accent 系 */
html[data-tp-theme="v2"] .tpr-chip {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-ctl);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .tpr-chip input {
  accent-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-chip.tpr-checked {
  background: var(--tp-accent-soft);
  border-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-chip:focus-within {
  outline-color: var(--tp-focus-ring);
}

/* 文字輸入框 */
html[data-tp-theme="v2"] .tpr-modal textarea,
html[data-tp-theme="v2"] .tpr-modal input[type="text"],
html[data-tp-theme="v2"] .tpr-modal input[type="email"] {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  border-radius: var(--tp-radius-ctl);
  color: var(--tp-text);
  caret-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-modal textarea:focus,
html[data-tp-theme="v2"] .tpr-modal input[type="text"]:focus,
html[data-tp-theme="v2"] .tpr-modal input[type="email"]:focus {
  border-color: var(--tp-accent-strong);
  outline-color: var(--tp-focus-ring);
}

/* 錯誤與狀態訊息 */
html[data-tp-theme="v2"] .tpr-err {
  color: var(--tp-error);
}

html[data-tp-theme="v2"] .tpr-status-ok {
  color: var(--tp-success);
}

html[data-tp-theme="v2"] .tpr-status-err {
  color: var(--tp-error);
}

/* 按鈕：主操作鈕一律 accent 系（朱砂），不用語意色或科目色 */
html[data-tp-theme="v2"] .tpr-btn-primary {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

html[data-tp-theme="v2"] .tpr-btn-primary:hover:not(:disabled),
html[data-tp-theme="v2"] .tpr-btn-primary:active:not(:disabled) {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
}

html[data-tp-theme="v2"] .tpr-btn-ghost {
  background: var(--tp-surface);
  border-color: var(--tp-line);
  color: var(--tp-text);
}

html[data-tp-theme="v2"] .tpr-btn:focus-visible {
  outline-color: var(--tp-focus-ring);
}

/* 開啟視窗的文字連結 */
html[data-tp-theme="v2"] .tpr-open:hover,
html[data-tp-theme="v2"] .tpr-open:focus-visible {
  color: var(--tp-accent-text);
}

/* ============================================================
   二、共用 components.css 寫死或沿用 primitive 之處
   ============================================================ */

/* 年級導航目前頁：朱砂主色改 accent 系，深色自動換 night 階 */
html[data-tp-theme="v2"] .tp-grade-nav a[aria-current="page"] {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

/* ============================================================
   三、深色模式
   v2 權杖只轉語意層；v1 元件大量直接使用 primitive
   （--tp-paper／--tp-ink／--tp-cinnabar…），此處在深色下把
   常用 primitive 轉指 night 階，讓共用元件不需逐條覆寫。
   觸發一：系統偏好深色；觸發二：手動 data-theme="dark"。
   ============================================================ */



html[data-tp-theme="v2"][data-theme="dark"] {
  --tp-paper: var(--tp-night-paper);
  --tp-paper-deep: var(--tp-night-deep);
  --tp-surface-white: var(--tp-night-surface);
  --tp-ink: var(--tp-night-ink);
  --tp-ink-soft: var(--tp-night-soft);
  --tp-ink-faint: var(--tp-night-faint);
  --tp-ink-blue: var(--tp-blue-night);
  --tp-grid-line: var(--tp-night-line);
  --tp-cinnabar: var(--tp-cinnabar-night);
  --tp-cinnabar-dark: var(--tp-cinnabar-night);
  --tp-cinnabar-soft: var(--tp-cinnabar-soft-night);
  --tp-sage: var(--tp-sage-night);
  --tp-sage-deep: var(--tp-sage-night);
  --tp-sage-soft: var(--tp-sage-soft-night);
  --tp-amber: var(--tp-amber-night);
  --tp-amber-deep: var(--tp-amber-night);
  --tp-amber-soft: var(--tp-amber-soft-night);
}

html[data-tp-theme="v2"][data-theme="dark"] body {
  background-color: var(--tp-bg);
  background-image: radial-gradient(rgba(239, 231, 215, 0.035) 1px, transparent 1.2px);
}

html[data-tp-theme="v2"][data-theme="dark"] .tp-site-header {
  background: rgba(33, 29, 23, 0.92);
}

html[data-tp-theme="v2"][data-theme="dark"] .tp-float-layer .tp-float-char {
  color: rgba(239, 231, 215, 0.05);
}