/* 設計 token —— 全站唯一正本
 *
 * ⚠️ 顏色、字體、尺度都只在這裡定義。後台（admin.css）與家屬訂購頁
 *    （order.css）都載入這一份。
 *
 * ⚠️ 2026/8/25 之前這些 token 在兩個檔案**各定義一次**，而且已經走鐘了：
 *      --paper   admin.css = #fff      order.css = #FFFDF9   ← 同名不同值
 *    同名不同值是最容易改出 bug 的一種狀況 ——「把 #fff 換成 var(--paper)」
 *    這種看似安全的重構，在其中一邊會改變顏色。
 *
 * ⚠️ 沒有正本也是字級跑出 26 種、間距跑出 26 種的根本原因：
 *    每加一個畫面就得憑印象抓數字，沒有東西可以對照。
 */

:root {
  /* ════════ 顏色 ════════ */
  --gold-deep: #6E6446;   /* 主色：標題、按鈕、強調文字 */
  --gold-mid:  #A39972;   /* hover、次要標籤、裝飾線 */
  --khaki:     #C6C4AF;   /* 分隔線、細節裝飾 */
  --cream:     #F7F6F2;   /* 背景主色 */
  --paper:     #FFFDF9;   /* 卡片底色，比背景再亮一階，讓區塊浮起來 */
  --ink:       #2A2620;   /* 內文文字 */
  --ink-soft:  #6B655C;   /* 次要說明文字 */
  --line:      #E4E1D6;   /* 表格線、輸入框邊界 */
  --warn:      #9A5B3C;   /* 提醒用的磚紅，跟金棕同色系不會突兀 */
  --ok:        #4A6B4E;   /* 完成、正常狀態 */

  /* ════════ 字體 ════════ */
  --sans: 'Noto Sans TC', -apple-system, 'PingFang TC', sans-serif;
  --serif: 'Noto Serif TC', 'Songti TC', serif;
  --en-serif: 'Cormorant Garamond', 'Liberation Serif', 'Times New Roman', serif;
  /* 要被「一個字一個字唸出來或抄下來」的數字專用。
     ⚠️ 不能用上面那個裝飾性襯線字（Cormorant Garamond）——
        它的 1 和 l、0 和 O、5 和 S 在小字級下很容易看錯，
        而銀行帳號抄錯一碼錢就匯到別人戶頭、訂單編號唸錯就查不到單。
        等寬字型每個數字同寬、字形差異明確，就是為了這種場合存在的。 */
  --mono: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, Consolas, monospace;

  /* ════════ 字級（8 階）════════
   *
   * ⚠️⚠️ 2026/9/24 起一律 **rem**，讓「小／中／大」一個根值帶動整頁
   *    （見 public/css/font-size.css）。括號裡的 px 是「小」那一段的值，
   *    也就是 2026/9/24 之前的大小：1rem ＝ 16px。
   *    中（112.5%）× 1.125、大（125%）× 1.25。
   *
   * ⚠️ 換算基準永遠是 **÷16**，不是除以目前的根值。
   *    改成除以 18（中）的話，「小」會把表單字級壓到 16px 以下，踩到下面那個 iOS 坑。
   *
   * ⚠️ --fs-input 是**硬性下限**，不是美感選擇：
   *    iOS Safari 聚焦在字級小於 16px 的輸入元件時會自動放大整頁，
   *    使用者填完一欄就要手動縮回去。表單控制項一律不得低於它。
   *    寫成 max(16px, 1rem)：字級放大時跟著長大，縮到「小」時也**絕不低於 16px**。
   *    （手機稽核 test-mobile.mjs 有守著。） */
  --fs-micro: 0.6875rem;  /* 11px　標籤、註記 */
  --fs-xs:    0.75rem;    /* 12px　說明文字、表格次要欄 */
  --fs-sm:    0.8125rem;  /* 13px　表格內文 */
  --fs-md:    0.875rem;   /* 14px　內文 */
  --fs-input: max(16px, 1rem);  /* 16px　表單控制項下限 ⚠️ 不可調低 */
  --fs-lg:    1.125rem;   /* 18px　區塊標題 */
  --fs-xl:    1.3125rem;  /* 21px　頁面標題 */
  --fs-2xl:   1.5rem;     /* 24px　大標 */

  /* ════════ 間距（4px 網格）════════ */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  20px;
  --sp-7:  24px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 48px;
  --sp-11: 64px;
  --sp-12: 96px;

  /* ⚠️ 1px 的髮絲線不進間距網格 —— 那是線，不是間距。 */
  --rule: 1px solid var(--khaki);

  --sidebar-w: 232px;
}