/* ============================================================
   鼎兆元管理系統｜設計 Token — 唯一色票來源（spec.md §8）
   全系統顏色、字級、字重、行高、間距、圓角、陰影一律從這裡取值。
   模組與其他 CSS 檔不得自訂顏色常數，一律使用下列變數。
   ============================================================ */

:root {
  /* ---- 色彩：逐字元照 spec §8 抄，值不可改 ---- */
  --brand: #c8402c;    /* 鼎兆元紅：全系統唯一強調色 */
  --ink: #1c1a19;       /* 主要文字 */
  --muted: #6f665f;     /* 次要文字、說明文字 */
  --line: #e2dbd4;      /* 邊框、分隔線 */
  --bg: #f7f4f1;        /* 頁面背景 */
  --card: #fff;         /* 卡片、輸入框背景 */
  --ok: #2f6b3a;        /* 合格、成功 */
  --warn: #b8860b;      /* 待處理、警示 */
  --danger: #b3261e;    /* 異常、危險、刪除 */

  --radius: 10px;
  --gap: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06);

  /* ---- 色彩：衍生（hover／淺底／邊框用，仍集中管理於本檔） ---- */
  --brand-dark: #a8331f;
  --brand-light: #fbe9e6;
  --ok-light: #e8f2ea;
  --warn-light: #faf1de;
  --danger-light: #fbe9e7;
  --ink-inverse: #fff;
  --overlay: rgba(28, 26, 25, .5);   /* 對話框遮罩，取自 --ink 加透明度 */
  /* 登入頁背景照片上的遮罩：壓暗＋降飽和，把三個品牌照片的調性拉近
     （墨竹亭是亮灰底、另外兩張是深色，不壓會像貼了塊白補丁），
     同時確保白色登入卡片在任何一張照片上都讀得清楚 */
  --hero-scrim: rgba(24, 20, 18, .34);
  --hero-scrim-strong: rgba(24, 20, 18, .48);
  /* 卡片左半壓的色塊：**提亮**而不是壓暗。整頁背景已經壓暗＋輕微模糊，
     這一塊提亮才會從背景裡浮出來（參考版型就是這個層次關係）。 */
  --hero-tint: rgba(247, 244, 241, .26);
  /* 登入卡片浮在照片上，需要比一般卡片更深的陰影才立得起來 */
  --shadow-float: 0 18px 48px rgba(24, 20, 18, .28);
  /* 登入頁文字浮在照片上用的色與投影（Eason 2026-08-17 四改：框全透明無底色。
     曾經歷 78% 白玻璃→照片採樣三色玻璃兩個版本，token 已隨版本清除，查 git 史）。
     深色照片（mala／yakiniku）白字＋暗影；mzt 淺照片深字＋亮暈，
     由 components.css 依 .login-bg[data-hero] 指派。 */
  /* 登入頁背景改 contain 後，照片放不滿的邊緣底色（2026-08-17）。兩種：
     深色給 mala／yakiniku（配白字），淺色給 mzt（配深字）——底色必須跟著照片明暗走，
     否則文字會落在對比不足的底上看不見（實測墨竹亭那張就中了）。
     值取自各照片邊緣像素的平均，讓留白看起來像照片自己的延伸，不是外加的框。 */
  --letterbox-dark: #241d1a;
  --letterbox-light: #acafba;
  --on-glass-ink: #fff;                        /* 深色照片上的主文字 */
  --on-glass-soft: rgba(255, 255, 255, .85);   /* 深色照片上的標籤／提示 */
  --login-input-bg: rgba(255, 255, 255, .92);  /* 輸入欄近不透明白：可讀性不妥協 */
  /* 登入鈕／焦點框的照片主張色（Eason 08-17 五改：配色要參照背景色）。
     各取自該照片高飽和像素的平均（tools 採樣）：mala＝滷汁紅銅、
     mzt＝辣油琥珀、yakiniku＝油花深肉紅；-dark 是各自壓暗的 hover 色 */
  --accent-mala: #945932;
  --accent-mala-dark: #7a4827;
  --accent-mzt: #595859;        /* 墨石灰：mzt 照片低飽和主調（石牆 #908F91）壓暗。
                                   原採高飽和得 #8D5F2D 辣油琥珀，跟 mala 紅銅撞色
                                   （Eason 08-17 指出），改取石調——也正好是「墨」竹亭 */
  --accent-mzt-dark: #454445;
  --accent-yakiniku: #6b2c20;   /* 採樣 #54241C 提亮一階當按鈕底，hover 才有得壓 */
  --accent-yakiniku-dark: #54241c;
  /* 全透明登入框（Eason 08-17 四改）：框身無底色，文字直接浮在照片上，
     可讀性改靠文字投影——深色照片用暗影、淺色照片（mzt）用亮暈 */
  --text-glow-on-dark: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .35);
  --text-glow-on-light: 0 1px 3px rgba(255, 255, 255, .75), 0 0 18px rgba(255, 255, 255, .55);
  /* 深色底上的淡邊框（例如載入中的圓圈） */
  --line-on-dark: rgba(255, 255, 255, .35);

  /* ---- 登入後外觀：照門市營運系統（~/mala-store-ops/web/css/tokens.css，2026-10-11 Eason 指示兩套長一樣） ----
     深色側邊欄、選中項黃色膠囊、分頁列底線色。主要按鈕仍用 --brand 紅，不跟著換。 */
  --sidebar: #1b1917;
  --sidebar-2: #2a2623;
  --sidebar-3: #3a3330;
  --sidebar-line: #332e2a;
  --side-txt: #b8afa5;
  --side-txt-soft: #a89e94;
  --side-label: #7a6f65;
  --side-role: #7d736a;
  --nav-pill: #FABE00;          /* 鼎兆元品牌黃（門市營運系統 hq 主題） */
  --nav-pill-ink: #231815;
  --logo-dzy: #1F4E8C;          /* 側邊欄「鼎兆元」字樣方塊 */
  --tab-line: #EF856D;          /* 分頁列選中底線 */
  --shadow-pill: 0 4px 12px rgba(0, 0, 0, .28);
  --shadow-card-hover: 0 2px 10px rgba(35, 24, 21, .08);
  /* 首頁提醒列（照營運系統 .todo-row.lv-*）：error 紅底、warn 黃底、info 品牌色條 */
  --todo-error-bg: #fdf3f1;
  --todo-warn-bg: #fffaf0;

  /* ---- 圓角階梯 ---- */
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- 陰影階梯 ---- */
  --shadow-lift: 0 4px 16px rgba(0, 0, 0, .10);

  /* ---- 間距階梯 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- 字型：中文優先堆疊，確保繁體中文正常顯示 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Heiti TC",
    "Microsoft JhengHei", "Noto Sans TC", "Segoe UI", sans-serif;

  /* ---- 字級階梯 ---- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* ---- 字重 ---- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- 行高 ---- */
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  /* ---- 版面尺寸：底部導覽列（手機）／側邊欄（桌機） ---- */
  --header-h: 56px;
  --bottom-nav-h: 56px;
  --sidebar-w: 252px;

  /* ---- 層級 ---- */
  --z-header: 100;
  --z-nav: 100;
  --z-toast: 200;
  --z-dialog: 300;
}