/* ── 中日韓字型 ────────────────────────────────────────────
   ⚠️ **這是子集,不是完整字型。** 只含 source/ 底下實際用到的
   1,339 個中日韓字元 —— 完整的 Noto Sans HK 是 9.6 MB、SC 是 14.4 MB,
   子集後各約 310 KB / 350 KB。

   ⚠️ **新增中文文案時必須重新產生子集。** 用到子集以外的字時,
   瀏覽器會落回系統字型;系統沒有中文字型的機器上就是豆腐格(▯),
   而且**不會有任何錯誤** —— 只有字看不見。
   design-system/fonts/README.md 有重新產生的指令,
   而 60-deploy-web.sh 會在佈署前擋下用到子集外字元的文案。

   ⚠️ 繁體用 HK 版而非 TC 版:香港字形標準與台灣不同(例如「骨」「產」),
   用錯版本對香港使用者是明顯的錯字,不是風格差異。

   ⚠️ font-display: swap —— 字型還沒下載完時先用系統字型顯示,
   而不是留白。留白(font-display: block)在慢速連線上會讓整頁中文
   消失數秒,看起來像頁面壞了。 */
@font-face {
  font-family: 'Noto Sans HK Subset';
  src: url('../fonts/NotoSansHK-subset.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans SC Subset';
  src: url('../fonts/NotoSansSC-subset.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/* CertiEye — Typography tokens
   ⚠️ 字型為**替代品**(Nunito Sans / Inter)—— 品牌字型尚未提供。
   ⚠️ N1:字型必須自帶,禁止從 CDN 載入。字型檔在 ../fonts/,見該目錄的 README。
 */

/* ⚠️ 先前這個檔只寫字型**名稱**,沒有 @font-face,目錄裡也沒有字型檔 ——
   於是 'Inter' 與 'Nunito Sans' 在使用者機器上幾乎必然不存在,
   瀏覽器直接退到後備的 Arial/Helvetica。版面與設計稿差很遠,
   而且不會有任何錯誤:CSS 找不到字型是靜默降級,不是失敗。 */

@font-face {
  font-family: 'Inter';
  /* ⚠️ 可變字型:單一檔案涵蓋 100–900,不需要每個字重各一個檔。 */
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  /* ⚠️ font-display: swap —— 字型載入前先用後備字型顯示文字。
     預設的 auto 在多數瀏覽器等同 block:字型下載完成前**文字是隱形的**,
     344 KB 在慢速連線上可能是一兩秒的空白畫面。 */
  font-display: swap;
}

@font-face {
  font-family: 'Nunito Sans';
  /* ⚠️ 上游(google/fonts)只發布 TTF,此處是自行轉出的 woff2
     (558 KB → 205 KB)。轉檔步驟記在 ../fonts/README.md ——
     換字型版本時必須重跑,否則會是舊字型配新版本號。 */
  src: url('../fonts/NunitoSans.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ⚠️ **Nunito Sans 與 Inter 都沒有漢字。**
     少了中日韓的後備字型,所有中文會落到瀏覽器的最終 fallback ——
     在有系統中文字型的機器上看起來正常,在沒有的機器上是一整排豆腐格(▯)。
     實測:headless 容器裡側欄的「繁體中文 / 简体中文」就是 ▯▯▯▯,
     而英文部分完全正常 —— 沒有任何錯誤訊息,只有字看不見。

     ⚠️ 這裡列的是**系統字型**,不是打包的。真正保證得了的做法是
     把 Noto Sans HK / Noto Sans SC 子集化後隨頁面出貨(憲章 N1:
     不得從 CDN 取字型)。原型 bundle 每個 8–15 MB,其中約 95%
     正是內嵌的字型 —— 那是它們在任何機器上中文都顯示得出來的原因。
     本 app 目前沒有打包中日韓字型,列為待處理。

     ⚠️ 繁體要 HK 版而非 TC 版:香港字形與台灣字形在部分字上不同
     (例如「骨」「産」),用錯版本對香港的使用者是明顯的錯字。 */
  /* 打包的子集排第一 —— 它是唯一保證存在的。後面的系統字型是
     「使用者機器上有更完整的版本時就用它」,而不是唯一指望。

     ⚠️ **兩個子集互為後備,順序決定字形。**
     Noto Sans HK 沒有簡體專用字(「简」「订」等 177 個),
     Noto Sans SC 則兩種字形都有。所以:
       繁體模式 HK 優先 —— 拿到正確的香港字形,遇到簡體字才退到 SC
       簡體模式 SC 優先 —— 反之
     少了互為後備這一層,語言切換鈕上的「简体中文」在繁體模式下
     就是豆腐格(實測過)—— 因為那三個語言名是**同時**顯示的。 */
  --font-cjk-tc: 'Noto Sans HK Subset', 'Noto Sans SC Subset',
                 'PingFang HK', 'Noto Sans HK', 'Microsoft JhengHei', sans-serif;
  --font-cjk-sc: 'Noto Sans SC Subset', 'Noto Sans HK Subset',
                 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --font-app: 'Nunito Sans', ui-rounded, 'Segoe UI', system-ui,
              'Noto Sans HK Subset', 'Noto Sans SC Subset', 'PingFang HK', sans-serif;
  --font-platform: 'Inter', Helvetica, Arial, system-ui,
                   'Noto Sans HK Subset', 'Noto Sans SC Subset', 'PingFang HK', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale (px) */
  --fs-display: 34px;   /* app verdict headline */
  --fs-h1: 24px;
  --fs-h2: 20px;
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  --lh-tight: 1.15;    /* @kind font */
  --lh-normal: 1.45;   /* @kind font */
  --lh-loose: 1.6;     /* @kind font */

  /* Semantic */
  --text-verdict: var(--fw-extrabold) var(--fs-display)/var(--lh-tight) var(--font-app);
  --text-heading: var(--fw-semibold) var(--fs-h2)/var(--lh-tight) var(--font-platform);
  --text-default: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-platform);
  --text-label: var(--fw-semibold) var(--fs-sm)/var(--lh-normal) var(--font-platform);
}