/* themes.css
 * 色系管理（Theme Management）
 *
 * 使用方式：
 *   1. <html> 元素加上 data-theme="xxx"（無屬性 = 預設色系）
 *   2. 由 theme-switcher.js 控制屬性值，並用 localStorage 持久化
 *
 * 新增主題的步驟：
 *   1. 在本檔案複製下方 :root 區塊，改 selector 為 [data-theme="新主題名"]
 *   2. 只改色值，變數名稱一個都不要動（改名會讓沒覆寫到的元件退回預設色）
 *   3. 到 theme-switcher.js 的 THEMES 陣列加一筆 { id, label, short, sub, dotColor }
 *
 * 注意：本檔案只放「色彩」相關 token；字體 / 間距 / radius / shadow 留在 common.css。
 *       [data-theme="..."] 的名稱必須與 src_admin/config/config.php 的 $DATA_THEME
 *       逐字相同。對不上不會報錯，只會安靜地退回預設配色。
 *       若某元件寫死 hex 色（未使用 var），切換主題不會生效，
 *       需在本檔案末段以 [data-theme="主題名"] .selector { ... } 覆寫。
 */

:root {
  /* 新配色方案 (應用於 USER image - v2) */
  --color-moonshine: #c2c2b0;
  --color-seaweed: #3a4534;
  --color-carbon: #2a2a2a;
  --color-ivory: #f1ebdf;
  --color-cider-pear: #87916d;

  /* 顏色系統映射 */
  --color-primary: var(--color-seaweed);
  /* 深海藻色作為主色 */
  --color-primary-dark: var(--color-carbon);
  /* 碳黑色用於深色對比 */
  --color-primary-light: var(--color-cider-pear);
  /* 梨酒色用於柔和綠色高亮 */
  --color-secondary: var(--color-moonshine);
  /* 靜月色 */
  --color-accent: var(--color-cider-pear);

  --color-text-primary: var(--color-carbon);
  /* 銳利碳黑用於閱讀 */
  --color-text-secondary: var(--color-seaweed);
  --color-text-light: var(--color-moonshine);
  --color-text-white: #ffffff;

  --color-bg-body: var(--color-ivory);
  /* 象牙白作為主背景 */
  --color-bg-light: #f5f4ee;
  /* 近白米底（SKILL 要求 luminance ≥ 90%，給 shop-flow 展開 wrapper / summary / disabled 欄位用）*/
  --color-bg-white: #ffffff;
  --color-bg-dark: var(--color-seaweed);
  /* 深色對比背景 */

  /* primary-light 的 RGB triplet（cider-pear, rgba 半透明用） */
  --color-primary-light-rgb: 135, 145, 109;

  /* ivory 的 RGB triplet（給 sticky 半透明 backdrop 用） */
  --color-ivory-rgb: 241, 235, 223;

  /* RGB triplet of --color-seaweed (主色) for rgba() use */
  --color-primary-rgb: 58, 69, 52;

  /* 狀態色 / Status colors */
  --color-success: #2e7d32;
  --color-warning: #f9a825;
  --color-danger: #c62828;
  --color-info: #1976d2;

  /* 文字 / Text — 補 disabled (hover 灰底用) */
  --color-text-disabled: var(--color-moonshine);

  /* 背景 / Background */
  --color-bg-soft: var(--color-ivory);
  --color-bg-overlay: rgba(0, 0, 0, 0.4);

  /* 邊框 / Border */
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.18);
  --color-border-active: var(--color-primary);

  /* === 中性灰階 / Neutral grey scale === */
  /* 與品牌色脫鉤的 utility 灰：跨專案多半不變，但仍 token 化方便有需要時整批調 */
  --color-grey-50:  #fafafa;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #eeeeee;
  --color-grey-300: #dddddd;
  --color-grey-400: #cccccc;
  --color-grey-500: #999999;
  --color-grey-600: #666666;
  --color-grey-700: #444444;
  --color-grey-800: #333333;

  /* 內頁內容區底色（hero 下方第一個區塊）。
     內頁 hero 大標與短租卡片編號會溢出到這層之上，色值必須與此完全一致，
     溢出的部分才會融進背景、不露出切邊。改這個值時三處會一起變。 */
  --color-bg-page: var(--color-ivory);

  /* === 原本寫死在各元件的色票，收編成 token === */
  /* 值與收編前逐字相同，預設色系外觀不變；切換色系時才會跟著換。 */
  --color-bg-tint: #f6f3ed;
  --color-bg-tint-2: #f0efe6;
  --color-bg-tint-3: #e8e6dd;
  --color-bg-tint-4: #e0ded6;
  --color-bg-tint-alt: #eaefe5;
  --color-border-tint: #a8a898;
  --color-border-tint-2: #b2b6a9;
  --color-text-muted-tint: #828878;
  --color-primary-deep: #2a3324;
  /* 近白的暖色面（原本寫死，三通道差 4-6，是米色系衍生） */
  --color-bg-warm-1: #fdfdfd;
  --color-bg-warm-2: #faf9f6;
  --color-bg-warm-3: #fafaf6;
  --color-bg-warm-4: #f8f6f2;
  --color-bg-warm-5: #f5f5f0;
  --color-bg-warm-6: #e6e6e1;

  /* 狀態色變體（值不等於 --color-danger，收編前寫死在各元件） */
  --color-danger-hover: #c0392b;
  /* 購物車移除鈕 hover */
  --color-required: #c0392b;
  /* 表單必填標記 */
  --color-link-hover: #ee3517;
  /* editor 內文連結 hover */

  /* === 狀態色 RGB triplet（供 rgba 半透明使用）/ Status RGB triplet === */
  --color-success-rgb: 46, 125, 50;
  --color-warning-rgb: 249, 168, 37;
  --color-danger-rgb: 198, 40, 40;
  --color-info-rgb: 25, 118, 210;
}

/* === 新增色系的覆寫清單 ===
 * 複製一份 [data-theme="新色系名"] 區塊（可直接參考下方的 bluegold），依序覆寫：
 *
 *   1. 5 個字面色票    moonshine / seaweed / carbon / ivory / cider-pear
 *   2. 底色補充        --color-bg-light
 *   3. 品牌衍生面色    --color-bg-tint / -2 / -3 / -4 / -alt
 *                      --color-border-tint / -2
 *                      --color-text-muted-tint
 *                      --color-primary-deep
 *   4. 近白暖色面      --color-bg-warm-1 ~ -6
 *   5. 3 組 RGB triplet --color-primary-rgb / --color-primary-light-rgb / --color-ivory-rgb
 *
 *   6.（選用）語意狀態色 --color-success（＋ -rgb）/ --color-warning（＋ -rgb）
 *      --color-danger（＋ -rgb）/ --color-info
 *      ＋ --color-danger-hover / --color-required / --color-link-hover
 *      預設不覆寫：綠＝成功、紅＝失敗是跨產品共通語意。
 *      但本版預設主色本身就是綠色，換成非綠色系時「已送達」等成功狀態
 *      仍會是綠的，視覺上容易被誤認為沒換到色。要一致就把這組也覆寫。
 *
 * 第三方品牌色（Google、Facebook、LINE、Visa/Mastercard/JCB）永遠不隨色系變動。
 *
 * 其餘 token（--color-primary、--color-text-primary…）都是 var() 別名，會自動跟著換。
 * 中性灰階 --color-grey-* 與 --color-bg-white / --color-text-white 刻意不隨色系變動，
 * 若要做深色色系才需一併覆寫。
 * 最後到 main.js 的 THEMES 陣列補一筆 { id, color, label }。
 *
 * === 為什麼要有第 3、4 組 ===
 * 這些色原本是寫死的 hex，散在 common / header / login / index / about /
 * products / order_detail / order_failed 等檔案裡。只要有一處沒收編，
 * 新色系就會出現「只有首頁換色、內頁維持舊色」的破口。
 * 新增樣式時請一律使用 var()，不要再寫死 hex。 */

/* ==============================================
   藍黃（bluegold）
   色票取樣自客戶提案稿 HEPHAESTOS赫菲斯托斯品牌_Web短租_v11.pdf，不另造新色：
     主藍 #2d75c6（標題／區塊底）／按鈕深藍 #3268be／亮黃 #fccf00（H49 S100 V98）／頁底灰 #f2f2f2
   深藍 #143253 為主藍同色相壓暗後作內文色。
   對比檢查：#2d75c6 對白 4.7:1、#3268be 對 #f2f2f2 4.7:1、#fccf00 對 #143253 8.8:1，皆過 AA。
   ⚠️ 黃色是本色系的 accent，對白字只有 1.4:1，
      所以下方把用到 accent 底色的元件文字改成深藍（見檔末覆寫）。
   ============================================== */
[data-theme="bluegold"] {
  /* 5 個字面色票（名稱沿用預設，只換色值） */
  --color-moonshine: #a7d2f2;
  /* 提案的淺藍，取代靜月色 */
  --color-seaweed: #2d75c6;
  /* 提案主藍作為主色 */
  --color-carbon: #143253;
  /* 主藍壓暗成深海軍藍，用於深色對比與內文 */
  --color-ivory: #fff6d1;
  /* 頁底＝內頁內容區底色。用「黃度」（255 減藍通道）當刻度，現值 46。
     調整過程：46 一度被判定太深，但那其實是內頁 hero 大標與下方區塊
     用了不同 token（46 vs 15）造成的接縫，不是底色本身的問題；
     接縫改用 --color-bg-page 統一後，15 和 30 都偏白，最終回到 46。
     下方整條色階按同一比例縮放，維持相對層次。
     要整體加深或變淡，改這個值再等比調整下方即可。 */
  --color-cider-pear: #fccf00;
  /* 提案亮黃作為 accent */

  --color-bg-light: #fffae6;

  /* 說明文字沿用主藍時在 #f2f2f2 上只有 4.1:1，
     改用提案的按鈕深藍拉到 4.7:1（同樣是提案既有色）。 */
  --color-text-secondary: #3268be;

  /* 回頂鈕、客服鈕、帳號頭像底等「功能元件」用的琥珀黃。
     原本的淺藍 #a7d2f2 對白只有 1.6:1，頭像白 icon 同樣 1.6:1，近乎看不見。
     取英文小標 #f8d649 的同色相（48°）壓暗到剛好過 WCAG 非文字元件的 3:1，
     兩者同色系不會打架：對白 3.28:1、對頁底 #fffcf0 3.02:1、
     白色 icon 疊在其上 3.28:1。
     黃色的先天限制：要到內文的 4.5:1 最亮只能到 #856f00，那個亮度就是咖啡色，
     所以功能元件停在 3:1 不再往下壓。
     ⚠️ 不能直接改 --color-moonshine：它同時是「淺色面」
        （.lang_dropdown_menu 底、服務卡文字塊底、按鈕 hover 填色），
        那些位置的文字是深藍 --color-text-primary，底色一變深就看不見。
        所以只覆寫文字角色的 --color-secondary，moonshine 維持淺藍。 */
  --color-secondary: #a38d30;

  /* 次要說明文字（日期、職稱、停用頁碼）原本也是淺藍，對白 1.7:1。
     這類是「弱化文字」，不適合用高彩度的黃，改用同色系的靜音藍灰，對白 5.1:1。 */
  --color-text-light: #5a7085;

  /* 收編進 token 的原寫死色：米色系 → 黃色系、灰綠 → 藍灰 */
  --color-bg-tint: #fffae6;
  --color-bg-tint-2: #fff8da;
  --color-bg-tint-3: #fff4c2;
  --color-bg-tint-4: #feefa9;
  --color-bg-tint-alt: #e8f1fb;
  --color-border-tint: #c9cfd8;
  --color-border-tint-2: #b9c8d6;
  --color-text-muted-tint: #6b7f95;
  --color-primary-deep: #143253;

  /* 近白暖面 → 同亮度的淡黃 */
  --color-bg-warm-1: #fffdf6;
  --color-bg-warm-2: #fffced;
  --color-bg-warm-3: #fffcf0;
  --color-bg-warm-4: #fff9e0;
  --color-bg-warm-5: #fdf9e3;
  --color-bg-warm-6: #f2ebc3;

  /* RGB triplet（rgba 半透明用，需與上方色值同步） */
  --color-primary-light-rgb: 252, 207, 0;
  --color-ivory-rgb: 255, 246, 209;
  --color-primary-rgb: 45, 117, 198;
}

/* --- 寫死 hex、不吃 var() 的元件覆寫 --- */

/* 英文小標（ABOUT US / SERVICES…）是純裝飾的 eyebrow label：
   下方緊接著深藍中文大標，英文不承載資訊，可以只求視覺不求可讀。
   指定色 #f8d649（淺金黃，色相 48°、飽和 71%、明度 97%）：
   對白 1.43:1、對頁底淡黃 1.32:1 —— 極低，在淡黃底的區塊（SERVICES 等）
   幾乎看不見，屬於刻意的裝飾性取捨。
   ⚠️ 只放寬這一個選擇器；--color-secondary 取同色相壓暗版 #a38d30，
      維持功能元件所需的 3:1。 */
[data-theme="bluegold"] .section_title-en {
  color: #f8d649;
}

/* accent 底色配白字在黃色上不可讀，改深藍字 */
[data-theme="bluegold"] .chat_toggle:hover,
[data-theme="bluegold"] .chat_widget.active .chat_toggle,
[data-theme="bluegold"] .chat_option:hover {
  color: var(--color-carbon);
}