/* ============================================================================
   TRUST DESIGN · Hive 改版 — Design Tokens【唯一正本】
   來源：docs/TRUST_redesign/README.md「Design Tokens」段
        ＋ 三個 .dc.html mockup 逐個 inline style 抄返出嚟嘅實值。
   ----------------------------------------------------------------------------
   ⚠ 規矩（改版新版面一律跟）
     1. 顏色／字級／間距／圓角**只喺呢個檔定義一次**，其他地方一律 var(--td-*)。
        版面入面唔准再直接寫 #hex —— 舊版就係因為 373 處硬編色先變到「頁頁都唔同」。
     2. 呢套 token 同舊版 static/style.css 嗰套（--brand / --ink / --bg…）**係兩套，唔准撈亂**。
        舊版面繼續行舊 token；改版新版面行 --td-*。改完全部版面先至收舊嗰套。
     3. 深＋淺兩套（2026-08-29 Kelvin 拍板「成個系統的深淺色」）：淺色＝bare :root，
        深色＝檔尾嗰個 data-theme 覆寫 block（同舊骨架同一個 attribute、同一個
        localStorage 'td-theme'；pre-paint script 喺 _td_head.html，開關喺兩個骨架側欄底）。
        ⚠ 加新顏色 token 一定要兩個 block 一齊加（漏一邊＝深色靜靜用淺色值，
          test_theme_dark.py 會捉）；soft pill 底喺深色一律 rgba alpha，唔准實色淺灰。
        ⚠ --td-ink 側欄家族／--td-on-brand／--td-brand-fill(-hover)／--td-brand-accent*
          特登唔覆寫 —— 本身係深色元素，兩個模式共用一份（雙寫必走樣）。
   ========================================================================== */

:root {
  /* ── 品牌（teal 只用於 primary action / active state / link）───────────── */
  --td-brand:              #0F6F7B;  /* primary button、active nav、link、進度條 */
  --td-brand-hover:        #0A5B65;  /* primary button hover */
  --td-brand-text:         #0A4F58;  /* 淺青底上面嘅字 */
  --td-brand-soft:         #EAF3F4;  /* active tab / chip 底、avatar 底 */
  --td-brand-300:          #7FB9BF;  /* 次要進度、第二隊施工隊顏色 */
  --td-brand-ring:         #D7E9EB;  /* pipeline 當前 node 嘅 3px 光環 */
  --td-brand-accent:       #2EA3AD;  /* 深色 sticky bar 上面嘅 primary button 底 */
  --td-brand-accent-ink:   #04292D;  /* 上面嗰粒掣嘅字 */
  --td-brand-ring-side:    #4FB3BD;  /* sidebar logo 圓環、active 圓點 */

  /* ── 深色底（sidebar / sticky bar / toast）──────────────────────────── */
  --td-ink:                #132422;
  --td-ink-active:         #1D3A37;  /* sidebar active item 底 */
  --td-ink-hover:          #1B312E;  /* sidebar item hover */
  --td-on-ink:             #E8ECE9;  /* 深色底上面嘅主文字 */
  --td-on-ink-2:           #CBD6D3;  /* 深色底上面嘅次要文字／nav item */
  --td-on-ink-3:           #9DB0AC;  /* 深色底上面嘅第三層文字 */
  --td-on-ink-label:       #7E918D;  /* sidebar 分組 label、右邊數量 */
  --td-on-ink-sub:         #8FA39F;  /* sidebar 副行、sticky bar label */
  --td-on-ink-money:       #F0C98A;  /* sticky bar 上面嘅折扣／差異數字 */
  --td-on-ink-line:        rgba(255,255,255,.09);  /* sidebar 分隔線 */
  --td-on-ink-line-2:      rgba(255,255,255,.14);  /* sticky bar 內分隔線 */
  --td-on-ink-border:      rgba(255,255,255,.25);  /* 深色底上面嘅 secondary 掣邊 */
  --td-on-ink-border-2:    rgba(255,255,255,.22);  /* 同上（3a 用 .22） */
  --td-avatar-ink:         #2F544F;  /* sidebar user avatar 底 */
  --td-avatar-on-ink:      #CFE3E0;  /* sidebar user avatar 字 */

  /* ── 文字階（由深到淺）───────────────────────────────────────────── */
  --td-text:               #172422;  /* 主文字 */
  --td-text-2:             #3D4A48;  /* 表格 cell 文字 */
  --td-text-3:             #5A6764;  /* 次要 cell（日期、經手人） */
  --td-muted:              #7A8785;  /* label、說明文字 */
  --td-faint:              #93A09D;  /* placeholder、breadcrumb */
  --td-disabled:           #B0B8B5;  /* disabled 字、未填 */
  --td-disabled-2:         #A8B3B0;  /* 停用行文字、⌄ 箭嘴 */
  --td-empty:              #C1C7C4;  /* 空值「—」 */

  /* ── 面 / 底 ─────────────────────────────────────────────────────── */
  --td-canvas:             #F7F7F5;  /* 頁面底色 */
  --td-surface:            #FFFFFF;  /* card / table 底 */
  --td-surface-alt:        #FBFBF9;  /* 表頭、footer、停用行 */
  --td-surface-hover:      #FAFAF8;  /* row hover、search 框底 */
  --td-surface-hover-2:    #F7F8F6;  /* 隱藏／停用行嘅 hover */
  --td-surface-group:      #F4F6F5;  /* 報價單工序分組列 */

  /* ── 線 ─────────────────────────────────────────────────────────── */
  --td-hairline:           #E3E5E2;  /* card / table border（主） */
  --td-hairline-2:         #ECEEEB;  /* card header 分隔線 */
  --td-hairline-3:         #F2F4F2;  /* table row 分隔線 */
  --td-hairline-4:         #F5F6F4;  /* 最幼分隔線（清單行） */
  --td-border-control:     #DCDFDB;  /* secondary button / dashed 邊 */
  --td-border-control-hover: #B9BFBB;  /* secondary button hover 嘅邊 */
  --td-border-check:       #CDD3CF;  /* 未選 checkbox、pipeline 未到 node */

  /* 坐喺品牌色／ink 底上面嘅白（primary 掣字、toggle knob、checkbox ✓）
     ⚠ 呢個係「永遠白」，唔准跟 --td-surface 走 —— 分開一個名先睇得出係兩件事 */
  --td-on-brand:           #FFFFFF;

  /* 品牌色「鋪底」專用（primary 掣底／toggle on／checkbox on）—— 永遠深 teal，
     兩個模式共用。深色模式 --td-brand 要做前景（link／文字）會轉中調，白字坐上面
     唔夠對比 —— 所以鋪底一律行呢兩個，唔准跟 --td-brand 走（同 --td-on-brand 同一道理）。 */
  --td-brand-fill:         #0F6F7B;
  --td-brand-fill-hover:   #0A5B65;

  /* ── 狀態：完成 / 正常 ──────────────────────────────────────────── */
  --td-ok:                 #4A9A6B;
  --td-ok-soft:            #E7ECDF;
  --td-ok-soft-text:       #4A6B52;
  --td-ok-soft-text-b:     #5B6B43;  /* 質量 B 方塊專用 */
  --td-ok-line:            #CFE0D6;  /* 客戶端已完成段連線 */

  /* ── 狀態：要跟進 ───────────────────────────────────────────────── */
  --td-warn:               #C98A3E;  /* 圓點、優先色條、今日紅線以外嘅提醒 */
  --td-warn-text:          #B5762F;  /* warn 字（KPI 副行、「已改」） */
  --td-warn-text-2:        #8A7442;  /* 另一種 warn 字（較沉） */
  --td-warn-soft:          #F4F1EA;  /* 要跟進 pill 底 */
  --td-warn-soft-text:     #7A6636;  /* 要跟進 pill 字 */
  --td-warn-soft-2:        #FBF3E8;  /* 「7 份」計數 pill 底 */
  --td-warn-row:           #FDFAF5;  /* 需要處理嘅行 / 提示卡底 */
  --td-warn-border:        #ECDFBF;  /* 提示卡邊、低於底價 input 邊 */

  /* ── 狀態：逾期 ─────────────────────────────────────────────────── */
  --td-alert:              #C0503F;  /* 逾期字、今日紅線 */
  --td-alert-soft:         #F0E2DE;  /* 逾期 pill 底、質量 A 方塊底 */
  --td-alert-soft-text:    #9C4636;  /* 逾期 pill 字、質量 A 字 */
  --td-danger-border:      #E3D3D0;  /* danger button 邊 */
  --td-danger-hover:       #FDF6F4;  /* danger button hover 底 */

  /* ── 中性 pill / badge ─────────────────────────────────────────── */
  --td-neutral-soft:       #F2F4F2;  /* 未開始 pill、SOURCE badge、計數 pill */
  --td-neutral-soft-text:  #5A6764;
  --td-neutral-2:          #ECEEEB;  /* 質量 C 方塊底 */
  --td-neutral-2-text:     #6A7572;  /* 質量 C 字 */
  --td-locked:             #F5F6F4;  /* 「未開放」pill 底 */
  --td-locked-text:        #A8B3B0;  /* 「未開放」pill 字 */

  /* ── 編輯狀態 ───────────────────────────────────────────────────── */
  --td-edited-row:         #F6FBFB;  /* 批次編輯「已改」行、報價單改過嘅行 */

  /* ── 斜紋 ghost bar（未確定日期 / 未完結月份）──────────────────────
       ⚠ 3b 嘅未完結月份 bar 同 2a 嘅未定日期 bar 用同一個 pattern。 */
  --td-ghost-a:            #E8EAE7;
  --td-ghost-b:            #F4F5F3;
  --td-ghost: repeating-linear-gradient(115deg,
              #E8EAE7, #E8EAE7 6px, #F4F5F3 6px, #F4F5F3 12px);
  /* 材料庫相位 placeholder（同上但 7px 一條、色淺啲） */
  --td-photo-a:            #ECEEEA;
  --td-photo-b:            #F5F6F3;
  --td-photo: repeating-linear-gradient(115deg,
              #ECEEEA, #ECEEEA 7px, #F5F6F3 7px, #F5F6F3 14px);

  /* ── 漏斗 5 級（3b）────────────────────────────────────────────── */
  --td-funnel-1:           #0F6F7B;
  --td-funnel-2:           #1A8290;
  --td-funnel-3:           #4FA2AB;
  --td-funnel-4:           #7FB9BF;
  --td-funnel-5:           #132422;

  /* ── 字體 ───────────────────────────────────────────────────────
       Latin / 數字：IBM Plex Sans；中文：Noto Sans TC；
       金額 / 日期 / 編號 / 欄名 / KPI：IBM Plex Mono（一律 tabular、右對齊）。
       ⚠ 尾段 fallback 唔准拆走 —— Google Fonts 喺內地上唔到，
         拉唔到字嗰陣要跌返落系統中文字體，唔係會變宋體。 */
  --td-font: 'IBM Plex Sans', 'Noto Sans TC', system-ui, -apple-system,
             'PingFang TC', 'Microsoft JhengHei', 'Segoe UI', sans-serif;
  --td-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular,
             Menlo, Consolas, 'Courier New', monospace;

  /* ── 全站字級比例 ─────────────────────────────────────────────────
     2026-08-01 Kelvin：「網頁版 D 字可以按比例大番小小，即係 D 字係有 D 細隻」。
     設計檔嗰批係 12.5 / 11.5 / 10.5px（mockup 用 1080–1320px 畫），
     喺佢部大螢幕真係細。**唔准逐版改 font-size** —— 改呢一個數，
     成套字級一齊跟，設計檔嗰個大細關係一個字都唔會走樣。
     ⚠ `--td-hscale` ＝ 行高／控件高／sidebar 闊，跟得慢啲（字大咗要有位坐，
       但唔可以連版面都脹一成，會少咗行數）。
     ⚠ 要再大／再細就淨係郁呢兩個數，改完跑 `python test_design_tokens.py`。 */
  --td-scale:        1.14;
  --td-hscale:       1.07;
}

/* ══ 顯示大小：緊湊 / 標準 / 舒適（2026-08-25 Kelvin 拍板加）══════════════════
   佢原話：「有冇第 2 個顯示模式係永遠都好睇，好似 APPLE 風格咁」——
   Apple 個做法就係「內容欄封頂置中」（已做）＋「一個掣調全系統字大細」。
   ⚠⚠⚠ 呢兩個 class **一定要落喺 `<html>`（`:root`），唔可以落 `<body>`**。
     實撞：落 body 嗰陣側欄真係變晒大細（因為 `ui.css` 啲 rule 自己寫住
     `calc(12.5px * var(--td-scale))`，喺元素度先代入），但**成個內容區完全冇變** ——
     因為 `--td-fs-body` 呢批係喺 `:root` 度定義成 `calc(12.5px * var(--td-scale))`，
     而自訂屬性嘅 computed value 係**喺佢自己嗰個元素度**就已經代入咗（＝用返 :root 嘅 1.14），
     之後子元素繼承嘅係計好咗嘅數。所以要喺同一個元素（`:root`）覆寫先有用。
     ⚠ 呢個係「睇落 work 咗一半」嘅陷阱：側欄跟得郁，好易以為做好咗。
   ⚠ `--td-hscale` 跟住郁（行高／控件高／側欄闊）—— 淨郁字唔郁行高，
     大字就會迫爆個行；淨郁行高唔郁字就變得好空。兩個一齊先似「換咗個尺寸」。
   ⚠ 數值要留喺 `test_design_tokens.py` 個 1.0–1.35 範圍入面。 */
:root.td-size-s { --td-scale: 1.00; --td-hscale: 1.00; }
:root.td-size-l { --td-scale: 1.30; --td-hscale: 1.16; }

/* 下面繼續係 :root 嘅 token（唔好搬位） */
:root {

  /* ── 字級（README「Typography」表；括號入面係設計檔原值，唔准四捨五入）──── */
  --td-fs-page:      calc(22px   * var(--td-scale));  /* page title  / 600 / 1.2 / ls −.01em */
  --td-fs-greet:     calc(24px   * var(--td-scale));  /* 工作台問候   / 600 / 1.2 */
  --td-fs-section:   calc(14px   * var(--td-scale));  /* card header / 600 */
  --td-fs-subcard:   calc(16px   * var(--td-scale));  /* 細頁 card    / 600 / 1.2 */
  --td-fs-body:      calc(12.5px * var(--td-scale));  /* 表格主 cell（單位名 500） */
  --td-fs-body-sm:   calc(12px   * var(--td-scale));  /* 次要 cell、select 文字 */
  --td-fs-meta:      calc(11.5px * var(--td-scale));  /* 說明、helper */
  --td-fs-meta-sm:   calc(11px   * var(--td-scale));
  --td-fs-micro:     calc(10.5px * var(--td-scale));  /* pill 文字、時間戳 */
  --td-fs-micro-sm:  calc(10px   * var(--td-scale));
  --td-fs-label:     calc(10.5px * var(--td-scale));  /* 表頭 mono 600 ls .07em uppercase */
  --td-fs-navlabel:  calc(9.5px  * var(--td-scale));  /* sidebar 分組 label mono 600 ls .14em */
  --td-fs-kpi:       calc(27px   * var(--td-scale));  /* KPI 數字 mono 600 ls −.02em（細版 25px） */
  --td-fs-kpi-sm:    calc(25px   * var(--td-scale));
  /* 全數金額（16,891,200）比純數字長成倍 —— 27px 會爆格。設計檔冇呢一級，
     係 2026-08-01「顯示真實數字」加嘅（Kelvin 唔要 16.89M 呢種縮寫）。 */
  --td-fs-kpi-money: calc(17px   * var(--td-scale));
  --td-fs-money:     calc(13px   * var(--td-scale));  /* 表內金額 mono 600 右對齊 */

  --td-ls-tight:     -.01em;  /* page title */
  --td-ls-kpi:       -.02em;  /* KPI 數字 */
  --td-ls-label:     .07em;   /* 表頭 label */
  --td-ls-navlabel:  .14em;   /* sidebar 分組 label */
  --td-ls-brand:     .06em;   /* TRUST DESIGN 字樣 */

  /* ── 間距階梯（4 · 7 · 10 · 14 · 20 · 28）───────────────────────── */
  --td-s1: 4px;
  --td-s2: 7px;
  --td-s3: 10px;
  --td-s4: 14px;
  --td-s5: 20px;
  --td-s6: 28px;

  /* ── 圓角 ───────────────────────────────────────────────────────── */
  --td-r-card:    9px;
  --td-r-control: 7px;
  --td-r-sm:      6px;   /* 細 button / 細 input */
  --td-r-pill:    5px;
  --td-r-chip:    4px;   /* 質量方塊、mono badge、checkbox */
  --td-r-toggle: 10px;

  /* ── 尺寸 ─────────────────────────────────────────────────────────
       ⚠ 行高／控件高／sidebar 闊跟 `--td-hscale`（字大咗要有位坐）。
         括號入面係設計檔原值。方框類（toggle／checkbox／圓角）**唔跟** ——
         嗰啲係圖形唔係文字，放大會變得笨重。 */
  --td-side-w:      calc(218px * var(--td-hscale));  /* sidebar 闊 */
  --td-side-rail:   56px;   /* <1280px 收成 icon rail（得個 icon，唔使跟字大細） */
  --td-top-h:       calc(52px  * var(--td-hscale));  /* top bar 高 */
  --td-row:         calc(44px  * var(--td-hscale));  /* 主表行高 */
  --td-row-batch:   calc(42px  * var(--td-hscale));  /* 批次編輯 / 報價項目行 */
  --td-row-receipt: calc(50px  * var(--td-hscale));  /* 收據行 */
  --td-row-site:    calc(46px  * var(--td-hscale));  /* 施工安排 / gantt 行 */
  --td-row-emp:     calc(48px  * var(--td-hscale));  /* 員工權限行 */
  --td-row-doc:     calc(56px  * var(--td-hscale));  /* 文件列表行 */
  --td-row-group:   calc(38px  * var(--td-hscale));  /* 報價單工序分組列 */
  /* 表格行上下留白 —— 內容換行時撐開個行先唔會同下一行疊住。
     ⚠ 配 `ui.css` 嘅 `min-height`（唔准寫死 height）；box-sizing 係 border-box，
     所以單行行高照舊 44px，唔會令所有表一次過變高。 */
  --td-row-pady:    8px;
  --td-thead:       calc(36px  * var(--td-hscale));  /* 表頭（密版 32px、細頁 34px） */
  --td-thead-sm:    calc(32px  * var(--td-hscale));
  --td-thead-md:    calc(34px  * var(--td-hscale));
  --td-ctl-h:       calc(31px  * var(--td-hscale));  /* input / select / secondary button */
  --td-ctl-h-sm:    calc(28px  * var(--td-hscale));  /* 表格內嵌 input */
  --td-btn-h:       calc(32px  * var(--td-hscale));  /* header primary button */
  --td-btn-h-sm:    calc(27px  * var(--td-hscale));  /* 表格內細 button */
  --td-btn-h-xs:    calc(26px  * var(--td-hscale));  /* toast 內細 button、報價單格 input */
  --td-toggle-w:    32px;
  --td-toggle-h:    18px;
  --td-toggle-knob: 14px;
  --td-check:       14px;   /* 一般 checkbox */
  --td-check-lg:    15px;   /* 權限 matrix checkbox */

  /* ── 版面 padding ───────────────────────────────────────────────── */
  --td-pad-x:       24px;   /* header / content 左右 */
  --td-pad-head:    16px;   /* header 上 */
  --td-pad-head-b:  14px;   /* header 下 */
  --td-pad-y:       18px;   /* content 上下（工作台用 24px） */
}

/* ═══════════════════════════════════════════════════════════════════════════
   深色模式（2026-08-29 Kelvin 拍板「成個系統的深淺色」；4 掃描＋判官定值）
   世界觀＝指揮艙 --ck-* 同一家族（綠黑 #0C1615 底、#132422 panel、teal accent）。
   ⚠ 成塊包 @media screen：列印（Ctrl+P）自動跌返淺色，ui.css 個 print 段唔使改。
   ⚠ 品牌色拆兩用（同舊骨架 style.css 深色同一條鐵律）：
       --td-brand ＝ 前景（link／ghost 掣字）→ 中調 #2196A8；
       鋪底位一律行 --td-brand-fill（上面定義，兩模式共用，唔喺呢度覆寫）。
   ⚠ 對比逐對實計過（正本喺 test_theme_dark.py）：主文字 ≥13:1、muted 7.09、
     soft pill 合成 ≥4.5；disabled／empty 刻意低（同淺色版一致）。
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen {
:root[data-theme="dark"] {
  color-scheme: dark;   /* 原生 date picker／scrollbar 跟深色（收款、工期都有 date input）*/

  /* ── 品牌 ── */
  --td-brand:              #2196A8;  /* 前景偏向（link 15 處 vs 鋪底 5 處；鋪底行 --td-brand-fill）*/
  --td-brand-hover:        #27A3B5;
  --td-brand-text:         #8FD1DA;  /* 前景光 teal（＝舊骨架 --brand-dark #7dd3e8 套路）*/
  --td-brand-soft:         rgba(79,179,189,.14);
  --td-brand-300:          #3F858E;
  --td-brand-ring:         rgba(79,179,189,.30);

  /* ── 文字階 ── */
  --td-text:               #E8ECE9;
  --td-text-2:             #C9D4D1;
  --td-text-3:             #ABBAB6;
  --td-muted:              #9DB0AC;
  --td-faint:              #8CA09B;
  --td-disabled:           #5F726D;
  --td-disabled-2:         #677A75;
  --td-empty:              #4E5F58;

  /* ── 面／底 ── */
  --td-canvas:             #0C1615;
  --td-surface:            #132422;
  --td-surface-alt:        #162927;
  --td-surface-hover:      #182C29;
  --td-surface-hover-2:    #1A2F2C;
  --td-surface-group:      #1E3733;

  /* ── 線 ── */
  --td-hairline:           #24403B;
  --td-hairline-2:         #203934;
  --td-hairline-3:         #1C332F;
  --td-hairline-4:         #192E2A;
  --td-border-control:     #2C4A44;
  --td-border-control-hover: #3D5F58;
  --td-border-check:       #35544E;

  /* ── 狀態：完成 ── */
  --td-ok:                 #5FBF8A;
  --td-ok-soft:            rgba(95,191,138,.14);
  --td-ok-soft-text:       #5FBF8A;
  --td-ok-soft-text-b:     #B9C98A;
  --td-ok-line:            rgba(95,191,138,.35);

  /* ── 狀態：要跟進 ── */
  --td-warn:               #E0A65A;
  --td-warn-text:          #E3AF6C;
  --td-warn-text-2:        #C9A96B;
  --td-warn-soft:          rgba(224,166,90,.14);
  --td-warn-soft-text:     #E0A65A;
  --td-warn-soft-2:        rgba(224,166,90,.20);
  --td-warn-row:           rgba(224,166,90,.08);
  --td-warn-border:        rgba(224,166,90,.40);

  /* ── 狀態：逾期 ── */
  --td-alert:              #E06A56;
  --td-alert-soft:         rgba(224,106,85,.16);
  --td-alert-soft-text:    #EC8A76;
  --td-danger-border:      rgba(224,106,85,.40);
  --td-danger-hover:       rgba(224,106,85,.07);

  /* ── 中性 ── */
  --td-neutral-soft:       rgba(148,163,160,.14);
  --td-neutral-soft-text:  #9DB0AC;
  --td-neutral-2:          rgba(148,163,160,.20);
  --td-neutral-2-text:     #A9BAB6;
  --td-locked:             rgba(148,163,160,.10);
  --td-locked-text:        #6B7D79;

  /* ── 編輯狀態 ── */
  --td-edited-row:         rgba(79,179,189,.08);

  /* ── 斜紋（比 surface 微亮）── */
  --td-ghost-a:            #243A34;
  --td-ghost-b:            #1A2C28;
  --td-ghost: repeating-linear-gradient(115deg,
              #243A34, #243A34 6px, #1A2C28 6px, #1A2C28 12px);
  --td-photo-a:            #20332E;
  --td-photo-b:            #182A26;
  --td-photo: repeating-linear-gradient(115deg,
              #20332E, #20332E 7px, #182A26 7px, #182A26 14px);

  /* ── 漏斗（1 最強＝最光；5 由近黑換做中性 —— 深底會隱形）── */
  --td-funnel-1:           #4FB3BD;
  --td-funnel-2:           #2EA3AD;
  --td-funnel-3:           #35818B;
  --td-funnel-4:           #2E6F79;
  --td-funnel-5:           #8FA39F;
}
}