/* app21-writing（作文小幫手）— v2 主題覆寫
   年齡層：kids（朱砂強調、大圓角、溫暖圓潤）。
   對應：--text→--tp-text、--muted→--tp-text-soft、--cream→--tp-bg、--paper／--card→--tp-surface、--sand→--tp-bg-deep、--line→--tp-line。
   對應：--ink→--tp-accent-text、--ink-deep→--tp-accent-strong（原墨藍主色改朱砂系）；--font→--tp-font-sans。
   對應：--sun→--tp-amber、--sun-deep→--tp-warning、--sun-soft→--tp-warning-soft；--leaf→--tp-success、--leaf-soft→--tp-success-soft。
   對應：--good／--warn／--bad→--tp-success／--tp-warning／--tp-error（*-bg 接 *-soft）；--shadow*→--tp-shadow-*、--radius*→--tp-radius-*。 */

/* 一、自訂屬性整批轉向 v2 權杖（深色由 tokens 自動切換） */
html[data-tp-theme="v2"]:root {
  --ink: var(--tp-accent-text);
  --ink-deep: var(--tp-accent-strong);
  --sun: var(--tp-amber);
  --sun-deep: var(--tp-warning);
  --sun-soft: var(--tp-warning-soft);
  --leaf: var(--tp-success);
  --leaf-soft: var(--tp-success-soft);
  --cream: var(--tp-bg);
  --paper: var(--tp-surface);
  --card: var(--tp-surface);
  --sand: var(--tp-bg-deep);
  --line: var(--tp-line);
  --text: var(--tp-text);
  --muted: var(--tp-text-soft);
  --good: var(--tp-success);
  --good-bg: var(--tp-success-soft);
  --warn: var(--tp-warning);
  --warn-bg: var(--tp-warning-soft);
  --bad: var(--tp-error);
  --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-soft: 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,
html[data-tp-theme="v2"] .brand-name {
  font-family: var(--tp-font-serif);
  font-weight: var(--tp-display-weight);
}

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

/* 四、寫死底色的區塊改接權杖（body 點點紋換朱砂淺底） */
html[data-tp-theme="v2"] body {
  background-image: radial-gradient(var(--tp-accent-soft) 1.1px, transparent 1.1px);
}
html[data-tp-theme="v2"] .skip {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .topbar {
  background: var(--tp-bg);
}

/* 五、主按鈕統一接 accent 系：三張彩色卡的「開始」鈕與 .primary 原用墨藍（accent-text）／琥珀／綠實心，
   底色一律改 accent、字色 accent-on、hover/active 用 accent-strong */
html[data-tp-theme="v2"] .card .go {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .card.sun .go,
html[data-tp-theme="v2"] .card.leaf .go {
  background: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .card .go:hover,
html[data-tp-theme="v2"] .card .go:active {
  background: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .primary {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .primary:hover,
html[data-tp-theme="v2"] .primary:active {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
}
html[data-tp-theme="v2"] .sun {
  color: var(--tp-ink);
}
html[data-tp-theme="v2"] .leaf {
  color: var(--tp-accent-on);
}
/* 被選取的切換鈕與目前步驟鈕原用墨藍（accent-text）實心，改接 accent 系 */
html[data-tp-theme="v2"] .chip[aria-pressed="true"],
html[data-tp-theme="v2"] .seg button[aria-pressed="true"] {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}
html[data-tp-theme="v2"] .stepper button[aria-current="step"] {
  background: var(--tp-accent-strong);
  border-color: var(--tp-accent-strong);
  color: var(--tp-accent-on);
}

/* 六、回饋框寫死字色統一接內文色（深淺底皆可讀） */
html[data-tp-theme="v2"] .banner,
html[data-tp-theme="v2"] .feedback,
html[data-tp-theme="v2"] .tip,
html[data-tp-theme="v2"] .okbox {
  color: var(--tp-text);
}

/* 七、選取態與寫字格寫死色改接權杖 */
html[data-tp-theme="v2"] .choice[aria-checked="true"] {
  background: var(--tp-accent-soft);
}
html[data-tp-theme="v2"] .board.framed {
  background: var(--tp-surface);
}
html[data-tp-theme="v2"] .cells {
  background: var(--tp-surface);
  border-top-color: var(--tp-text);
  border-left-color: var(--tp-text);
}
html[data-tp-theme="v2"] .cell {
  border-right-color: var(--tp-text);
  border-bottom-color: var(--tp-text);
}
html[data-tp-theme="v2"] .cell .v {
  border-left-color: var(--tp-text-faint);
}
html[data-tp-theme="v2"] .cell .h {
  border-top-color: var(--tp-text-faint);
}
html[data-tp-theme="v2"] .star-off {
  fill: var(--tp-line);
}

/* 八、列印學習單（螢幕上亦顯示）對齊紙面權杖 */
html[data-tp-theme="v2"] .sheet {
  background: var(--tp-surface);
  color: var(--tp-text);
}
html[data-tp-theme="v2"] .sheet h2,
html[data-tp-theme="v2"] .sheet h3 {
  color: var(--tp-text);
}