/* ===== Ofucos 品牌色 SSOT — 全系統唯一色彩來源（2026-06-18 定根）=====

   🔴 規則：改品牌色「只改這一個檔」。
   🆕 2026-10-07 起本檔也是【設計變數】唯一主檔（狀態色／灰階／字級／圓角／陰影，見檔尾），不另開第二份樣式主檔。
   所有 CSS 系統（style.css / erp.html / marketing.html …）都用 var(--brand-*) 引用這裡，
   不准在別的檔再寫死品牌 hex（否則就是散亂、違反 SSOT）。

   🟢 2026-07-14：「Tailwind 例外」這條規矩已廢除。
      pos-page（收銀台）/ self-checkin / checkin-stay / checkout-stay / course-feedback
      過去各抄一份 raw hex，理由寫的是「Tailwind 含 /透明度 修飾、無法安全吃 CSS 變數 ⇒ 只能採例外」。
      【該技術判斷經實測證明是錯的】：只要色值寫成 `rgb(var(--x-rgb) / <alpha-value>)`，
      Tailwind 的 /5 /10 /20 透明度修飾完全正常（實測 pos-page 144 處 + 客人端 28 處，
      computed 值與 raw hex 100% 相同）。那個「例外」本身，就是色值散落各頁的根源 ⇒ 已消滅。

   🟢 2026-09-23（排隊 v3 R8）：上面那筆「後台仍有 19 處寫死品牌 hex」**已全部收斂，現在是 0**——
      payment-settle.js(5) / dashboard.html(4) / beds.html(4) / style.css(2) /
      erp.html(1) / crm.html(1) / cost.html(1) / ads.html(1) 全改成 token，色值逐字不變
      （無頭 Chrome 量 computed 值：改前＝改後，16 組全同）。

   🔴 為什麼這裡不再留「要重新盤點就跑這行 grep」：
      那條規矩 7/14 寫在這裡當 watch-item，**三個月後重盤還是 19 處**——因為沒有任何機器在跑它。
      判準已搬進機器守門、每天 05:45 隨 run-all 跑：
        node calendar-tools/test/frontend-r8-brand-token.test.js
      它做四件事：①程式碼（真的剝掉註解後）寫死品牌 hex ＝ 0 ②本檔每個 --brand-*-rgb 的
      hex 註解必須等於 RGB ③全站 var(--brand-*, #hex) 的 fallback 值必須等於本檔當下的值
      ④品牌色清單**從本檔解析**、不抄第二份 ⇒ 改品牌色時守門自動跟著改。
      再有人寫死一處，當天紅。

   ── 改品牌色 SOP（給設計師）──────────────────────────────
   1. 拿到新色的 hex（例 #1a4f7a）→ 用任何工具轉成 RGB 三個數字（26 79 122）
   2. 只改下面對應的那一行 --brand-*-rgb
   3. 全系統（含後台 41 頁、收銀台、客人端報到頁）自動吃到，不用改任何其他檔
   ──────────────────────────────────────────────────── */
:root {
  /* 🔴 每個品牌色的【唯一值來源】＝下面的 RGB 三數字。
     下一段的 hex 形式（--brand-navy 等）由 rgb() 即時組出
     ⇒ 同一個顏色不存在第二份值、不可能漂移。

     為什麼主檔要存 RGB 而不是 hex：
     Tailwind 的透明度修飾（bg-ap-blue/10）需要 `rgb(R G B / alpha)` 這種「可插入 alpha」的形式，
     hex 無法被插入 alpha。兩種形式只能擇一為主 ⇒ 選 RGB 當主、hex 由它衍生（衍生不會漂移）。

     ⚠️ 每行後面括號裡的 hex 只是「給人辨識用的註解」，程式不讀它。改色時請順手更新它。 */
  --brand-navy-rgb:         20 63 98;      /* (#143f62) 品牌 navy — 頂部列、主按鈕、標題、連結 */
  --brand-navy-deep-rgb:    14 45 71;      /* (#0e2d47) navy hover 加深 */
  --brand-cyan-rgb:         46 175 198;    /* (#2eafc6) 品牌 cyan — 亮色強調、focus、active */
  --brand-cyan-hover-rgb:   37 150 172;    /* (#2596ac) cyan hover 加深 */
  --brand-cyan-light-rgb:   227 244 248;   /* (#e3f4f8) 淺 cyan 底（badge、選取背景） */
  --brand-cyan-subtle-rgb:  241 250 252;   /* (#f1fafc) 最淺 cyan 底 */

  /* ===== 頁面底色 SSOT（2026-07-14 定根）=====
     全後台唯一的「頁面最底層底色」。改後台底色只改下面這一行。

     🔴 為什麼要有這個變數（治的是什麼病）：
     在此之前「底色」沒有主檔 —— 行銷/ERP 那 8 頁各自在自己的 HTML <style>:root
     抄一份色票（--g100），抄了 8 次；erp.html 抄成 #f2f2f7（差一階灰）⇒ 多出第三種底色。
     原本該當行銷系色票主檔的 mk-shared.css 是死檔（零頁面載入）⇒ 每頁只能複製貼上
     ⇒ 複製必然漂移。此變數就是那個一直缺席的主檔。（mk-shared.css 已於 2026-07-14 刪除。）

     🔴 不要拿 --g100 / --gray-100 當底色：那是【灰階色階】，被 erp.html 用 37 次、
     crm.html 16 次去畫卡片/表格/hover 底。改它的值＝連帶改掉 80+ 處元件。
     「底色」與「灰階」是兩件事，語意分開才不會互相污染。 */
  --brand-bg-rgb:           243 249 251;   /* (#f3f9fb) 頁面底色 — 品牌淡青（呼應 navy 側欄 + cyan 強調） */

  /* ===== hex 形式（由上面的 RGB 衍生，不是第二份主檔）=====
     給既有 CSS 用：41 頁後台的 var(--brand-navy) 等用法完全不用改，值也完全不變。 */
  --brand-navy:        rgb(var(--brand-navy-rgb));
  --brand-navy-deep:   rgb(var(--brand-navy-deep-rgb));
  --brand-cyan:        rgb(var(--brand-cyan-rgb));
  --brand-cyan-hover:  rgb(var(--brand-cyan-hover-rgb));
  --brand-cyan-light:  rgb(var(--brand-cyan-light-rgb));
  --brand-cyan-subtle: rgb(var(--brand-cyan-subtle-rgb));
  --brand-bg:          rgb(var(--brand-bg-rgb));

  /* ═══════════════════════════════════════════════════════════════════════
     設計變數（2026-10-07 樣式統一第 1 批：狀態色／灰階／字級／圓角／陰影）
     ═══════════════════════════════════════════════════════════════════════
     🔴 這一批【只新增、還沒有任何頁面在用】⇒ 畫面零變化（全站 59 頁改前改後截圖逐位元相同）。
        之後分批把各頁寫死的值換成這裡的變數；客人／員工看得到變化的那幾處，每批業主看畫面點頭才上線。
     🔴 為什麼值長這樣：不是新設計，是【現有最常用的值】——10/07 體檢量到寫死顏色 3,396 處／383 種，
        前 40 種佔 58%（量法與清單：`node scripts/frontend-style-metrics.js`）。這裡把前 40 種全部收成變數，
        換的時候值逐字不變；合併近似色（例 0.82rem／0.85rem）會讓畫面變，留到要業主點頭的那幾批。
     🔴 名字刻意避開各頁自己定義過的 --gray-* / --radius-* / --shadow-*（撞名會互相蓋掉 ⇒ 畫面變）。
        守門 `calendar-tools/test/frontend-style-metrics-20261007.test.js` 每天驗：撞名＝0、前 40 色全在、
        每個 -rgb 後面的 hex 註解＝RGB。

     ── ① 色盤（palette）：每個顏色的唯一值，存 RGB 三數字、hex 由它衍生（同上面品牌色的做法）── */
  --palette-white-rgb:          255 255 255;   /* (#ffffff) */
  --palette-red-50-rgb:         254 242 242;   /* (#fef2f2) */
  --palette-red-100-rgb:        254 226 226;   /* (#fee2e2) */
  --palette-red-200-rgb:        254 202 202;   /* (#fecaca) */
  --palette-red-300-rgb:        252 165 165;   /* (#fca5a5) */
  --palette-red-500-rgb:        239 68 68;     /* (#ef4444) */
  --palette-red-600-rgb:        220 38 38;     /* (#dc2626) */
  --palette-red-700-rgb:        185 28 28;     /* (#b91c1c) */
  --palette-green-50-rgb:       240 253 244;   /* (#f0fdf4) */
  --palette-green-100-rgb:      220 252 231;   /* (#dcfce7) */
  --palette-green-200-rgb:      187 247 208;   /* (#bbf7d0) */
  --palette-green-300-rgb:      134 239 172;   /* (#86efac) */
  --palette-green-500-rgb:      34 197 94;     /* (#22c55e) */
  --palette-green-600-rgb:      22 163 74;     /* (#16a34a) */
  --palette-green-700-rgb:      21 128 61;     /* (#15803d) */
  --palette-green-800-rgb:      22 101 52;     /* (#166534) */
  --palette-amber-50-rgb:       255 251 235;   /* (#fffbeb) */
  --palette-amber-100-rgb:      254 243 199;   /* (#fef3c7) */
  --palette-amber-200-rgb:      253 230 138;   /* (#fde68a) */
  --palette-amber-300-rgb:      252 211 77;    /* (#fcd34d) */
  --palette-amber-400-rgb:      251 191 36;    /* (#fbbf24) */
  --palette-amber-500-rgb:      245 158 11;    /* (#f59e0b) */
  --palette-amber-600-rgb:      217 119 6;     /* (#d97706) */
  --palette-amber-700-rgb:      180 83 9;      /* (#b45309) */
  --palette-amber-800-rgb:      146 64 14;     /* (#92400e) */
  --palette-blue-50-rgb:        239 246 255;   /* (#eff6ff) */
  --palette-blue-100-rgb:       219 234 254;   /* (#dbeafe) */
  --palette-blue-200-rgb:       191 219 254;   /* (#bfdbfe) */
  --palette-blue-600-rgb:       37 99 235;     /* (#2563eb) */
  --palette-blue-700-rgb:       29 78 216;     /* (#1d4ed8) */
  --palette-blue-800-rgb:       30 64 175;     /* (#1e40af) */
  --palette-sky-500-rgb:        14 165 233;    /* (#0ea5e9) */
  --palette-violet-500-rgb:     139 92 246;    /* (#8b5cf6) */
  --palette-violet-600-rgb:     124 58 237;    /* (#7c3aed) */
  --palette-slate-50-rgb:       248 250 252;   /* (#f8fafc) */
  --palette-slate-100-rgb:      241 245 249;   /* (#f1f5f9) */
  --palette-slate-200-rgb:      226 232 240;   /* (#e2e8f0) */
  --palette-slate-400-rgb:      148 163 184;   /* (#94a3b8) */
  --palette-slate-500-rgb:      100 116 139;   /* (#64748b) */
  --palette-slate-600-rgb:      71 85 105;     /* (#475569) */
  --palette-gray-400-rgb:       156 163 175;   /* (#9ca3af) */
  --palette-gray-500-rgb:       107 114 128;   /* (#6b7280) */
  --palette-apple-ink-rgb:      29 29 31;      /* (#1d1d1f) 行銷／ERP／彈窗的主文字色 */
  --palette-apple-gray-rgb:     245 245 247;   /* (#f5f5f7) 行銷／ERP 的淺灰底 */
  --palette-apple-green-rgb:    52 199 89;     /* (#34c759) 登入頁／收銀台的成功綠 */
  /* 收銀台狀態膠囊（已報到／待報到／未付）自己那一組，只用在 pos-page.html */
  --palette-pill-green-bg-rgb:  209 245 216;   /* (#d1f5d8) */
  --palette-pill-green-text-rgb: 30 122 52;    /* (#1e7a34) */
  --palette-pill-amber-bg-rgb:  255 243 214;   /* (#fff3d6) */
  --palette-pill-amber-text-rgb: 122 78 0;     /* (#7a4e00) */
  --palette-pill-red-bg-rgb:    255 218 215;   /* (#ffdad7) */
  --palette-pill-red-text-rgb:  122 26 20;     /* (#7a1a14) */

  /* hex 形式（由上面 RGB 衍生，不是第二份值） */
  --palette-white:          rgb(var(--palette-white-rgb));
  --palette-red-50:         rgb(var(--palette-red-50-rgb));
  --palette-red-100:        rgb(var(--palette-red-100-rgb));
  --palette-red-200:        rgb(var(--palette-red-200-rgb));
  --palette-red-300:        rgb(var(--palette-red-300-rgb));
  --palette-red-500:        rgb(var(--palette-red-500-rgb));
  --palette-red-600:        rgb(var(--palette-red-600-rgb));
  --palette-red-700:        rgb(var(--palette-red-700-rgb));
  --palette-green-50:       rgb(var(--palette-green-50-rgb));
  --palette-green-100:      rgb(var(--palette-green-100-rgb));
  --palette-green-200:      rgb(var(--palette-green-200-rgb));
  --palette-green-300:      rgb(var(--palette-green-300-rgb));
  --palette-green-500:      rgb(var(--palette-green-500-rgb));
  --palette-green-600:      rgb(var(--palette-green-600-rgb));
  --palette-green-700:      rgb(var(--palette-green-700-rgb));
  --palette-green-800:      rgb(var(--palette-green-800-rgb));
  --palette-amber-50:       rgb(var(--palette-amber-50-rgb));
  --palette-amber-100:      rgb(var(--palette-amber-100-rgb));
  --palette-amber-200:      rgb(var(--palette-amber-200-rgb));
  --palette-amber-300:      rgb(var(--palette-amber-300-rgb));
  --palette-amber-400:      rgb(var(--palette-amber-400-rgb));
  --palette-amber-500:      rgb(var(--palette-amber-500-rgb));
  --palette-amber-600:      rgb(var(--palette-amber-600-rgb));
  --palette-amber-700:      rgb(var(--palette-amber-700-rgb));
  --palette-amber-800:      rgb(var(--palette-amber-800-rgb));
  --palette-blue-50:        rgb(var(--palette-blue-50-rgb));
  --palette-blue-100:       rgb(var(--palette-blue-100-rgb));
  --palette-blue-200:       rgb(var(--palette-blue-200-rgb));
  --palette-blue-600:       rgb(var(--palette-blue-600-rgb));
  --palette-blue-700:       rgb(var(--palette-blue-700-rgb));
  --palette-blue-800:       rgb(var(--palette-blue-800-rgb));
  --palette-sky-500:        rgb(var(--palette-sky-500-rgb));
  --palette-violet-500:     rgb(var(--palette-violet-500-rgb));
  --palette-violet-600:     rgb(var(--palette-violet-600-rgb));
  --palette-slate-50:       rgb(var(--palette-slate-50-rgb));
  --palette-slate-100:      rgb(var(--palette-slate-100-rgb));
  --palette-slate-200:      rgb(var(--palette-slate-200-rgb));
  --palette-slate-400:      rgb(var(--palette-slate-400-rgb));
  --palette-slate-500:      rgb(var(--palette-slate-500-rgb));
  --palette-slate-600:      rgb(var(--palette-slate-600-rgb));
  --palette-gray-400:       rgb(var(--palette-gray-400-rgb));
  --palette-gray-500:       rgb(var(--palette-gray-500-rgb));
  --palette-apple-ink:      rgb(var(--palette-apple-ink-rgb));
  --palette-apple-gray:     rgb(var(--palette-apple-gray-rgb));
  --palette-apple-green:    rgb(var(--palette-apple-green-rgb));
  --palette-pill-green-bg:  rgb(var(--palette-pill-green-bg-rgb));
  --palette-pill-green-text: rgb(var(--palette-pill-green-text-rgb));
  --palette-pill-amber-bg:  rgb(var(--palette-pill-amber-bg-rgb));
  --palette-pill-amber-text: rgb(var(--palette-pill-amber-text-rgb));
  --palette-pill-red-bg:    rgb(var(--palette-pill-red-bg-rgb));
  --palette-pill-red-text:  rgb(var(--palette-pill-red-text-rgb));

  /* ── ② 狀態色（語意）：成功／危險／警告／資訊，各有 淡底／底／邊／實心／字 ──
     只引用上面的色盤、不另寫值。每格選的是該用途「目前最常被用的那一個」。 */
  --status-success-bg-subtle: var(--palette-green-50);
  --status-success-bg:        var(--palette-green-100);
  --status-success-border:    var(--palette-green-300);
  --status-success-solid:     var(--palette-green-600);
  --status-success-text:      var(--palette-green-800);
  --status-danger-bg-subtle:  var(--palette-red-50);
  --status-danger-bg:         var(--palette-red-100);
  --status-danger-border:     var(--palette-red-300);
  --status-danger-solid:      var(--palette-red-600);
  --status-danger-text:       var(--palette-red-700);
  --status-warning-bg-subtle: var(--palette-amber-50);
  --status-warning-bg:        var(--palette-amber-100);
  --status-warning-border:    var(--palette-amber-300);
  --status-warning-solid:     var(--palette-amber-500);
  --status-warning-text:      var(--palette-amber-700);
  --status-info-bg-subtle:    var(--palette-blue-50);
  --status-info-bg:           var(--palette-blue-100);
  --status-info-border:       var(--palette-blue-200);
  --status-info-solid:        var(--palette-blue-600);
  --status-info-text:         var(--palette-blue-800);

  /* ── ③ 灰階（語意）：字由深到淺、邊框、底 ── */
  --neutral-text-strong:  var(--palette-apple-ink);
  --neutral-text:         var(--palette-slate-600);
  --neutral-text-muted:   var(--palette-slate-500);
  --neutral-text-subtle:  var(--palette-slate-400);
  --neutral-border:       var(--palette-slate-200);
  --neutral-bg:           var(--palette-slate-100);
  --neutral-bg-subtle:    var(--palette-slate-50);

  /* ── ④ 字級：10 級，取現有用量最多的 10 個大小（現況 98 種寫法）── */
  --font-size-2xs:  0.65rem;
  --font-size-xs:   0.72rem;
  --font-size-sm:   0.78rem;
  --font-size-md:   0.82rem;
  --font-size-lg:   0.85rem;
  --font-size-xl:   0.9rem;
  --font-size-2xl:  1rem;
  --font-size-3xl:  1.1rem;
  --font-size-4xl:  1.3rem;
  --font-size-5xl:  1.6rem;

  /* ── ⑤ 圓角（現況 21 種）── */
  --border-radius-xs:     4px;
  --border-radius-sm:     6px;
  --border-radius-md:     8px;
  --border-radius-lg:     10px;
  --border-radius-xl:     12px;
  --border-radius-2xl:    16px;
  --border-radius-3xl:    20px;
  --border-radius-pill:   980px;
  --border-radius-circle: 50%;

  /* ── ⑥ 陰影（現況 101 種寫法）：前四級＝行銷／ERP 等 9 頁（kol／crm／ads／social／cost／marketing／erp／events＋ERP 自帶頁）各自抄的 --shadow-sm／--shadow／--shadow-md／--shadow-lg 那一組 ── */
  --box-shadow-sm:      0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --box-shadow-md:      0 2px 8px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.03);
  --box-shadow-lg:      0 4px 12px rgba(0,0,0,.06), 0 8px 28px rgba(0,0,0,.04);
  --box-shadow-xl:      0 12px 40px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --box-shadow-popover: 0 4px 16px rgba(0,0,0,.15);
  --box-shadow-modal:   0 8px 32px rgba(0,0,0,.2);
  --box-shadow-focus:   0 0 0 3px rgb(var(--brand-cyan-rgb) / 0.12);
}