/* ============================================================================
   ds.css — ERP Solutions 設計系統
   官網（dark-first）與 ERP 應用介面（light-first）共用同一套 token 與元件。
   唯一依據：改 token 就同時改到兩個介面。

   分層：
   1. Primitive  — 色階、字體、間距、圓角。不解釋用途，只提供原料。
   2. Semantic   — 語意 token。元件一律只用這一層。
   3. Base       — reset 與排版基準。
   4. Components — 元件。
   5. Utilities  — 少量工具類。
   ========================================================================= */

/* 分層（cascade layers）：後面的層贏過前面的層；
   未分層的樣式（site.css、app.css）贏過所有分層。
   這樣官網與應用就算用到同名 class（.card / .btn / .kpi / .tbl…），
   也不會被設計系統的元件規則意外蓋到。 */
@layer ds-tokens, ds-base, ds-components, ds-utilities;

@layer ds-tokens {
/* ---------------------------------------------------------------- 1. Primitive */
:root {
  /* 中性色：偏暖的冷灰，長時間閱讀比純灰舒服 */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f5f7f9;
  --n-100: #edf0f4;
  --n-200: #e1e6ec;
  --n-300: #cbd3dc;
  --n-400: #9aa5b1;
  --n-500: #616c79;   /* 第三級文字的基準色。門檻要看它「最淺會被放上去的表面」——
                         實測：在白底 5.35:1、--n-50 底 4.98:1、--n-100 底 4.68:1，
                         三者都過 WCAG AA 4.5:1。
                         （表頭用的是 --n-100，是最嚴苛的一組，所以用它定值。） */
  --n-600: #4c5765;
  --n-700: #333d4a;
  --n-800: #1e2632;
  --n-900: #121821;

  /* 主色：深青。避開「又一個藍色 ERP」，與官網既有的 cyan 同源 */
  --a-50:  #e8f5f6;
  --a-100: #cde9eb;
  --a-200: #9bd3d8;
  --a-400: #2e9ba4;
  --a-600: #0e7c86;
  --a-700: #0a616a;
  --a-900: #063f45;

  /* 語意色（狀態專用，不作裝飾） */
  --ok-50: #e9f6ee;  --ok-200: #b7e0c6;  --ok-600: #157a3a;  --ok-700: #11632f;
  /* --wn-600 原本是 #b45309：在白底 5.02:1、--n-50 底 4.80:1 都過，
     但在 --surface-2（表頭、輸入框底，#edf0f4）只有 4.39:1 —— 不合格。
     這是與 --ok-600 完全一樣的錯誤：只看預設表面，沒看最嚴苛的那一個。
     壓深到 #a94e08：白底 5.56、--n-50 底 5.20、--surface-2 底 4.86，三者都過。
     記住這條規矩 —— 語意色要用「它最淺會被放上去的表面」定值，不是 --surface。 */
  --wn-50: #fdf4e3;  --wn-200: #92400e;  --wn-600: #a94e08;  --wn-700: #8f4207;
  --dg-50: #fbebeb;  --dg-200: #f2bcbc;  --dg-600: #b91c1c;  --dg-700: #931616;
  --in-50: #edf2fe;  --in-200: #c3d3f7;  --in-600: #2559c4;  --in-700: #1d47a0;

  /* 分類色：用來「分辨」類別，不是用來表達好壞或品牌。
     八個色相刻意壓在同一個明度帶，並排時不會有哪一個特別搶眼。
     只可用於分類標記（例如模組類別的圓點），不可當作品牌色或狀態色。 */
  --cat-1: #5f5e5a;   /* 平台核心 */
  --cat-2: #185fa5;   /* CRM 與銷售 */
  --cat-3: #0f6e56;   /* 產品與供應鏈 */
  --cat-4: #854f0b;   /* 財務會計 */
  --cat-5: #534ab7;   /* 人力資源 */
  --cat-6: #993556;   /* 行銷 */
  --cat-7: #3b6d11;   /* 生產力與專案 */
  --cat-8: #993c1d;   /* 網站與整合 */
  --cat-0: #6b7486;   /* 未分類 */

  /* 紙：月結單、報價單、發票、列印報表的「文件」材質。
     刻意獨立於中性色階之外 —— 中性色是偏冷的灰，紙要偏暖的米白，才像紙。
     見下方語意層：紙不隨主題反相。 */
  --pp-50:    #fffdf7;   /* 全新的紙 */
  --pp-100:   #f6f1e6;   /* 米白：帳單、月結單 */
  --pp-200:   #e2d9c0;   /* 紙上的格線與虛線 */
  --pp-ink:   #26221a;   /* 紙上的墨 */
  --pp-muted: #736a55;   /* 紙上的淡墨。實測在 --pp-100 上 4.75:1，過 AA。
                            原本的 #7a715c 只有 4.29:1，而它正是月結單表頭
                            與頁腳在用的顏色 —— 小字更要看得清。 */
  --pp-rgb:   246, 241, 230;

  /* 字體：HK 優先，退回 TC，再退回系統 */
  --font: "PingFang HK", "Noto Sans HK", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
          -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* 間距：4px 基準 */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s8: 32px;  --s10: 40px; --s12: 48px; --s16: 64px;

  /* 圓角 */
  --r-xs: 6px;  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;
  --r-xl: 22px; --r-full: 999px;

  /* 動效 */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease2: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .14s;
  --t: .22s;

  /* 觸控：倉務戴手套也要按得到 */
  --tap: 44px;
  --tap-lg: 52px;
}

/* ---------------------------------------------------------------- 2. Semantic */
/* 淺色（ERP 應用預設）：明亮環境下讀密集資料最清楚。
   `.light` 是官網用的寫法——官網整體深色，個別 section 用 class="light" 切成淺色。
   它與 [data-theme="light"] 共用同一份定義，所以兩邊永遠不會走樣。 */
:root,
[data-theme="light"],
.light {
  --bg:          var(--n-50);
  --surface:     var(--n-0);
  --surface-2:   var(--n-100);
  --surface-3:   var(--n-25);
  --border:      var(--n-200);
  --border-2:    var(--n-300);
  --text:        var(--n-900);
  --text-2:      var(--n-600);
  --text-3:      var(--n-500);
  --text-inv:    var(--n-0);

  --accent:      var(--a-600);
  --accent-2:    var(--a-400);
  --accent-soft: var(--a-50);
  --accent-line: var(--a-200);
  --accent-ink:  var(--a-700);
  --on-accent:   #fff;          /* 主色底上的文字：淺色主題的深青配白字 */
  --on-danger:   #fff;          /* 危險色底上的文字 */
  --on-accent-rgb: 255, 255, 255;  /* 主色底上的半透明疊層：rgba(var(--on-accent-rgb), .16) */

  --ok: var(--ok-600);  --ok-soft: var(--ok-50);  --ok-line: var(--ok-200);
  --wn: var(--wn-600);  --wn-soft: var(--wn-50);  --wn-line: var(--wn-200);
  --dg: var(--dg-600);  --dg-soft: var(--dg-50);  --dg-line: var(--dg-200);
  --in: var(--in-600);  --in-soft: var(--in-50);  --in-line: var(--in-200);

  /* RGB 三元組：讓 rgba(var(--x-rgb), .1) 這種「同色淡底」可以從 token 組出來，
     不必為每一個透明度都開一個新 token。
     注意：這幾個三元組必須與上面的 --ok-600 / --wn-600 等「同步更新」。
     它們是同一組顏色的兩種寫法，改了一邊沒改另一邊，淡底就會與主色走音。 */
  --accent-rgb: 14, 124, 134;
  --ok-rgb: 21, 122, 58;      /* = #157a3a，跟 --ok-600 同步（原本還是舊的 21,128,61） */
  --wn-rgb: 169, 78, 8;       /* = #a94e08，跟 --wn-600 同步 */
  --dg-rgb: 185, 28, 28;
  --in-rgb: 37, 89, 196;

  --e1: 0 1px 2px rgba(18, 24, 33, .04);
  --e2: 0 2px 8px rgba(18, 24, 33, .06);
  --e3: 0 10px 28px -10px rgba(18, 24, 33, .16);

  /* 疊層：貼在任意表面上的一層薄膜，只微調明度，不改變底下的色相。
     與 --surface-2/3 不同 —— 那兩個是「不透明的另一種表面」。
     深色主題是白色薄膜，淺色主題是黑色薄膜，所以它必須是 token：
     寫死 rgba(255,255,255,…) 在淺色區塊會整片消失。 */
  --ov-1: rgba(18, 24, 33, .025);
  --ov-2: rgba(18, 24, 33, .04);
  --ov-3: rgba(18, 24, 33, .07);
  --ov-4: rgba(18, 24, 33, .12);

  --rail-bg:    var(--n-0);
  --rail-on:    var(--a-50);
  --rail-on-tx: var(--a-700);
  --topbar-bg:  rgba(255, 255, 255, .86);
  --scrim:      rgba(18, 24, 33, .38);
  color-scheme: light;
}

/* 深色（官網品牌表現；應用亦可選用） */
[data-theme="dark"] {
  --bg:          #0b0f14;
  --surface:     #131922;
  --surface-2:   #1b222d;
  --surface-3:   #0f151c;
  --border:      rgba(255, 255, 255, .10);
  --border-2:    rgba(255, 255, 255, .18);
  --text:        #f2f5f8;
  --text-2:      #a3aebd;
  --text-3:      #828d9b;
  --text-inv:    #0b0f14;

  --accent:      #35c2cd;
  --accent-2:    #7fe3ea;
  --accent-soft: rgba(53, 194, 205, .14);
  --accent-line: rgba(53, 194, 205, .34);
  --accent-ink:  #7fe3ea;
  --on-accent:   #06282c;       /* 深色主題的亮青配深字（白字只有 2:1，不合格） */
  --on-danger:   #2b0d0b;       /* 深色主題的亮紅同樣要配深字 */
  --on-accent-rgb: 6, 40, 44;   /* 深色主題的主色底是亮青，疊層必須跟著變深 */

  --ok: #45c98a;  --ok-soft: rgba(69, 201, 138, .14);  --ok-line: rgba(69, 201, 138, .32);
  --wn: #e8a83a;  --wn-soft: rgba(232, 168, 58, .14);  --wn-line: rgba(232, 168, 58, .32);
  --dg: #f0716a;  --dg-soft: rgba(240, 113, 106, .14); --dg-line: rgba(240, 113, 106, .32);
  --in: #5f9cf5;  --in-soft: rgba(95, 156, 245, .14);  --in-line: rgba(95, 156, 245, .32);

  --accent-rgb: 53, 194, 205;
  --ok-rgb: 69, 201, 138;
  --wn-rgb: 232, 168, 58;
  --dg-rgb: 240, 113, 106;
  --in-rgb: 95, 156, 245;

  --e1: 0 1px 2px rgba(0, 0, 0, .4);
  --e2: 0 2px 10px rgba(0, 0, 0, .45);
  --e3: 0 12px 32px -12px rgba(0, 0, 0, .7);

  --ov-1: rgba(255, 255, 255, .03);
  --ov-2: rgba(255, 255, 255, .045);
  --ov-3: rgba(255, 255, 255, .07);
  --ov-4: rgba(255, 255, 255, .12);

  --rail-bg:    #10161e;
  --rail-on:    rgba(53, 194, 205, .16);
  --rail-on-tx: #7fe3ea;
  --topbar-bg:  rgba(11, 15, 20, .82);
  --scrim:      rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* 文件紙材：淺色與深色主題共用同一組值 —— 紙不會因為介面換了主題就反相。
   深色頁面上貼一張淺色的紙，是「內容裝置」（這是一張帳單），不是配色選擇。
   它同時是列印樣式的基準色。 */
:root {
  --paper:       var(--pp-100);
  --paper-2:     var(--pp-50);
  --paper-line:  var(--pp-200);
  --paper-ink:   var(--pp-ink);
  --paper-muted: var(--pp-muted);
  --paper-rgb:   var(--pp-rgb);
}

} /* end ds-tokens */