/* ============================================================================
 * common/tokens.css — 跨主題共用 Design Token 層
 * ============================================================================
 *
 * 用途：
 *   定義全站（所有主題共用）的 design token（CSS 自訂屬性），作為
 *   common 托底樣式與各主題覆寫的單一色彩／尺度來源。
 *   - common/*.css 引用 token 取得 default 基準值
 *   - themes/<theme>/base.css 於 :root 覆寫 token 值，即可整體換膚
 *
 * 命名規範（完整規範見 docs/front/css-development-guideline.md §4.4）：
 *   --cms-<類別>-<角色>[-<變體>]
 *   類別：color / font / text（字級）/ space（間距）/ radius / shadow
 *   主題私有 token：--cms-<主題縮寫>-...（如 3ffood 的 --cms-sf-color-primary），
 *   不得與全域 token 撞名。
 *
 * 載入順序：
 *   本檔為 webThemeCss 載入鏈第一支（所有 common / themes 檔之前），
 *   僅含 :root 變數定義，不得寫任何元件規則。
 *
 * 基準值原則（issue #698）：
 *   所有 token 初始值取自 common/base.css 現況實測值，屬純等價替換，
 *   不改變任何主題現有視覺；主題差異化覆寫屬母票 #695 後續階段。
 *
 * 變更記錄：issue #698（母票 #695 階段一：建立 design token 層）
 * ============================================================================ */

:root {
  /* ---- 色彩：品牌 ---- */
  --cms-color-primary: #4fc1f0;            /* 品牌主色（選取反白、按鈕 hover 底、強調邊框） */
  --cms-color-primary-rgb: 79, 193, 240;   /* 供 rgba(var(--cms-color-primary-rgb), α) 使用 */
  --cms-color-dark: #131313;               /* 深色底／連結 hover 深字 */
  --cms-color-accent: #007bff;             /* 動作藍（badge-primary、輪播箭頭 hover；源自 BS4 primary） */
  --cms-color-gold: #a06400;               /* 金棕強調（timeline／sgs 區塊） */

  /* ---- 色彩：表面與背景 ---- */
  --cms-color-surface: #ffffff;            /* 頁面／卡片底色 */
  --cms-color-bg-soft: #f6f6f6;            /* 淺灰區塊底（.gray-bg／.default-bg／.footer-top） */

  /* ---- 色彩：文字 ---- */
  --cms-color-text: #333333;               /* 內文（p） */
  --cms-color-text-secondary: #666666;     /* 次要文字（a／button／input 預設） */
  --cms-color-text-muted: #999999;         /* 輔助文字（label 等） */
  --cms-color-text-inverse: #ffffff;       /* 深色底上的反白文字 */
  --cms-color-ink: #1f2d3d;                /* 淺色 badge 上的深字 */

  /* ---- 色彩：邊框與分隔 ---- */
  --cms-color-border: #eeeeee;             /* 一般框線（select／pagination） */
  --cms-color-border-strong: #cccccc;      /* 較深框線 */
  --cms-color-divider: #eceff8;            /* hr 分隔線 */

  /* ---- 色彩：互動元件深色 ---- */
  --cms-color-btn-dark: #313131;           /* btnSummit／btnNormal／cart-action／pagination active 深色系 */

  /* ---- 色彩：狀態 ---- */
  --cms-color-secondary: #6c757d;
  --cms-color-success: #28a745;
  --cms-color-info: #17a2b8;
  --cms-color-warning: #ffc107;
  --cms-color-danger: #dc3545;

  /* ---- 字型 ---- */
  --cms-font-family-base: 'Noto Sans TC', 'Raleway', sans-serif;

  /* ---- 字級尺度（common 現況實測值） ---- */
  --cms-text-xs: 12px;
  --cms-text-sm: 13px;
  --cms-text-base: 14px;                   /* body 基準 */
  --cms-text-md: 15px;
  --cms-text-lg: 16px;
  --cms-text-xl: 18px;
  --cms-text-2xl: 20px;
  --cms-text-3xl: 24px;
  --cms-line-height-base: 24px;            /* body 基準行高 */
  --cms-text-h1: 48px;
  --cms-text-h2: 36px;
  --cms-text-h3: 28px;
  --cms-text-h4: 22px;

  /* ---- 間距尺度（母票 #695 階段三 #701：common/base.css 的 .mt-*／.pt-*／.plr-* 等
     間距 utility 已全數改接下列數值 token；主題於 :root 覆寫任一 --cms-space-<px>
     即可整體縮放對應間距。數值 token 為間距系統本體，語意別名（xs/sm/…）供設計參照。 ---- */
  --cms-space-0: 0;
  --cms-space-1: 1px;
  --cms-space-2: 2px;
  --cms-space-3: 3px;
  --cms-space-4: 4px;
  --cms-space-5: 5px;
  --cms-space-10: 10px;
  --cms-space-15: 15px;
  --cms-space-20: 20px;
  --cms-space-25: 25px;
  --cms-space-30: 30px;
  --cms-space-35: 35px;
  --cms-space-40: 40px;
  --cms-space-50: 50px;
  --cms-space-55: 55px;
  --cms-space-60: 60px;
  --cms-space-70: 70px;
  --cms-space-80: 80px;
  --cms-space-90: 90px;
  --cms-space-100: 100px;
  --cms-space-110: 110px;
  --cms-space-120: 120px;
  --cms-space-130: 130px;
  --cms-space-140: 140px;
  --cms-space-150: 150px;
  --cms-space-160: 160px;
  --cms-space-185: 185px;
  --cms-space-200: 200px;

  /* 語意別名（供設計參照與新碼引用；指向上方數值 token） */
  --cms-space-xs: var(--cms-space-5);
  --cms-space-sm: var(--cms-space-10);
  --cms-space-md: var(--cms-space-15);
  --cms-space-lg: var(--cms-space-20);
  --cms-space-xl: var(--cms-space-30);
  --cms-space-2xl: var(--cms-space-40);
  --cms-space-3xl: var(--cms-space-50);
  --cms-space-4xl: var(--cms-space-80);

  /* ---- 圓角 ---- */
  --cms-radius-sm: 3px;
  --cms-radius-md: 10px;
  --cms-radius-lg: 20px;
  --cms-radius-pill: 99rem;

  /* ---- 陰影 ---- */
  --cms-shadow-btn-inset: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;  /* a.button 系列內框線 */
  --cms-shadow-soft: 0 0 4px rgba(0, 0, 0, 0.1);                /* 輸入框／通用陰影 */

  /* ---- Bootstrap 接線 ----
   * 讓 BS 元件跟隨主題 token。BS 5.2.3 的 --bs-<theme-color>（非 -rgb）
   * 無任何執行期消費者（已驗證 bootstrap.css 內 var(--bs-primary) 出現 0 次），
   * 本階段接線對現況視覺零影響，屬前瞻接點。
   *
   * 刻意不接的變數（接了會改變現況視覺，違反 #698 驗收「五主題視覺完全不變」）：
   *   --bs-primary-rgb 等 -rgb 系列：.text-primary 等 utility 以
   *     rgba(var(--bs-primary-rgb), α) !important 即時消費，且前台 blade
   *     實際使用中（orders/cancel·return 的金額、商品頁登入提示連結）；
   *   --bs-body-* / --bs-link-*：body、表單等元件即時消費。
   *   待母票 #695 後續主題化階段有意識地啟用。 */
  --bs-primary: var(--cms-color-primary);
  --bs-secondary: var(--cms-color-secondary);
  --bs-success: var(--cms-color-success);
  --bs-info: var(--cms-color-info);
  --bs-warning: var(--cms-color-warning);
  --bs-danger: var(--cms-color-danger);
}