/* 排版憲法 —— 全站共用的字級、間距、顏色 token(2026-08-09 建立)
 *
 * 為什麼需要:實際掃描 site/v2 四個主要頁面的結果是 font-size 49 種、
 * padding 106 種、gap 34 種、margin-top 24 種 —— 12px 與 12.5px 同時大量使用,
 * 人眼分不出差別,只會讓版面「說不上來的不整齊」。390px 實測更發現判決頁的
 * 卡片內容左緣有 31 / 33 / 37 / 41px 四種,應該只有一條。
 *
 * 這個檔案「只定義、不套用」—— 載入它不會改變任何現有畫面。舊的 inline style
 * 逐批換成 var(...),每批可獨立驗證與回退。
 *
 * 硬規則(2026-08-09 起):不再新增裸寫的 font-size / gap / margin / padding
 * 數值,一律用下面的 token。違反的話 scripts/check_tokens.py 會抓出來。
 *
 * 刻意不做的事:不建元件庫、不做文件站、不重寫 runtime —— 那對一人維運的
 * 專案是過度工程。這裡只要一份 token、8 種文字角色、9 階間距、3 條對齊規則。
 */

:root {
  /* ---- 顏色 ---------------------------------------------------------- */
  --bg: #0a0a0b;
  --surface-1: #111214;
  --surface-2: #17191c;
  --border-1: rgba(255, 255, 255, .10);
  --border-2: rgba(255, 255, 255, .16);

  --text-1: #f4f4f6;   /* 主要內容 */
  --text-2: #c8c8d0;   /* 次要內容 */
  --text-3: #8a8a92;   /* 說明、註記(80/20 原則裡的「小字灰色」) */
  --text-4: #55555a;   /* 極次要、停用 */

  /* --ac 由各頁自己定(主色可能隨主題調),這裡只給語意色 */
  --danger: #ff5c4d;
  --warning: #ffb020;
  --info: #3ba7ff;

  /* ---- 字級:只准用這 8 階 -------------------------------------------
   * 對應現有值的收斂方式:
   *   9px / 10px / 10.5px   → --fs-micro(11px 還放不下就改文案,不再縮字)
   *   12.5px                → --fs-caption
   *   13.5px                → --fs-body
   *   14.5px / 15px         → --fs-body 或 --fs-title-sm(依語意)
   *   17px / 19px           → --fs-title-sm 或 --fs-title-md
   */
  --fs-micro:    11px;   /* 圖表座標、極次要註記。不得承載操作或關鍵資訊 */
  --fs-caption:  12px;   /* 時間、資料來源、信心說明。配 --text-3 */
  --fs-compact:  13px;   /* 晶片、表格次欄、緊湊列表。不用於長段落 */
  --fs-body:     14px;   /* 全站預設正文、輸入欄、按鈕 */
  --fs-title-sm: 16px;   /* 卡片標題、重要列表數值 */
  --fs-title-md: 20px;   /* 區塊標題。每個區塊最多一個 */
  --fs-title-lg: 28px;   /* 頁面主標。手機不超過兩行 */
  --fs-display:  40px;   /* 判決百分比、核心票價。一個首屏最多一個 */

  /* ---- 行高:中文不要照搬英文介面的緊密行高 -------------------------- */
  --lh-display: 1.08;
  --lh-title:   1.25;
  --lh-compact: 1.4;
  --lh-body:    1.55;

  /* ---- 字重:只留四種。中文字型在 800/900 下會糊成一團 ---------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- 間距:4px 基準九階 --------------------------------------------
   * 日常主要用 8 / 12 / 16 / 24 / 32;--sp-1(4px)只用於同一資訊單元內。
   * 5 / 6 / 7 / 9 / 10 / 11 / 14 / 18px 不再新增。
   * 2px 只允許做圖示微調(transform: translateY(2px)),不當排版間距。
   *
   * 用途對照:
   *   標籤 → 對應數值        --sp-1
   *   標題 → 一行說明        --sp-2
   *   同一列的並列項目        --sp-2 / --sp-3
   *   卡片內兩組資訊          --sp-4
   *   卡片與卡片之間          --sp-3
   *   頁面主標區 → 第一張卡   --sp-5
   *   大區塊與大區塊          --sp-6
   *   頁面底部安全距離        --sp-7
   */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;

  /* ---- 元件 ----------------------------------------------------------
   * --pad-page 與 --pad-card 決定「中文閱讀主軸」那條左緣。兩者相加就是
   * 卡片內文字的左緣;全站必須一致,否則就會出現 31/33/37/41px 那種
   * 看得出怪、說不出哪裡怪的錯位。
   */
  --pad-page: 24px;
  --pad-card: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --control-h: 44px;   /* 觸控目標下限 */
}

@media (max-width: 680px) {
  :root {
    --pad-page: 16px;
    --pad-card: 16px;
  }
}

@media (max-width: 340px) {
  :root {
    --pad-page: 12px;
    --pad-card: 12px;
    --fs-title-lg: 26px;
    --fs-display: 36px;
  }
}

/* ---- 文字角色 --------------------------------------------------------
 * 這些 class 目前沒有任何地方用到 —— 載入這個檔案不會改變現有畫面。
 * 之後逐批把 inline style 換成這些 class。
 */
.t-micro    { font-size: var(--fs-micro);    line-height: var(--lh-compact); color: var(--text-3); }
.t-caption  { font-size: var(--fs-caption);  line-height: var(--lh-compact); color: var(--text-3); }
.t-compact  { font-size: var(--fs-compact);  line-height: var(--lh-compact); color: var(--text-2); }
.t-body     { font-size: var(--fs-body);     line-height: var(--lh-body);    color: var(--text-2); }
.t-card-title    { font-size: var(--fs-title-sm); line-height: var(--lh-compact); font-weight: var(--fw-semibold); color: var(--text-1); }
.t-section-title { font-size: var(--fs-title-md); line-height: var(--lh-title);   font-weight: var(--fw-semibold); color: var(--text-1); }
.t-page-title    { font-size: var(--fs-title-lg); line-height: var(--lh-title);   font-weight: var(--fw-bold);     color: var(--text-1); }
.t-display       { font-size: var(--fs-display);  line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: -.02em; }

/* ---- 對齊 ------------------------------------------------------------
 * 三條規則,不要逐張卡憑感覺decide:
 *   1. 中文閱讀內容一律靠左,且共用同一條左緣軸線
 *   2. 可比較的數字靠右,並套 tabular-nums(等寬數字才對得齊位數)
 *   3. 只有空狀態與單一結果置中
 * 標籤不因為數值靠右就跟著靠右 —— 用 .metric-row 的雙欄。
 */
.a-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.a-value {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-3);
}