/* ==========================================================================
   J-OS 設計 Token —— 對內後台的唯一真相之源
   建立：2026-08-04  ·  規範文件：00011-【部門】設計/01-策略/J-OS設計規範-v1.md

   雙軌色票（Jay 2026-08-04 拍板）：
     對外（商品圖 / 官網 / IG / 紙本）→ 禾慕視覺色票 v1.0（#F0ECDD 暖米白 + #93A3B9 灰藍）
     對內（hub / ERP / 客服 / 採購後台）→ 這份檔，暖金 #c08a5e

   為什麼後台不套禾慕色票：那兩色相互對比度只有 2.15:1，遠低於無障礙標準 4.5:1，
   是為商品攝影設計的（60/30/10 的 10% 是留給商品本色），後台沒有商品、
   而且是每天盯數字的工具，讀不清楚就是事故。

   紀律：元件不准寫裸 hex，一律 var(--x)。要新顏色前先看這裡有沒有。
   ========================================================================== */

:root {
  /* ---------- 基底 ---------- */
  --bg: #faf5f2;          /* 暖底 */
  --card: #ffffff;
  --ink: #2b2622;         /* 主文字，對 --bg 對比 12.6:1 */
  --warm-grey: #78716c;   /* 次要 */
  --muted: #8a8178;       /* 弱化文字，對 --bg 對比 4.6:1（剛好過 AA） */
  --border: #e8e3da;

  /* ---------- 品牌 ---------- */
  /* 對內後台唯一的金。磁碟上另有四支金屬歷史遺留，見規範文件的收斂清單：
     #c69c5d（hub 12 個未吃 hub.css 的模板）/ #c9a96e（執行長日記系）/
     #b98a5e（庫存頁）/ #b08544（招募表單）—— 一律不准再新用。 */
  --accent: #c08a5e;
  --accent-ink: #a06f44;  /* 文字用的深一階，確保在白底可讀 */

  /* ---------- 語意色 ---------- */
  /* 成功綠與危險紅在 J-OS 各頁各寫（綠 8 種、紅 9 種），這裡是唯一出處。
     語意色只表達狀態，不可拿來當品牌強調色或圖表 series 色。
     用語意色時一定要同時有文字或圖示，不能只靠顏色分辨。 */
  --ok: #3a8a4a;
  --ok-tint: #eaf5ec;
  --warn: #b0761f;
  --warn-tint: #f8f0e0;
  --danger: #dc2626;      /* 沿用現行值，全站在用不動它 */
  --danger-tint: #fdecec;
  --info: #4c7f85;
  --info-tint: #e9f2f3;

  /* ---------- 圓角 ---------- */
  /* 現況 8/10/12/16 混用，收斂成三階 */
  --radius-sm: 8px;       /* 小元件：badge、tag、輸入框 */
  --radius-md: 12px;      /* 一般卡片、按鈕 */
  --radius-lg: 16px;      /* 大面板、彈窗 */
  --radius: var(--radius-lg);  /* 舊名相容，新程式碼別用 */

  /* ---------- 間距（4pt 制）---------- */
  /* 現況 6/8/9/12/14/16/18/22 是亂數，一律改吃這八階 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ---------- 陰影 ---------- */
  --shadow: 0 1px 3px rgba(43,38,34,.05);
  --shadow-lift: 0 8px 24px rgba(43,38,34,.10);

  /* ---------- 字體 ---------- */
  /* 繁中固定走 Noto Sans TC / Noto Serif TC（ui-ux-pro-max 對繁體唯一的建議配對）。
     其他字體配對只借字重階層，不照抄 font family —— 拉丁字體遇到中文會 fallback，
     同一份介面在不同電腦上長相就會不一樣。
     宣告了 webfont 就一定要載，hub.css 的 @import 負責這件事。 */
  --font-zh: "Noto Sans TC", -apple-system, system-ui, sans-serif;
  --font-display: "Playfair Display", "Noto Sans TC", serif;
  --font-num: "Inter", var(--font-zh);   /* 數字欄位搭 font-variant-numeric: tabular-nums */
}

/* ===================== 模組/部門柔和色彩編碼 ===================== */
/* 每個模組一組（tint 淡底 / ink 深字），淡淡地區分不搶戲。
   body[data-module=...] 由 _shell.html 依當前模組蓋章，殼內元素吃 --mod-* 變數。
   注意：部門色是「你現在在哪一區」的方位訊號，不是品牌色，不要拿去當按鈕主色。 */
:root {
  --mod-tint: #f6efe8;  --mod-ink: #a06f44;   /* 預設 = 品牌金棕（首頁） */
  --dept-finance-ink: #55795b; --dept-finance-tint: #ecf2ed;
  --dept-hr-ink: #a85e72;      --dept-hr-tint: #f7ecef;
  --dept-tasks-ink: #566f92;   --dept-tasks-tint: #ecf0f6;
  --dept-data-ink: #6f5e97;    --dept-data-tint: #f0edf6;
  --dept-tools-ink: #8a6d3b;   --dept-tools-tint: #f6f0e3;
  --dept-admin-ink: #6f6a63;   --dept-admin-tint: #f0eeeb;
  --dept-cs-ink: #4c7f85;      --dept-cs-tint: #e9f2f3;
}