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

   方向：C 沉浸式。照片就是版面，介面浮在照片上。
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── 顏色 ────────────────────────────────────────────────
     深色為主，但商品一律站在淺色板（--plate）上。

     為什麼不能讓商品直接放在深底上：實測 33 張商品去背圖，
     16 張平均亮度低於 70，最暗的 Logo Toe Cover 只有 23.4——
     跟深色底幾乎同亮度，會整件消失。深底配淺色商品板是刻意的
     對比手法，不是補丁。 */
  --bg:        #17171a;   /* 頁面底 */
  --surface:   #1e1e22;   /* 稍微浮起的區塊 */
  --plate:     #f2f0ea;   /* 商品板與反白區塊 */
  --fg:        #ffffff;
  --fg-2:      #b8b3a8;   /* 次要文字（深底上要夠亮才讀得下去）*/
  --muted:     #8f8a7e;   /* 標籤、註解 */
  --line:      #2b2b31;
  --on-plate:       #17171a;  /* 淺色板上的文字 */
  --on-plate-muted: #6b675e;

  /* ── 字體 ────────────────────────────────────────────────
     Archivo 是壓縮感較強的 grotesque，粗體大字有力道，
     接近 PNS 官網的頭條處理。Narrow 給標籤與規格。
     中文一樣交給系統的 PingFang TC，不額外載中文字型。 */
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'PingFang TC',
          'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-narrow: 'Archivo Narrow', 'Archivo', -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;
}