/* ═══════════════════════════════════════════════════════════════
   江湖貨郎．設計 token（唯一來源）
   2026-08-27 Mate-2 建・Strider 拍板「把研究筆記那塊也改成跟官網同規格」

   🧬 出身：首頁與 19 篇 notes 各自有一份內嵌 CSS，實測 20 個檔案裡有 16 種
      不同的樣式雜湊 ⇒ 同一件事散在 20 個地方，「呼應」永遠只能靠人去對。
      實測差距（WebKit 390）：
        正文    首頁 17px/行高1.8   筆記 17px/行高1.85   ← 這個本來就對上了
        大標    首頁 30px/字重400   筆記 26px/字重900    ← 這才是「沒呼應」的本體
      ⇒ 抽成一份共用 token，改一次兩邊一起變。

   🔴 規矩：
     1. 這裡是**唯一**可以定義字級／行高／間距／字體的地方。
        頁面 CSS 一律引用變數，不准再寫死 px。
     2. 新增一階之前先問：現有的階梯真的裝不下嗎？（首頁曾經有 16 種字級＝沒有階梯）
     3. 改這份＝改全站，改完兩邊都要跑 TypoGate 四視寬。
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 字體：標題與正文兩套聲音 ── */
  /* 標題用襯線（Newsreader 只有拉丁字，中文自動落到 Noto Serif TC） */
  --font-display: 'Newsreader Latin','Noto Serif TC',serif;
  --font-body: -apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --font-mono: ui-monospace,'SF Mono',Menlo,monospace;

  /* ── 字級階梯（手機為基準，桌機在下面覆蓋大的那幾階）── */
  --fs-meta:  12px;    /* 日期、標籤、註腳 */
  --fs-small: 13.5px;  /* 次要說明 */
  --fs-body:  15px;    /* 介面文字、清單 */
  --fs-read:  17px;    /* 正文（長文與首頁段落都用這階） */
  --fs-lead:  19px;    /* 導言、重點句 */
  --fs-h3:    21px;    /* 小節標題 */
  --fs-h2:    24px;    /* 段落主標 */
  --fs-h1:    30px;    /* 頁面主標 */

  /* ── 標題的聲音：大而細，不是小而粗 ──
     這是這輪首頁定調出來的語氣，notes 要呼應的就是它。 */
  --fw-display: 400;
  --lh-display: 1.2;
  --ls-display: -0.01em;

  /* ── 行高 ── */
  --lh-tight: 1.35;
  --lh-body:  1.8;
  --lh-read:  1.85;   /* 長文再鬆一點 */

  /* ── 節奏（段落之間的呼吸，比刪字更能救可讀性）── */
  --sp-p:       1.15em;  /* 段落與段落 */
  --sp-block:   28px;    /* 區塊與區塊 */
  --sp-section: 44px;    /* 大段與大段 */

  /* ── 行長上限：中文一行超過 20 字就開始難讀 ── */
  --measure: 32em;
}

@media (min-width:1080px){
  :root{
    --fs-h1: 44px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-lead: 20px;
  }
}