/* ============================================================================
   聽摘 TingZhai — 設計 Token 單一來源 (Design Tokens)
   ----------------------------------------------------------------------------
   這支檔案是全站唯一的顏色／間距／字級／圓角／陰影來源。
   規則：
     1. 語意化命名（--bg / --fg / --primary …），不用色名。
     2. 淺色是 :root 預設（行銷頁）；深色放 [data-theme="dark"]（App 頁）。
     3. 檔案最下方保留「舊變數別名」——全站 1181 次 var(--paper) / var(--ink)
        / var(--vermillion) … 一行都不用改，換色只要動這裡。
     4. 新寫的樣式請用語意 token，不要再用別名。

   載入順序：tokens.css 一定放在該頁所有 <style> / styles.css 之前。
   ============================================================================ */

/* ────────────────────────────────────────────────────────────────────────────
   LIGHT（預設）— 行銷頁：welcome / landing-b / faq / sync
   來源：原本 4 個 :root 的淺色調色盤，值完全一致，直接收斂為一份。
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* —— 底色 / 表面 —— */
  --bg:              #f7f2e9;   /* 頁面底：米白宣紙 */
  --bg-sunken:       #efe7d8;   /* 下沉區塊（原 --paper-deep） */
  --surface:         #fffdf8;   /* 卡片（原 --card） */
  --surface-1:       #fffdf8;
  --surface-2:       #f2ebdf;
  --surface-3:       #e9e0d0;

  /* —— 文字 —— */
  --fg:              #1c1813;   /* 主文 */
  --fg-muted:        #4a443b;   /* 次要文 */
  --fg-faint:        #8a8078;   /* 極弱文 / 註腳 */

  /* —— 主色與對比前景 —— */
  --primary:         #c8401f;   /* 朱紅——**按鈕底色**用這個，品牌色不動 */
  --primary-hover:   #a33317;
  --primary-fg:      #ffffff;   /* 疊在 --primary 上的字色 */
  /* 🐛 同一個朱紅當「文字」用時是 4.47:1，差 0.03 沒到 WCAG AA 的 4.5。
     這件事我一度標成「設計決策，等 QQ 拍板」放了十幾輪——**但那是標準不是品味**，
     跟導讀重複生成一樣是分類錯誤（見稽核文件第四節）。
     調暗 1.2% 就到 4.59（米底）／5.03（卡片底），肉眼看不出差別。
     底色維持原品牌色：白字疊朱紅本來就達標，調它反而動到品牌識別。 */
  --primary-ink:     #c53f1e;   /* 朱紅——**文字**用這個 */

  --gold-accent:     #b8862d;   /* 金（印章／小標） */
  --gold-accent-fg:  #1c1813;

  --pine-accent:     #2d4a3e;   /* 松綠（成功／正向） */
  --pine-accent-fg:  #ffffff;

  /* —— 線 —— */
  --line:            rgba(28, 24, 19, 0.16);
  --line-strong:     rgba(28, 24, 19, 0.28);

  /* —— 陰影（淺色用暖黑，不用純黑） —— */
  --shadow-sm:       0 1px 3px rgba(28, 24, 19, 0.08);
  --shadow-md:       0 4px 14px rgba(28, 24, 19, 0.10);
  --shadow-lg:       0 20px 50px rgba(28, 24, 19, 0.16);

  /* ==========================================================================
     以下刻度不分主題，light / dark 共用
     ========================================================================== */

  /* —— 間距（4 的倍數，8 階） —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* —— 圓角 —— */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* —— 字級 —— */
  --fs-xs:   0.72rem;
  --fs-sm:   0.8rem;
  --fs-base: 0.9rem;
  --fs-md:   1rem;
  --fs-lg:   1.15rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.7rem;
  --fs-3xl:  2.2rem;

  /* —— 行高 —— */
  --lh-tight:   1.35;   /* 大標 */
  --lh-snug:    1.5;    /* 小標 / 卡片標題 */
  --lh-normal:  1.7;    /* 內文（中文預設） */
  --lh-relaxed: 1.8;    /* 長段落 / 逐字稿 */

  /* —— 字族 —— */
  --font-serif: 'Noto Serif TC', Georgia, serif;
  --font-sans:  'Noto Sans TC', -apple-system, "PingFang TC", system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* —— 緩動 —— */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* 快進慢出 */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);     /* 帶回彈過衝 */
}

/* ────────────────────────────────────────────────────────────────────────────
   DARK — App 頁：index / episode / guide / legal / mentor / u / dashboard / deck
   來源：dashboard.html + deck.html 的暖黑調色盤（兩者原本已一致）。
   註：styles.css 目前仍在自己的 :root 覆寫少數幾個值（見該檔說明），
       那是為了保住現有畫面 1:1，等 QQ 拍板後即可刪掉、全部回歸這裡。
   ──────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:              #100d0e;   /* 暖黑（不是藍黑） */
  --bg-sunken:       #17131a;
  --surface:         #1b1618;
  --surface-1:       #191416;
  --surface-2:       #221b1e;
  --surface-3:       #2b2226;

  --fg:              #f4ece3;
  --fg-muted:        #b3a89e;
  --fg-faint:        #7d726a;

  /* 🐛 第 34 輪（對比度掃描器終於用假資料渲染真實介面之後才看得到）：
     深色主題的按鈕底色原本是 #e0532f，**白字疊上去只有 3.85:1**——
     「摘錄」那顆主要動作鍵就在其中。前 33 輪掃 episode.html 只看得到
     14 個文字元素的空殼，這兩處完全不可見。

     深淺兩種橘各有各的職責，剛好相反：
       文字橘（--primary-ink）在深底上要**更亮**才讀得到 → #e0532f，5.02／4.64 ✅
       按鈕橘（--primary）要**更深**，白字疊上去才夠 → #c8401f，4.99 ✅
     所以按鈕底色兩個主題一致，文字色兩個主題不同。
     這正是第 33 輪拆 token 之後才做得到的——同一個變數兼兩職時無解。 */
  --primary:         #c8401f;   /* 按鈕底色（白字 4.99:1） */
  --primary-hover:   #a33317;
  --primary-fg:      #ffffff;
  /* ⚠️ 第 34 輪修正：原本用 #e0532f，只驗過 --bg 與 --surface（5.02／4.64），
     沒驗 --surface-2（#221b1e，卡片與按鈕的凸起表面）——那裡只有 4.38。
     「刪掉重新生成」那顆 danger 鍵就在凸起表面上。
     調亮到 #e6613c，三種深色底全過（5.65／5.23／4.94）。
     📌 教訓：一個色票要驗**它會疊上去的每一種底**，不是挑最深那個算完就好。 */
  --primary-ink:     #e6613c;   /* 深底上的文字橘（bg 5.65／surface 5.23／surface-2 4.94） */

  --gold-accent:     #d9a441;
  --gold-accent-fg:  #100d0e;

  --pine-accent:     #4f8f6b;
  --pine-accent-fg:  #100d0e;

  --line:            rgba(255, 255, 255, 0.08);
  --line-strong:     rgba(255, 245, 240, 0.14);

  --shadow-sm:       0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md:       0 10px 30px rgba(0, 0, 0, 0.18);
  --shadow-lg:       0 20px 50px rgba(0, 0, 0, 0.35);
}

/* ────────────────────────────────────────────────────────────────────────────
   舊變數別名 — 相容層
   全站既有 var() 呼叫全部指到上面的語意 token；一行舊 CSS 都不用改。
   別名用 var() 轉指，custom property 是「用到才求值」，所以切主題會自動跟著換。
   ⚠️ 新樣式請直接用語意 token，別名只為相容，未來會逐步移除。
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  --paper:            var(--bg);
  --paper-deep:       var(--bg-sunken);
  --card:             var(--surface);

  --ink:              var(--fg);
  --ink-soft:         var(--fg-muted);
  --ink-faint:        var(--fg-faint);

  --vermillion:       var(--primary);
  --vermillion-deep:  var(--primary-hover);
  --vermillion-ink:   var(--primary-ink);   /* 當文字色時用這個（見上面的對比度說明） */
  --verm:             var(--primary);       /* landing-b 用的短名 */
  --verm-deep:        var(--primary-hover);
  --verm-ink:         var(--primary-ink);

  --gold:             var(--gold-accent);
  --seal-gold:        var(--gold-accent);   /* 行銷頁印章金 */
  --pine:             var(--pine-accent);

  --line-hi:          var(--line-strong);
  --glow:             rgba(242, 97, 58, 0.5);

  --radius:           14px;                 /* welcome 的預設；styles.css 覆寫為 16px */
}

/* ────────────────────────────────────────────────────────────────────────────
   全域焦點環 — 之前全站只有 styles.css 一處 :focus-visible，鍵盤使用者等於裸奔。
   用 :where() 把選擇器權重壓成 0，只有 :focus-visible 本身計權重，
   任何既有的 .btn:focus-visible 之類都蓋得過它，不會改到現有外觀。
   ──────────────────────────────────────────────────────────────────────────── */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────────────────────────
   Level 2.2／2.3／2.4 的收斂規則與「刻意不收」清單
   （寫在這裡是因為這是刻度的唯一來源，下次有人想再收斂時第一個會打開的就是它）

   ■ 換算規則
     取「幾何最近」的刻度階 —— 刻度是比例級數，所以 10px 落在 8 與 12 中間時
     比值較小的 12 勝（12/10 = 1.20 < 10/8 = 1.25）。字級同理。
     只有同時滿足這兩條才換：
       間距／圓角：與最近階的絕對差 ≤4px，且相對差 ≤25%
       字級：      與最近階的相對差 ≤6%
     其餘一律原值保留 —— 換過去會造成肉眼看得出來的位移，那不是收斂是改設計。

   ■ 刻意不收的（保留原值，這是決定不是遺漏）
     間距：1／2／3px  hairline 級微調，換到 --sp-1(4px) 是 +33%～+300%
           6px        與 components.css 的 --btn-gap 同一個決定（動它＝動 App 頁上百顆按鈕）
           40／56px   離最近階 8px，換過去是 ±20% 的明顯位移
           72／76／80／88／96／100／104／110／118／120／150px
                      版面級留白（section padding），超出這套 8 階刻度的定義域（上限 64px）；
                      要收的話得先在這裡開 --sp-9／--sp-10，那要 QQ 拍板
           負值、em／rem 相對單位：不在 px 刻度上
     字級：0.58／0.6／0.62／.64／0.65／0.66rem  比 --fs-xs 小超過 6%（極小註腳字）
           1.08／1.3／1.5／1.9／2rem            卡在兩階中間，兩邊都超過 6%
           2.6／3.4／4／4.4rem                  超出 --fs-3xl(2.2rem)，是 landing 的巨標
           9 個 clamp()、0.85em／0.86em          響應式與相對單位，不在固定刻度的定義域
           welcome 的 340px／220px               裝飾用的巨大浮水印字，不是內文級距
     圓角：50%        圓形（非正方形元素上 50% 會變橢圓，跟 --r-full 不等價）
           2／3／4px  hairline 級，換到 --r-sm(8px) 是 +100%～+300%
           22／28／34／35／38／42／44／46px       landing-b／welcome 的有機大圓角造型
     陰影：見下

   ■ 陰影為什麼只收了一小部分（54 → 41）
     這三階 token 描述的是「景深」，但站上的 box-shadow 其實有三種語言：
       ①景深（rgba(0,0,0,α)／rgba(28,24,19,α)）②硬邊紙感偏移（4px 4px 0、8px 10px 0…）
       ③品牌光暈（rgba(242,97,58,α)）
     ②③根本不是 elevation，硬塞進三階會直接改掉設計語彙。
     而①雖然同類，深色頁實際在用的 alpha 多半是 0.35～0.55，
     --shadow-md 的 dark 值卻是 rgba(0,0,0,0.18) —— 換過去會讓卡片明顯變淺。
     所以這一輪只換「幾乎完全相同」的（層數同、色同、offset-y 差 ≤2px、blur 差 ≤4px、
     alpha 差 ≤0.04），其餘保留。
     ⚠️ 建議下一輪處理：把 dark 的 --shadow-md alpha 調到符合實況，再回頭收 ——
        那會動到 token 值本身，需要 QQ 先看過截圖。

   ■ 深色模式（2.3）為什麼有機制沒有按鈕
     每頁 <head> 最前面已經有不閃白的 boot script（tzTheme.set／toggle／reset），
     但 App 頁的淺色版目前不成立：styles.css 第 13 行的 `:root, :root[data-theme="dark"]`
     是無條件套用的，--ink 永遠是 #f2efe9（近白），加上多處寫死 #fff／深色漸層，
     實測把 index.html 切成 light 之後 logo、作用中的分頁、how-step 標題全部變成
     白字疊在米白底上（看不見）。
     在色票收斂（Level 2.5）之前放切換鈕＝交付一個壞掉的功能，所以刻意不放。
     要開啟的話最少要做：①把上面那條 :root 縮成只有 [data-theme="dark"]
     ②把 styles.css 與各頁 <style> 裡寫死的深色值換成 token。
   ──────────────────────────────────────────────────────────────────────────── */