/* ═══════════════════════════════════════════════════════════
   設計 token —— 這個檔案是唯一該出現「數值」的地方。
   style.css 只引用 var()，不再寫死 px。

   方向：賽事計時感 + 淺底。刻意跟換季穿搭指南（深灰黑底 #17171a
   + 壓縮感較強的 grotesque 字體）相反 —— 兩個站打開的瞬間就要分
   得出來（Evan 2026-09-16 的硬需求）。版面節奏仍是「照片就是版
   面，介面浮在照片上」，換的是底色、字型、重點色三樣。
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── 顏色 ────────────────────────────────────────────────
     紙白底、墨黑字、訊號黃當唯一重點色 —— 賽事計時感。
     與行程手冊的 CLOSED CIRCUIT 同一家族：公司的賽事類產出
     彼此一致。

     商品仍然站在 --plate 這塊板上（跟穿搭指南一樣有板，但理由反過來）：
     深底時怕深色商品消失，淺底時怕白色／淺色商品糊成一片。
     --plate 比 --bg 深一階給邊界，商品卡另外再加一道 --line 邊框
     當保險（不逐張看圖比對，見商品卡 CSS 註解）。 */
  --bg:        #f4f2ed;   /* 紙白。不用純白：手機在戶外反光會刺眼 */
  --surface:   #ffffff;   /* 浮起的卡片 */
  --plate:     #e8e5dd;   /* 商品板。比底稍深，白色去背商品才有邊界 */
  --fg:        #14140f;   /* 墨黑 */
  --fg-2:      #45433c;
  --muted:     #6b6860;   /* 標籤、註解。這個值是量過對比才定的，不要「調淡一點比較好看」 */
  --line:      #d6d2c8;
  --on-plate:       #14140f;  /* 淺色板上的文字 */
  --on-plate-muted: #5c594f;
  --signal:     #ffd400;  /* 訊號黃：關鍵數字、選中的賽事、安全帽風鏡區的標記 */
  --on-signal:  #14140f;
  --acc-plate:  #ddd9cf;  /* 配件卡片底。淺底上換成白色／淺色商品才是問題（深底
                              時相反）：不逐張看圖驗證，改用卡片邊框（--line）當保險 */

  /* ── 字體 ────────────────────────────────────────────────
     號碼布與計時器的語彙，跟穿搭指南壓縮感較強的 grotesque 刻意
     不同。Narrow 給賽事名與大數字，一般體給內文。中文一樣交給
     系統的 PingFang TC，不額外載中文字型。 */
  --font: 'Barlow', -apple-system, BlinkMacSystemFont, 'PingFang TC',
          'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-narrow: 'Barlow Condensed', 'Barlow', -apple-system,
                 'PingFang TC', 'Noto Sans TC', sans-serif;

  /* ── 字級 ──────────────────────────────────────────────── */
  --fs-micro:   10.5px;  /* 規格、序號 */
  --fs-small:   12px;    /* 註解、出處 */
  --fs-ui:      13.5px;  /* 表單 */
  --fs-opt:     16px;    /* 上排選項——門市裡站著看，要夠大 */
  --fs-body:    15px;
  --fs-lead:    17px;    /* 情境文案 */
  --fs-h3:      20px;
  --fs-figure:  clamp(42px, 12vw, 72px);   /* 換算器數字 */
  --fs-display: clamp(40px, 11.5vw, 78px); /* 主標題 */

  /* ── 字距 ────────────────────────────────────────────── */
  --ls-display: -0.035em;  /* 粗體大字要收得更緊 */
  --ls-eyebrow:  0.16em;

  /* ── 間距 ────────────────────────────────────────────── */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  36px;
  --s7:  56px;
  --s8:  88px;

  --gutter:  clamp(16px, 4.5vw, 48px);
  --section: clamp(40px, 8vw, 88px);

  /* ── 其他 ────────────────────────────────────────────── */
  --radius: 2px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.22s;
  --measure: 60ch;
  --max: 1400px;
}