/* ============================================================
   app10-rewards（家庭集點樂園）v2 風格覆寫　年齡層：kids（溫暖圓潤）
   自訂屬性→權杖對應簡表：
   --c-ink→--tp-text　--c-ink-2→--tp-text-soft　--c-line→--tp-line
   --c-bg→--tp-bg　--c-bg-2→--tp-bg-deep　--c-paper→--tp-surface
   --c-primary→--tp-accent（主按鈕色）　--c-primary-d→--tp-accent-text
   --c-secondary→--tp-success　--c-accent→--tp-amber　--c-bad→--tp-error　--c-ok→--tp-success
   --shadow→--tp-shadow-1　--shadow-chunk→--tp-shadow-2　--ease→--tp-ease-spring　--font→--tp-font-sans
   ============================================================ */

/* 一、自訂屬性整批改指 v2 權杖（深色模式由權杖自動切換） */
html[data-tp-theme="v2"]:root {
  --c-primary: var(--tp-accent-strong);
  --c-primary-d: var(--tp-accent-text);
  --c-secondary: var(--tp-success);
  --c-secondary-d: var(--tp-success);
  --c-accent: var(--tp-amber);
  --c-accent-d: var(--tp-warning);
  --c-bg: var(--tp-bg);
  --c-bg-2: var(--tp-bg-deep);
  --c-paper: var(--tp-surface);
  --c-ink: var(--tp-text);
  --c-ink-2: var(--tp-text-soft);
  --c-line: var(--tp-line);
  --c-ok: var(--tp-success);
  --c-bad: var(--tp-error);
  --c-blush: var(--tp-accent-soft);
  --c-sky: var(--tp-info);
  --shadow: var(--tp-shadow-1);
  --shadow-chunk: var(--tp-shadow-2);
  --r-sm: var(--tp-radius-ctl);
  --r-md: var(--tp-radius-card);
  --r-lg: var(--tp-radius-xl);
  --r-xl: var(--tp-radius-xl);
  --r-pill: var(--tp-radius-pill);
  --font: var(--tp-font-sans);
  --ease: var(--tp-ease-spring);
}

/* 二、背景暈染改為權杖淺底，深色自動变淡 */
html[data-tp-theme="v2"] body {
  background-image:
    radial-gradient(circle at 12% 6%, var(--tp-warning-soft), transparent 30%),
    radial-gradient(circle at 94% 2%, var(--tp-accent-soft), transparent 26%),
    radial-gradient(circle at 80% 90%, var(--tp-success-soft), transparent 32%);
}

/* 三、按鈕：主鈕朱砂 accent；硬塊陰影換紙感柔影 */
html[data-tp-theme="v2"] .btn {
  color: var(--tp-accent-on);
  box-shadow: var(--tp-shadow-2);
}
html[data-tp-theme="v2"] .btn:active { box-shadow: var(--tp-shadow-1); }
html[data-tp-theme="v2"] .btn[disabled] { box-shadow: none; }
html[data-tp-theme="v2"] .btn:hover { background: var(--tp-accent-strong); }
html[data-tp-theme="v2"] .btn-secondary:hover { background: var(--tp-success); }
html[data-tp-theme="v2"] .btn-accent {
  background: var(--tp-amber);
  color: var(--tp-ink);
}
html[data-tp-theme="v2"] .btn-accent:hover { background: var(--tp-amber); }
html[data-tp-theme="v2"] .btn-paper { color: var(--tp-text); }
html[data-tp-theme="v2"] .btn-paper:hover { background: var(--tp-surface); }
html[data-tp-theme="v2"] .btn-danger {
  background: var(--tp-error-soft);
  color: var(--tp-error);
}
html[data-tp-theme="v2"] .btn-danger:hover { background: var(--tp-error-soft); }
html[data-tp-theme="v2"] .icon-btn,
html[data-tp-theme="v2"] .speech { box-shadow: var(--tp-shadow-1); }

/* 四、焦點環統一為 v2 聚焦色 */
html[data-tp-theme="v2"] .btn:focus-visible,
html[data-tp-theme="v2"] .icon-btn:focus-visible,
html[data-tp-theme="v2"] .mute-btn:focus-visible,
html[data-tp-theme="v2"] .chip:focus-visible,
html[data-tp-theme="v2"] .avatar-pick:focus-visible,
html[data-tp-theme="v2"] .pet-hit:focus-visible {
  outline-color: var(--tp-focus-ring);
}

/* 五、寫死 #fff 與淺色的元件面改為權杖（深色自動翻轉） */
html[data-tp-theme="v2"] .chip,
html[data-tp-theme="v2"] .avatar-pick,
html[data-tp-theme="v2"] .dex-item,
html[data-tp-theme="v2"] .home-kid.add,
html[data-tp-theme="v2"] .badge,
html[data-tp-theme="v2"] .field input,
html[data-tp-theme="v2"] .field select {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .progress { background: var(--tp-bg-deep); }
html[data-tp-theme="v2"] .points-pill,
html[data-tp-theme="v2"] .task-icon,
html[data-tp-theme="v2"] .avatar-pick[aria-pressed="true"] {
  background: var(--tp-warning-soft);
}
html[data-tp-theme="v2"] .board-card.is-done { background: var(--tp-success-soft); }
html[data-tp-theme="v2"] .stamp { background: var(--tp-surface); }

/* 六、選取態統一跟 accent；星星立體字影換邊線色 */
html[data-tp-theme="v2"] .chip[aria-pressed="true"] {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .stars .on {
  color: var(--tp-amber);
  text-shadow: 2px 2px 0 var(--tp-line-strong);
}

/* 七、徽章段位底：寫死粉彩改為權杖淺底 */
html[data-tp-theme="v2"] .badge.on-bronze { background: var(--tp-bg-deep); }
html[data-tp-theme="v2"] .badge.on-silver { background: var(--tp-surface-2); }
html[data-tp-theme="v2"] .badge.on-gold { background: var(--tp-warning-soft); }
html[data-tp-theme="v2"] .badge.on-rainbow {
  background-color: var(--tp-surface);
  background-image: linear-gradient(90deg, var(--tp-accent-soft), var(--tp-warning-soft), var(--tp-success-soft), var(--tp-subject-math-soft));
}

/* 八、吐司與回饋帷幕隨主題翻轉；大標用襯線 */
html[data-tp-theme="v2"] #toast { color: var(--tp-bg); }
html[data-tp-theme="v2"] .feedback { background: var(--tp-bg); }
html[data-tp-theme="v2"] .hero-title { font-family: var(--tp-font-serif); }

/* 九、頁尾行內寫死色改為權杖次要文字 */
html[data-tp-theme="v2"] .tp-foot[style] { color: var(--tp-text-soft) !important; }

/* 十、隱私設定彈窗（tpr-*）全區寫死色改為權杖 */
html[data-tp-theme="v2"] .tpr-modal {
  background: var(--tp-surface);
  color: var(--tp-text);
  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); }
html[data-tp-theme="v2"] .tpr-err,
html[data-tp-theme="v2"] .tpr-status-err { color: var(--tp-error); }
html[data-tp-theme="v2"] .tpr-status-ok { color: var(--tp-success); }
html[data-tp-theme="v2"] .tpr-chip {
  border-color: var(--tp-line);
  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 {
  border-color: var(--tp-accent-strong);
  background: var(--tp-accent-soft);
}
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"] {
  border-color: var(--tp-line);
  color: var(--tp-text);
  background: var(--tp-surface);
}
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 {
  outline-color: var(--tp-focus-ring);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .tpr-btn-primary {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .tpr-btn-ghost {
  background: var(--tp-surface);
  color: var(--tp-text);
  border-color: var(--tp-line);
}
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); }

/* D2d 對比補修（1151001）。 */
/* 點點的對話框底色原本寫死白色，深色模式下淺字落在白底上；改跟主題面底。 */
html[data-tp-theme="v2"] .speech {
  background: var(--tp-surface);
}
