/* ============================================================
   土砲 toopower 學習站 — 設計系統 v2 權杖檔（Design Tokens）
   ------------------------------------------------------------
   本檔是全站唯一的變數來源：核心色票、字體字級間距動效、
   語意層、三層形狀層（kids／junior／more）與深色模式。

   【用法】
   - 年齡層：在 <html> 掛 data-tp-level="kids"（預設）、
     "junior" 或 "more"，即可切換該層的強調色、圓角、
     字重、留白、邊框與陰影比重。
   - 主題：在 <html> 掛 data-theme="light" 或 "dark" 手動指定；
     不掛時自動跟隨系統 prefers-color-scheme。

   【載入順序】
     1. tp-tokens-v2.css      ← 本檔（必須最先）
     2. tp-components-v2.css  ← 入口頁共用元件
     3. tp-shell-v2.css       ← App 內浮鈕（App 頁只需 1＋3）

   舊 App 相容：末段「v1 相容層」保證 v1 所有變數名在 v2
   依然有效，舊頁面不換檔也不會壞。新頁面請一律使用語意層
   （--tp-bg／--tp-surface／--tp-text…）與形狀層，禁止直接
   引用 primitives。
   ============================================================ */


/* ============================================================
   一、核心色票（primitives）
   與 v1 完全一致，hex 不得更動；元件層禁止直接引用本區。
   ============================================================ */
:root {
  color-scheme: light;

  /* ---------- 紙階（背景基底） ---------- */
  --tp-paper: #FAF6EE;          /* 紙色：全站背景 */
  --tp-paper-deep: #F3EDE0;     /* 深一階的紙：區塊底色、凹陷面 */
  --tp-surface-white: #FFFFFF;  /* 白面：卡片、輸入框（v1 的 --tp-surface 保留為相容別名） */

  /* ---------- 墨階（文字） ---------- */
  --tp-ink: #3B352C;            /* 墨色：標題、內文主色 */
  --tp-ink-soft: #6E6558;       /* 次要文字、圖框線 */
  --tp-ink-faint: #A79B8A;      /* 輔助、caption、未來狀態 */
  --tp-ink-blue: #5B7183;       /* 墨藍：連結、資訊 */

  /* ---------- 線 ---------- */
  --tp-line-c: #E7DECD;         /* 卡片邊、分隔線（primitive；語意層是 --tp-line） */
  --tp-grid-line: #E0D4BE;      /* 田字格米字輔助線 */

  /* ---------- 主色朱砂（重點、主按鈕、答錯） ---------- */
  --tp-cinnabar: #C05B4B;
  --tp-cinnabar-dark: #A94A3C;  /* 朱砂深：文字用（對紙對比 ≥4.5:1） */
  --tp-cinnabar-soft: #F6E4DF;  /* 朱砂淺：標記、選取區 */

  /* ---------- 鼠尾草綠（成功、已學會） ---------- */
  --tp-sage: #7C8B6F;
  --tp-sage-deep: #5E6E52;      /* 綠字用（對紙 6.2:1） */
  --tp-sage-soft: #E9EDE2;

  /* ---------- 琥珀（進行中、提示） ---------- */
  --tp-amber: #C99A4B;
  --tp-amber-deep: #A87A2E;     /* 琥珀色文字（大標等級） */
  --tp-amber-soft: #F6ECDA;

  /* ---------- 派生色：more 層亮色強調 ---------- */
  --tp-blue-deep: #43566B;      /* 墨藍 70%＋墨 30%，more 層亮色模式強調色 */

  /* ---------- 派生色：深色模式背景階（由紙階加深而來） ---------- */
  --tp-night-paper: #211D17;    /* 夜間紙色：深色全站背景 */
  --tp-night-deep: #1A1611;     /* 夜間深紙：深色區塊底色 */
  --tp-night-surface: #2B2520;  /* 夜間白面：深色卡片、輸入框 */
  --tp-night-raised: #342D25;   /* 夜間浮起面：hover、popover */
  --tp-night-line: #473F33;     /* 夜間邊線 */

  /* ---------- 派生色：深色模式文字階（由墨階加亮而來） ---------- */
  --tp-night-ink: #EFE7D7;      /* 夜間墨色：深色主文字 */
  --tp-night-soft: #BFB3A0;     /* 夜間墨軟：深色次要文字 */
  --tp-night-faint: #948871;    /* 夜間墨淡：深色輔助文字 */

  /* ---------- 派生色：深色模式強調色（調亮保對比） ---------- */
  --tp-cinnabar-night: #D8806C; /* 朱砂夜間階（kids 深色強調） */
  --tp-sage-night: #9AA98C;     /* 鼠尾草夜間階 */
  --tp-amber-night: #D9B26A;    /* 琥珀夜間階 */
  --tp-blue-night: #93A9BC;     /* 墨藍夜間階（junior 深色強調） */

  /* ---------- 派生色：深色模式淺底（徽章用，低透明度混合） ---------- */
  --tp-cinnabar-soft-night: rgba(216, 128, 108, 0.16);
  --tp-sage-soft-night: rgba(154, 169, 140, 0.16);
  --tp-amber-soft-night: rgba(217, 178, 106, 0.16);
  --tp-blue-soft-night: rgba(147, 169, 188, 0.16);
}


/* ============================================================
   二、字體、字級、行高、字重、間距、圓角基礎、陰影、
       動效、布局、層級、字格
   數值原樣沿用 v1；內文行高 --tp-lh-body 隨層級變動，
   統一在形狀層定義，本區不定義。
   ============================================================ */
:root {
  /* ---------- 字體 ---------- */
  --tp-font-serif: "Noto Serif TC", "Songti TC", serif;      /* 大標：900 */
  --tp-font-sans: "Noto Sans TC", -apple-system, "PingFang TC", sans-serif; /* 內文 */
  --tp-font-kai: "LXGW WenKai TC", "Kaiti TC", "Noto Serif TC", serif;      /* 手寫感：注音、例句 */

  /* ---------- 字級刻度（手機優先，大螢幕微放大） ---------- */
  --tp-fs-overline: 0.75rem;    /* 12px：區塊眉題，配合 letter-spacing 0.12em（v2 新增） */
  --tp-fs-caption: 0.8125rem;   /* 13px：輔助說明 */
  --tp-fs-small: 0.875rem;      /* 14px：次要內文 */
  --tp-fs-body: 1rem;           /* 16px：內文基準 */
  --tp-fs-lead: 1.125rem;       /* 18px：強調段落 */
  --tp-fs-h4: 1.125rem;         /* 18px：小標 */
  --tp-fs-h3: 1.25rem;          /* 20px：區塊標題 */
  --tp-fs-h2: clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem);  /* 22→26px */
  --tp-fs-h1: clamp(1.75rem, 1.4rem + 1.8vw, 2.25rem);    /* 28→36px */
  --tp-fs-display: clamp(2rem, 1.5rem + 2.8vw, 2.75rem);  /* 32→44px 首頁大標 */

  /* ---------- 行高（--tp-lh-body 隨層級，見形狀層） ---------- */
  --tp-lh-tight: 1.35;
  --tp-lh-title: 1.25;
  --tp-lh-zhuyin: 1.05;         /* 直排注音逐字緊貼 */

  /* ---------- 字重 ---------- */
  --tp-fw-regular: 400;
  --tp-fw-medium: 500;
  --tp-fw-bold: 700;
  --tp-fw-black: 900;

  /* ---------- 間距刻度（4px 基準） ---------- */
  --tp-space-1: 0.25rem;   /* 4 */
  --tp-space-2: 0.5rem;    /* 8 */
  --tp-space-3: 0.75rem;   /* 12 */
  --tp-space-4: 1rem;      /* 16 */
  --tp-space-5: 1.25rem;   /* 20 */
  --tp-space-6: 1.5rem;    /* 24 */
  --tp-space-8: 2rem;      /* 32 */
  --tp-space-10: 2.5rem;   /* 40 */
  --tp-space-12: 3rem;     /* 48 */
  --tp-space-16: 4rem;     /* 64 */

  /* ---------- 圓角基礎（元件實際圓角用形狀層 --tp-radius-card 等） ---------- */
  --tp-radius-s: 6px;      /* 田字格、小元件 */
  --tp-radius-m: 10px;     /* 按鈕、輸入框 */
  --tp-radius-l: 16px;     /* 卡片 */
  --tp-radius-xl: 24px;    /* 大面板 */
  --tp-radius-pill: 999px; /* chip、膠囊 */

  /* ---------- 陰影五階（紙感、柔和；深色模式沿用，層次以邊線取代） ---------- */
  --tp-shadow-1: 0 1px 2px rgba(59, 53, 44, 0.06), 0 1px 6px rgba(59, 53, 44, 0.05);
  --tp-shadow-2: 0 2px 6px rgba(59, 53, 44, 0.07), 0 6px 18px rgba(59, 53, 44, 0.07);
  --tp-shadow-3: 0 6px 14px rgba(59, 53, 44, 0.09), 0 16px 40px rgba(59, 53, 44, 0.11);
  --tp-shadow-lift: 0 4px 10px rgba(59, 53, 44, 0.10), 0 12px 28px rgba(59, 53, 44, 0.12);
  --tp-shadow-pop: 0 8px 20px rgba(59, 53, 44, 0.14), 0 20px 48px rgba(59, 53, 44, 0.16);

  /* ---------- 動效 ---------- */
  --tp-time-fast: 150ms;
  --tp-time-base: 250ms;
  --tp-time-slow: 450ms;
  --tp-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 孩子向：回彈 */
  --tp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- 布局 ---------- */
  --tp-container: 72rem;        /* 1152px 最大版心 */
  --tp-header-h: 60px;
  --tp-touch-min: 48px;         /* 一般觸控下限 */
  --tp-touch-kid: 56px;         /* 孩子操作下限 */
  --tp-grid-min: 17rem;         /* 卡片欄最小寬（v2 新增） */
  --tp-shell-offset: 1rem;      /* 浮鈕距邊（v2 新增） */

  /* ---------- 層級 ---------- */
  --tp-z-header: 100;
  --tp-z-shell: 300;            /* 浮鈕層（v2 新增） */
  --tp-z-toast: 400;
  --tp-z-dialog: 500;

  /* ---------- 字格（注音元件用，zhuyin.css 讀取） ---------- */
  --tpz-size: 56px;                 /* 字格邊長，JS 可覆寫 */
  --tpz-cell-border: var(--tp-ink-soft);
  --tpz-grid: var(--tp-grid-line);
}


/* ============================================================
   三、語意層（亮色預設）
   元件只准使用本層與形狀層，禁止直接寫 primitive。
   深色模式於第八區統一覆寫。
   ============================================================ */
:root {
  /* ---------- 背景與表面 ---------- */
  --tp-bg: var(--tp-paper);             /* 全站背景 */
  --tp-bg-deep: var(--tp-paper-deep);   /* 區塊底色、凹陷面 */
  --tp-surface: var(--tp-surface-white); /* 卡片、輸入框 */
  --tp-surface-2: #FDFAF3;              /* 浮起面：hover、popover */

  /* ---------- 文字 ---------- */
  --tp-text: var(--tp-ink);
  --tp-text-soft: var(--tp-ink-soft);
  --tp-text-faint: var(--tp-ink-faint);

  /* ---------- 邊線 ---------- */
  --tp-line: var(--tp-line-c);          /* 卡片邊、分隔線（相容 v1 同名變數） */
  --tp-line-strong: #D9CDB5;            /* 深一階邊線（more 層卡片邊） */

  /* ---------- 狀態語意 ---------- */
  --tp-success: var(--tp-sage-deep);
  --tp-success-soft: var(--tp-sage-soft);
  --tp-warning: var(--tp-amber-deep);
  --tp-warning-soft: var(--tp-amber-soft);
  --tp-error: var(--tp-cinnabar-dark);
  --tp-error-soft: var(--tp-cinnabar-soft);
  --tp-info: var(--tp-ink-blue);

  /* ---------- 科目識別（徽章底色用 soft 階，文字用主階） ---------- */
  --tp-subject-zh: #C05B4B;             /* 國語：朱砂 */
  --tp-subject-zh-soft: #F6E4DF;
  --tp-subject-math: #5B7183;           /* 數學：墨藍 */
  --tp-subject-math-soft: #E4EAF0;
  --tp-subject-en: #5E6E52;             /* 英語：鼠尾草深 */
  --tp-subject-en-soft: #E9EDE2;
  --tp-subject-sci: #A87A2E;            /* 自然：琥珀深 */
  --tp-subject-sci-soft: #F6ECDA;
  --tp-subject-soc: #5B7183;            /* 社會：墨藍 */
  --tp-subject-soc-soft: #E4EAF0;
  --tp-subject-arts: #A87A2E;           /* 藝文：琥珀深 */
  --tp-subject-arts-soft: #F6ECDA;
  --tp-subject-skills: #A94A3C;         /* 綜合能力：朱砂深 */
  --tp-subject-skills-soft: #F6E4DF;

  /* ---------- 聚焦環（亮色） ---------- */
  --tp-focus-ring: #A94A3C;
  --tp-focus-ring-soft: rgba(169, 74, 60, 0.35);
}


/* ============================================================
   四、形狀層 — kids 預設（國小學習站）
   :root 即 kids；兩個選擇器都寫，明確標示 kids 層身分。
   強調色角色：
     --tp-accent        主強調：主按鈕底、啟用態、連結 hover
     --tp-accent-text   文字用強調（紙上對比 ≥4.5:1）：連結、強調字
     --tp-accent-strong 加深：主按鈕 hover
     --tp-accent-on     強調底上的文字色（亮色模式固定 #FFFFFF）
     --tp-accent-soft   淺底：徽章、選取態
     --tp-accent-softer 極淺底：hero 裝飾、大面積暈染
   ============================================================ */
:root,
[data-tp-level="kids"] {
  /* ---------- 強調色：朱砂系 ---------- */
  --tp-accent: #C05B4B;
  --tp-accent-text: #A94A3C;
  --tp-accent-strong: #A94A3C;
  --tp-accent-on: #FFFFFF;
  --tp-accent-soft: #F6E4DF;
  --tp-accent-softer: #FBF1EC;

  /* ---------- 圓角（孩子向：大圓角） ---------- */
  --tp-radius-card: 18px;
  --tp-radius-ctl: 12px;
  --tp-radius-chip: 999px;
  --tp-radius-badge: 999px;

  /* ---------- 標題字重與字距 ---------- */
  --tp-display-weight: 900;
  --tp-display-ls: 0;

  /* ---------- 內文行高（中文內文疏一點，孩子好讀） ---------- */
  --tp-lh-body: 1.9;

  /* ---------- 卡片邊框與陰影 ---------- */
  --tp-card-border: 1px solid var(--tp-line);
  --tp-card-shadow: var(--tp-shadow-2);
  --tp-card-shadow-hover: var(--tp-shadow-lift);

  /* ---------- 留白與字級 ---------- */
  --tp-hero-py: clamp(2.5rem, 6vw, 4rem);
  --tp-section-gap: 3rem;
  --tp-ctl-fz: 1rem;

  /* ---------- hero 裝飾暈染（1＝顯示，0＝關閉） ---------- */
  --tp-hero-decor: 1;

  /* ---------- 標準動效 ---------- */
  --tp-ease-std: var(--tp-ease-spring);
  --tp-time-std: var(--tp-time-base);
}


/* ============================================================
   五、形狀層 — junior 覆寫（國中站）
   墨藍強調、圓角收斂、節奏加快。
   ============================================================ */
[data-tp-level="junior"] {
  /* ---------- 強調色：墨藍系 ---------- */
  --tp-accent: #5B7183;
  --tp-accent-text: #4A5E70;
  --tp-accent-strong: #4A5E70;
  --tp-accent-on: #FFFFFF;
  --tp-accent-soft: #E4EAF0;
  --tp-accent-softer: #EFF3F7;

  /* ---------- 圓角 ---------- */
  --tp-radius-card: 12px;
  --tp-radius-ctl: 8px;
  --tp-radius-chip: 999px;
  --tp-radius-badge: 6px;

  /* ---------- 標題字重與字距 ---------- */
  --tp-display-weight: 800;
  --tp-display-ls: 0.005em;

  /* ---------- 內文行高 ---------- */
  --tp-lh-body: 1.8;

  /* ---------- 卡片邊框與陰影 ---------- */
  --tp-card-border: 1px solid var(--tp-line);
  --tp-card-shadow: var(--tp-shadow-1);
  --tp-card-shadow-hover: var(--tp-shadow-2);

  /* ---------- 留白與字級 ---------- */
  --tp-hero-py: clamp(2rem, 5vw, 3rem);
  --tp-section-gap: 2.5rem;
  --tp-ctl-fz: 0.9375rem;

  /* ---------- hero 裝飾暈染 ---------- */
  --tp-hero-decor: 0.6;

  /* ---------- 標準動效 ---------- */
  --tp-ease-std: var(--tp-ease-out);
  --tp-time-std: var(--tp-time-fast);
}


/* ============================================================
   六、形狀層 — more 覆寫（我想變強）
   深藍強調、方正收斂、無陰影以邊線分層。
   ============================================================ */
[data-tp-level="more"] {
  /* ---------- 強調色：深藍系 ---------- */
  --tp-accent: #43566B;
  --tp-accent-text: #3B4C5E;
  --tp-accent-strong: #36485A;
  --tp-accent-on: #FFFFFF;
  --tp-accent-soft: #E6EAEF;
  --tp-accent-softer: #EEF1F4;

  /* ---------- 圓角 ---------- */
  --tp-radius-card: 8px;
  --tp-radius-ctl: 6px;
  --tp-radius-chip: 6px;
  --tp-radius-badge: 4px;

  /* ---------- 標題字重與字距 ---------- */
  --tp-display-weight: 700;
  --tp-display-ls: 0.02em;

  /* ---------- 內文行高 ---------- */
  --tp-lh-body: 1.75;

  /* ---------- 卡片邊框與陰影（無陰影，以深邊線分層） ---------- */
  --tp-card-border: 1px solid var(--tp-line-strong);
  --tp-card-shadow: none;
  --tp-card-shadow-hover: var(--tp-shadow-1);

  /* ---------- 留白與字級 ---------- */
  --tp-hero-py: clamp(2.5rem, 6vw, 4.5rem);
  --tp-section-gap: 3rem;
  --tp-ctl-fz: 0.9375rem;

  /* ---------- hero 裝飾暈染（關閉，最素） ---------- */
  --tp-hero-decor: 0;

  /* ---------- 標準動效 ---------- */
  --tp-ease-std: var(--tp-ease-in-out);
  --tp-time-std: var(--tp-time-base);
}


/* ============================================================
   七、深色模式（語意層覆寫；形狀層不變，強調色換 night 階）
   兩種觸發都寫，內容相同：
     1. 系統偏好：@media (prefers-color-scheme: dark) 且
        :root 未掛 data-theme="light"
     2. 手動指定：:root[data-theme="dark"]（優先於系統偏好）
   三層 accent 分別換成：kids→朱砂夜間系、junior→墨藍夜間系、
   more→#A9BCD0 系（藍再調亮）；accent-on 深色模式一律
   var(--tp-night-paper)；accent-soft／-softer 用對應
   *-soft-night 透明度色。狀態色與科目色同步換 night 階。
   ============================================================ */

/* ---------- 觸發一：跟隨系統深色（未手動指定亮色時） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* 背景與表面換 night 階 */
    --tp-bg: var(--tp-night-paper);
    --tp-bg-deep: var(--tp-night-deep);
    --tp-surface: var(--tp-night-surface);
    --tp-surface-2: var(--tp-night-raised);

    /* 文字換 night 階 */
    --tp-text: var(--tp-night-ink);
    --tp-text-soft: var(--tp-night-soft);
    --tp-text-faint: var(--tp-night-faint);

    /* 邊線換 night 階 */
    --tp-line: var(--tp-night-line);
    --tp-line-strong: #56493B;

    /* 狀態語意換 night 階 */
    --tp-success: var(--tp-sage-night);
    --tp-success-soft: var(--tp-sage-soft-night);
    --tp-warning: var(--tp-amber-night);
    --tp-warning-soft: var(--tp-amber-soft-night);
    --tp-error: var(--tp-cinnabar-night);
    --tp-error-soft: var(--tp-cinnabar-soft-night);
    --tp-info: var(--tp-blue-night);

    /* 科目識別換 night 階（文字用 night 主階、底色用 *-soft-night） */
    --tp-subject-zh: var(--tp-cinnabar-night);
    --tp-subject-zh-soft: var(--tp-cinnabar-soft-night);
    --tp-subject-math: var(--tp-blue-night);
    --tp-subject-math-soft: var(--tp-blue-soft-night);
    --tp-subject-en: var(--tp-sage-night);
    --tp-subject-en-soft: var(--tp-sage-soft-night);
    --tp-subject-sci: var(--tp-amber-night);
    --tp-subject-sci-soft: var(--tp-amber-soft-night);
    --tp-subject-soc: var(--tp-blue-night);
    --tp-subject-soc-soft: var(--tp-blue-soft-night);
    --tp-subject-arts: var(--tp-amber-night);
    --tp-subject-arts-soft: var(--tp-amber-soft-night);
    --tp-subject-skills: var(--tp-cinnabar-night);
    --tp-subject-skills-soft: var(--tp-cinnabar-soft-night);
    --tp-subject-life: var(--tp-sage-night);
    --tp-subject-life-soft: var(--tp-sage-soft-night);

    /* 聚焦環換夜間值 */
    --tp-focus-ring: #D8806C;
    --tp-focus-ring-soft: rgba(216, 128, 108, 0.4);

    /* kids 強調色（預設層）：朱砂夜間系 */
    --tp-accent: var(--tp-cinnabar-night);
    --tp-accent-text: var(--tp-cinnabar-night);
    --tp-accent-strong: #E39A85;                 /* 朱砂夜間階再調亮：主按鈕 hover */
    --tp-accent-on: var(--tp-night-paper);
    --tp-accent-soft: var(--tp-cinnabar-soft-night);
    --tp-accent-softer: rgba(216, 128, 108, 0.08);
  }

  /* junior 深色：墨藍夜間系 */
  :root:not([data-theme="light"])[data-tp-level="junior"] {
    --tp-accent: var(--tp-blue-night);
    --tp-accent-text: var(--tp-blue-night);
    --tp-accent-strong: #A7BACB;                 /* 墨藍夜間階再調亮：主按鈕 hover */
    --tp-accent-on: var(--tp-night-paper);
    --tp-accent-soft: var(--tp-blue-soft-night);
    --tp-accent-softer: rgba(147, 169, 188, 0.08);
  }

  /* more 深色：藍再調亮系 */
  :root:not([data-theme="light"])[data-tp-level="more"] {
    --tp-accent: #A9BCD0;
    --tp-accent-text: #A9BCD0;
    --tp-accent-strong: #BCCBDB;                 /* 再調亮：主按鈕 hover */
    --tp-accent-on: var(--tp-night-paper);
    --tp-accent-soft: rgba(169, 188, 208, 0.16);
    --tp-accent-softer: rgba(169, 188, 208, 0.08);
  }
}

/* ---------- 觸發二：手動指定深色（含 data-theme 掛在 html 或 body） ---------- */
:root[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;

  /* 背景與表面換 night 階 */
  --tp-bg: var(--tp-night-paper);
  --tp-bg-deep: var(--tp-night-deep);
  --tp-surface: var(--tp-night-surface);
  --tp-surface-2: var(--tp-night-raised);

  /* 文字換 night 階 */
  --tp-text: var(--tp-night-ink);
  --tp-text-soft: var(--tp-night-soft);
  --tp-text-faint: var(--tp-night-faint);

  /* 邊線換 night 階 */
  --tp-line: var(--tp-night-line);
  --tp-line-strong: #56493B;

  /* 狀態語意換 night 階 */
  --tp-success: var(--tp-sage-night);
  --tp-success-soft: var(--tp-sage-soft-night);
  --tp-warning: var(--tp-amber-night);
  --tp-warning-soft: var(--tp-amber-soft-night);
  --tp-error: var(--tp-cinnabar-night);
  --tp-error-soft: var(--tp-cinnabar-soft-night);
  --tp-info: var(--tp-blue-night);

  /* 科目識別換 night 階（文字用 night 主階、底色用 *-soft-night） */
  --tp-subject-zh: var(--tp-cinnabar-night);
  --tp-subject-zh-soft: var(--tp-cinnabar-soft-night);
  --tp-subject-math: var(--tp-blue-night);
  --tp-subject-math-soft: var(--tp-blue-soft-night);
  --tp-subject-en: var(--tp-sage-night);
  --tp-subject-en-soft: var(--tp-sage-soft-night);
  --tp-subject-sci: var(--tp-amber-night);
  --tp-subject-sci-soft: var(--tp-amber-soft-night);
  --tp-subject-soc: var(--tp-blue-night);
  --tp-subject-soc-soft: var(--tp-blue-soft-night);
  --tp-subject-arts: var(--tp-amber-night);
  --tp-subject-arts-soft: var(--tp-amber-soft-night);
  --tp-subject-skills: var(--tp-cinnabar-night);
  --tp-subject-skills-soft: var(--tp-cinnabar-soft-night);
  --tp-subject-life: var(--tp-sage-night);
  --tp-subject-life-soft: var(--tp-sage-soft-night);

  /* 聚焦環換夜間值 */
  --tp-focus-ring: #D8806C;
  --tp-focus-ring-soft: rgba(216, 128, 108, 0.4);

  /* kids 強調色（預設層）：朱砂夜間系 */
  --tp-accent: var(--tp-cinnabar-night);
  --tp-accent-text: var(--tp-cinnabar-night);
  --tp-accent-strong: #E39A85;                   /* 朱砂夜間階再調亮：主按鈕 hover */
  --tp-accent-on: var(--tp-night-paper);
  --tp-accent-soft: var(--tp-cinnabar-soft-night);
  --tp-accent-softer: rgba(216, 128, 108, 0.08);
}

/* junior 深色：墨藍夜間系 */
:root[data-theme="dark"][data-tp-level="junior"],
body[data-theme="dark"][data-tp-level="junior"] {
  --tp-accent: var(--tp-blue-night);
  --tp-accent-text: var(--tp-blue-night);
  --tp-accent-strong: #A7BACB;                   /* 墨藍夜間階再調亮：主按鈕 hover */
  --tp-accent-on: var(--tp-night-paper);
  --tp-accent-soft: var(--tp-blue-soft-night);
  --tp-accent-softer: rgba(147, 169, 188, 0.08);
}

/* more 深色：藍再調亮系 */
:root[data-theme="dark"][data-tp-level="more"],
body[data-theme="dark"][data-tp-level="more"] {
  --tp-accent: #A9BCD0;
  --tp-accent-text: #A9BCD0;
  --tp-accent-strong: #BCCBDB;                   /* 再調亮：主按鈕 hover */
  --tp-accent-on: var(--tp-night-paper);
  --tp-accent-soft: rgba(169, 188, 208, 0.16);
  --tp-accent-softer: rgba(169, 188, 208, 0.08);
}

/* ---------- 強制亮色：手動指定 light 時維持 :root 亮色預設 ---------- */
:root[data-theme="light"] {
  color-scheme: light;
}


/* ============================================================
   八、v1 相容層
   舊版相容，新頁面請用語意層（--tp-bg／--tp-surface／
   --tp-text…）與形狀層，勿再用本區的舊角色名。
   以下逐條確認 v1 每個變數名在 v2 依然有效，舊 App 不換檔
   也不會壞；同名且數值不變者不重複宣告，僅註明所在區段。
   ------------------------------------------------------------
   【primitives，已於第一區同名同值定義，直接沿用】
   --tp-paper        #FAF6EE  紙色（語意層 --tp-bg 亮色指向它）
   --tp-paper-deep   #F3EDE0  深紙（語意層 --tp-bg-deep 指向它）
   --tp-ink          #3B352C  墨色（語意層 --tp-text 指向它）
   --tp-ink-soft     #6E6558  墨軟（語意層 --tp-text-soft 指向它）
   --tp-ink-faint    #A79B8A  墨淡（語意層 --tp-text-faint 指向它）
   --tp-ink-blue     #5B7183  墨藍（語意層 --tp-info 指向它）
   --tp-grid-line    #E0D4BE  田字格線（--tpz-grid 指向它）
   --tp-cinnabar / --tp-cinnabar-dark / --tp-cinnabar-soft  原值
   --tp-sage / --tp-sage-deep / --tp-sage-soft              原值
   --tp-amber / --tp-amber-deep / --tp-amber-soft           原值

   【語意層，已於第三區同名定義，直接沿用】
   --tp-surface      白面；v1 固定 #FFFFFF，v2 指向語意層，
                     本來就該隨主題變（深色下為夜間白面）
   --tp-line         邊線；v1 固定 #E7DECD，v2 隨主題變
   --tp-success / --tp-success-soft      狀態語意，照 v1 對應
   --tp-warning / --tp-warning-soft      狀態語意，照 v1 對應
   --tp-error / --tp-error-soft          狀態語意，照 v1 對應
   --tp-info                             狀態語意，照 v1 對應
   --tp-subject-zh / --tp-subject-zh-soft      國語，原值
   --tp-subject-math / --tp-subject-math-soft  數學，原值
   --tp-focus-ring / --tp-focus-ring-soft      聚焦環，亮色原值、
                                             深色自動換夜間值

   【字體、字級、行高、字重、間距、圓角、陰影、動效、
     布局、層級、字格：已於第二區同名同值定義】
   --tp-font-serif / --tp-font-sans / --tp-font-kai
   --tp-fs-caption / --tp-fs-small / --tp-fs-body / --tp-fs-lead /
   --tp-fs-h4 / --tp-fs-h3 / --tp-fs-h2 / --tp-fs-h1 / --tp-fs-display
   --tp-lh-tight / --tp-lh-title / --tp-lh-zhuyin
   --tp-lh-body    v1 固定 1.9；v2 移入形狀層隨層級變動
                   （kids＝1.9 與 v1 相同，junior＝1.8、more＝1.75）
   --tp-fw-regular / --tp-fw-medium / --tp-fw-bold / --tp-fw-black
   --tp-space-1 … --tp-space-16（含 2、3、4、5、6、8、10、12）
   --tp-radius-s / --tp-radius-m / --tp-radius-l /
   --tp-radius-xl / --tp-radius-pill
   --tp-shadow-1 / --tp-shadow-2 / --tp-shadow-3 /
   --tp-shadow-lift / --tp-shadow-pop
   --tp-time-fast / --tp-time-base / --tp-time-slow
   --tp-ease-out / --tp-ease-spring / --tp-ease-in-out
   --tp-container / --tp-header-h / --tp-touch-min / --tp-touch-kid
   --tp-z-header / --tp-z-toast / --tp-z-dialog
   --tpz-size / --tpz-cell-border / --tpz-grid
   ============================================================ */
:root {
  /* 生活科：鼠尾草階，v1 相容別名（v2 正式科目請用 --tp-subject-en 等） */
  --tp-subject-life: var(--tp-sage);
  --tp-subject-life-soft: var(--tp-sage-soft);
}