/* ds-tokens.css — 產物，勿手改。
 * 來源：agent-setting/skills/cm-web-ds/tokens/（公司 Web Design System）。
 * 由 continuous-learning/build.py 串接產生；DS 更新後重跑 build.py 即可同步。
 * 串接順序即 skill 規定的載入順序，最後掛 Talaria 主題覆蓋品牌色。
 */

/* ==== tokens/tokens.css ==== */
/* CM Web DS — tokens.css  (由 build-tokens.py 從 Figma export 產生，勿手改) */
:root {
  /* ---- Raw 原色盤（primitives） ---- */
  --cm-grey-0: #FFFFFF;
  --cm-grey-10: #F9F9F9;
  --cm-grey-20: #F5F5F5;
  --cm-grey-30: #F0F0F0;
  --cm-grey-40: #E4E4E4;
  --cm-grey-50: #D9D9D9;
  --cm-grey-60: #BFBFBF;
  --cm-grey-70: #959595;
  --cm-grey-80: #767676;
  --cm-grey-90: #595959;
  --cm-grey-100: #262626;
  --cm-red-10: #FCE9EA;
  --cm-red-20: #F8C9CB;
  --cm-red-30: #F39EA3;
  --cm-red-40: #ED7178;
  --cm-red-50: #E7474F;
  --cm-red-60: #E21E28;
  --cm-red-70: #C01A22;
  --cm-red-80: #A0151C;
  --cm-red-90: #811117;
  --cm-red-100: #660D12;
  --cm-danger-10: #FEEDEA;
  --cm-danger-20: #FCD5CC;
  --cm-danger-30: #F9B3A4;
  --cm-danger-40: #F69079;
  --cm-danger-50: #F46F51;
  --cm-danger-60: #F14F2B;
  --cm-danger-70: #D72C0D;
  --cm-danger-80: #AB381F;
  --cm-danger-90: #892D19;
  --cm-danger-100: #6C2413;
  --cm-success-10: #E8F6F1;
  --cm-success-20: #C7E8DD;
  --cm-success-30: #9BD7C2;
  --cm-success-40: #6CC4A5;
  --cm-success-50: #40B28A;
  --cm-success-60: #16A170;
  --cm-success-70: #13895F;
  --cm-success-80: #107250;
  --cm-success-90: #0D5C40;
  --cm-success-100: #0A4832;
  --cm-warning-10: #FEF9EA;
  --cm-warning-20: #FDF0CD;
  --cm-warning-30: #FCE3A6;
  --cm-warning-40: #FAD77D;
  --cm-warning-50: #F8CB55;
  --cm-warning-60: #F7BF30;
  --cm-warning-70: #D2A229;
  --cm-warning-80: #AF8822;
  --cm-warning-90: #8D6D1B;
  --cm-warning-100: #6F5616;
  /* ---- Collection 語意（semantic） ---- */
  --cm-theme-lighter: #FCE9EA;
  --cm-theme-light: #F39EA3;
  --cm-theme-primary: #E21E28;
  --cm-theme-dark: #A0151C;
  --cm-theme-darker: #660D12;
  --cm-success-lighter: #E8F6F1;
  --cm-success-light: #9BD7C2;
  --cm-success-primary: #16A170;
  --cm-success-dark: #107250;
  --cm-success-darker: #0A4832;
  /* ---- Component 元件層（component） ---- */
  --cm-font-theme-primary: #E21E28;
  --cm-font-gray-primary: #262626;
  --cm-font-gray-secondary: #595959;
  --cm-font-gray-tertiary: #BFBFBF;
  --cm-font-inverse-primary: #FFFFFF;
  --cm-font-inverse-secondary: #F9F9F9;
  --cm-font-inverse-tertiary: #D9D9D9;
  --cm-basic-theme: #E21E28;
  --cm-basic-warning: #F7BF30;
  --cm-basic-error: #F14F2B;
  --cm-basic-success: #16A170;
  /* ---- 尺寸（button 高度/內距/字級/圓角/icon間距；來源=Figma 變體名）---- */
  --cm-size-lg-h: 40px; --cm-size-lg-px: 16px; --cm-size-lg-fs: 16px; --cm-size-lg-r: 8px; --cm-size-lg-gap: 8px;
  --cm-size-md-h: 36px; --cm-size-md-px: 14px; --cm-size-md-fs: 14px; --cm-size-md-r: 8px; --cm-size-md-gap: 6px;
  --cm-size-sm-h: 28px; --cm-size-sm-px: 12px; --cm-size-sm-fs: 13px; --cm-size-sm-r: 6px; --cm-size-sm-gap: 6px;
  --cm-size-xs-h: 24px; --cm-size-xs-px: 8px;  --cm-size-xs-fs: 12px; --cm-size-xs-r: 6px; --cm-size-xs-gap: 4px;
  --cm-disabled-opacity: 0.4;
}

/* ==== tokens/tokens.extra.css ==== */
/* CM Web DS — tokens.extra.css
 * 補「zip 三包色彩匯出」沒有的語意色。值來源：Figma 元件色（27985:115091）＋
 * DS Color 頁稽核修正（24827:70462，2026-07-23）——與 zip export 衝突時以 Color 頁為準。
 * 載入順序在 tokens.css 之後，故此處可覆寫產生檔的值。 */
:root {
  --cm-font-family: "PingFang TC", system-ui, "Noto Sans TC", sans-serif;
  --cm-inverse: #FFFFFF;              /* 實色款文字 */
  --cm-disable-text: #BFBFBF;         /* Text/Disable */
  --cm-disable-surface: rgba(38,38,38,.06);  /* Surface/Disable（Color 頁修正：非實色 #F5F5F5） */

  /* 文字層級（Color 頁修正：Tertiary=#959595；#BFBFBF 是 Disable，zip export 舊值有誤） */
  --cm-font-gray-tertiary: #959595;

  /* Surface 表面色（Color 頁補齊） */
  --cm-surface-base: #FFFFFF;
  --cm-surface-background: #F9F9F9;
  --cm-surface-highlight: #F0F0F0;
  --cm-surface-default: #E4E4E4;
  --cm-surface-hover: #D9D9D9;
  --cm-surface-pressed: #BFBFBF;
  --cm-surface-mask: rgba(38,38,38,.3);      /* 遮罩 overlay（dialog/drawer） */
  --cm-surface-light-border: rgba(38,38,38,.07);

  /* 主要Primary 主色紅（Basic/Hover/Click/Light/Focus/Border/Display） */
  --cm-primary-basic:#E21E28; --cm-primary-hover:#A0151C; --cm-primary-click:#811117;
  --cm-primary-light:#FCE9EA; --cm-primary-focus:#F8C9CB; --cm-primary-border:#F39EA3;
  --cm-primary-display:#C01A22;              /* 文字連結 hover 用 */
  /* 互動Interaction / 超連結Link 藍（hover/border 依 Color 頁修正） */
  --cm-interaction-basic:#1480D9; --cm-interaction-hover:#0E5B9A; --cm-interaction-click:#0B497C;
  --cm-interaction-light:#E8F2FB; --cm-interaction-focus:#C7E1F6; --cm-interaction-border:#9AC8EF;
  --cm-interaction-display:#116DB8;
  /* 危險Danger 危險紅 */
  --cm-danger-basic:#F14F2B; --cm-danger-hover:#AB381F; --cm-danger-click:#892D19;
  --cm-danger-light:#FEEDEA; --cm-danger-focus:#FCD5CC; --cm-danger-border:#F9B3A4;
  --cm-danger-display:#D72C0D;
  /* 成功Success（Display 階，Color 頁） */
  --cm-success-display:#13895F;
  /* 次要Secondary 灰（Light/Focus 依 Color 頁修正） */
  --cm-secondary-basic:#595959; --cm-secondary-hover:#767676; --cm-secondary-click:#262626;
  --cm-secondary-light:#F0F0F0; --cm-secondary-focus:#E4E4E4; --cm-secondary-border:#BFBFBF;
  --cm-secondary-tinttext:#262626;
}

/* ==== tokens/tokens.space.css ==== */
/* CM Web DS — tokens.space.css
 * 間距/圓角/描邊/圖示尺寸。來源：DS 檔 Size collection（4px 基準刻度）。
 * 註：此 collection 命名偏通用（非顏色那樣明確標 CMoney），若公司另有指定間距規範可覆蓋。 */
:root {
  /* 間距 Space（4px 基準）*/
  --cm-space-0: 0;      --cm-space-050: 2px;  --cm-space-100: 4px;  --cm-space-150: 6px;
  --cm-space-200: 8px;  --cm-space-300: 12px; --cm-space-400: 16px; --cm-space-600: 24px;
  --cm-space-800: 32px; --cm-space-1000: 40px; --cm-space-1200: 48px; --cm-space-1600: 64px; --cm-space-2400: 96px; --cm-space-4000: 160px;

  /* 圓角 Radius */
  --cm-radius-100: 4px; --cm-radius-200: 8px; --cm-radius-400: 16px; --cm-radius-full: 9999px;

  /* 描邊 Stroke */
  --cm-stroke-border: 1px; --cm-stroke-focus: 2px;

  /* 圖示尺寸 Icon */
  --cm-icon-sm: 24px; --cm-icon-md: 32px; --cm-icon-lg: 40px;
}

/* ==== tokens/tokens.typography.css ==== */
/* CM Web DS — tokens.typography.css
 * 字級系統。規格＝Figma DS「Typography 字」頁 node 24827:70467「字級總覽表」（精確值，REST 抽取）。
 * 內容：Desktop 768+ 全表＋Mobile & Tablet 0-767 覆寫（DS 只定義 Display L/M/S 與 Heading L 四級的手機版）。
 * 字體一律 var(--cm-font-family)（tokens.extra.css）。
 * 注意：本頁 letter-spacing 為 px 值（12px 級=0.4px、其餘=0.2px），與 CONTRIBUTING 通用慣例
 *（12px=.05em、14/16px=.03em）不同；依「以 JSON 為準」原則採本頁值。
 * 注意：DS 表內「Bold」款字重＝500（非 700）；Heading/Display/Button＝600。
 * Token 名對照：Heading1..5＝標題 L/M/S/XS/XXS；DS 表 Button token 拼字「Medeium」為原稿誤植，此處用 medium。*/
:root {
  /* 字重（DS 只用 400/500/600） */
  --cm-fw-regular: 400;
  --cm-fw-medium: 500;
  --cm-fw-semibold: 600;

  /* 展示 Display（Desktop 768+；Mobile 覆寫見下方 media query 註解） */
  --cm-display-l-size: 52px; --cm-display-l-lh: 64px; --cm-display-l-ls: 0.4px;   /* DisplayL 600 */
  --cm-display-m-size: 40px; --cm-display-m-lh: 48px; --cm-display-m-ls: 0.4px;   /* DisplayM 600 */
  --cm-display-s-size: 30px; --cm-display-s-lh: 36px; --cm-display-s-ls: 0.4px;   /* DisplayS 600 */
  /* Mobile & Tablet 0-767 版本值（DisplayL/Mobile 等） */
  --cm-display-l-size-m: 36px; --cm-display-l-lh-m: 48px;
  --cm-display-m-size-m: 28px; --cm-display-m-lh-m: 36px;
  --cm-display-s-size-m: 24px; --cm-display-s-lh-m: 32px;

  /* 標題 Heading（600） */
  --cm-h1-size: 24px; --cm-h1-lh: 32px; --cm-h1-ls: 0.2px;   /* Heading1＝Heading L */
  --cm-h2-size: 20px; --cm-h2-lh: 28px; --cm-h2-ls: 0.2px;   /* Heading2＝Heading M */
  --cm-h3-size: 18px; --cm-h3-lh: 28px; --cm-h3-ls: 0.2px;   /* Heading3＝Heading S */
  --cm-h4-size: 16px; --cm-h4-lh: 24px; --cm-h4-ls: 0.2px;   /* Heading4＝Heading XS */
  --cm-h5-size: 12px; --cm-h5-lh: 16px; --cm-h5-ls: 0.2px;   /* Heading5＝Heading XXS */
  /* HeadingL/Mobile：手機版 H1 降為 20/28 */
  --cm-h1-size-m: 20px; --cm-h1-lh-m: 28px;

  /* 內文 Body */
  --cm-body-2xl-size: 20px; --cm-body-2xl-lh: 32px; --cm-body-2xl-ls: 0.2px;  /* Body/2Extra Large 400 */
  --cm-body-xl-size: 18px;  --cm-body-xl-lh: 28px;  --cm-body-xl-ls: 0.2px;   /* Body/Extra Large 500 */
  --cm-body-lg-size: 16px;  --cm-body-lg-lh: 24px;  --cm-body-lg-ls: 0.2px;   /* Body/Large 400；Bold=500 */
  --cm-body-md-size: 14px;  --cm-body-md-lh: 20px;  --cm-body-md-ls: 0.2px;   /* Body/Medium 400；Bold=500 */
  --cm-body-sm-size: 12px;  --cm-body-sm-lh: 16px;  --cm-body-sm-ls: 0.4px;   /* Body/Small 400；Bold=500 */

  /* 按鈕 Button（600） */
  --cm-btn-lg-size: 16px; --cm-btn-lg-lh: 24px; --cm-btn-lg-ls: 0.2px;
  --cm-btn-md-size: 14px; --cm-btn-md-lh: 20px; --cm-btn-md-ls: 0.2px;
  --cm-btn-sm-size: 12px; --cm-btn-sm-lh: 16px; --cm-btn-sm-ls: 0.2px;
}

/* ---- 工具 class（名稱依 DS 表 Token 欄） ---- */
[class^="cm-text-"], [class*=" cm-text-"] { box-sizing: border-box; }
[class^="cm-text-"], [class*=" cm-text-"] {
  font-family: var(--cm-font-family);
  margin: 0;
}

/* 展示 Display */
.cm-text-display-l { font-size: var(--cm-display-l-size); line-height: var(--cm-display-l-lh); letter-spacing: var(--cm-display-l-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-display-m { font-size: var(--cm-display-m-size); line-height: var(--cm-display-m-lh); letter-spacing: var(--cm-display-m-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-display-s { font-size: var(--cm-display-s-size); line-height: var(--cm-display-s-lh); letter-spacing: var(--cm-display-s-ls); font-weight: var(--cm-fw-semibold); }

/* 標題 Heading1~5（＝L/M/S/XS/XXS） */
.cm-text-h1 { font-size: var(--cm-h1-size); line-height: var(--cm-h1-lh); letter-spacing: var(--cm-h1-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-h2 { font-size: var(--cm-h2-size); line-height: var(--cm-h2-lh); letter-spacing: var(--cm-h2-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-h3 { font-size: var(--cm-h3-size); line-height: var(--cm-h3-lh); letter-spacing: var(--cm-h3-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-h4 { font-size: var(--cm-h4-size); line-height: var(--cm-h4-lh); letter-spacing: var(--cm-h4-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-h5 { font-size: var(--cm-h5-size); line-height: var(--cm-h5-lh); letter-spacing: var(--cm-h5-ls); font-weight: var(--cm-fw-semibold); }

/* 內文 Body（Bold 款字重 500；underline 款加底線） */
.cm-text-body-2xl { font-size: var(--cm-body-2xl-size); line-height: var(--cm-body-2xl-lh); letter-spacing: var(--cm-body-2xl-ls); font-weight: var(--cm-fw-regular); }
.cm-text-body-xl  { font-size: var(--cm-body-xl-size);  line-height: var(--cm-body-xl-lh);  letter-spacing: var(--cm-body-xl-ls);  font-weight: var(--cm-fw-medium); }
.cm-text-body-lg  { font-size: var(--cm-body-lg-size);  line-height: var(--cm-body-lg-lh);  letter-spacing: var(--cm-body-lg-ls);  font-weight: var(--cm-fw-regular); }
.cm-text-body-md  { font-size: var(--cm-body-md-size);  line-height: var(--cm-body-md-lh);  letter-spacing: var(--cm-body-md-ls);  font-weight: var(--cm-fw-regular); }
.cm-text-body-sm  { font-size: var(--cm-body-sm-size);  line-height: var(--cm-body-sm-lh);  letter-spacing: var(--cm-body-sm-ls);  font-weight: var(--cm-fw-regular); }
.cm-text-body-lg-bold, .cm-text-body-md-bold, .cm-text-body-sm-bold { font-weight: var(--cm-fw-medium); }
.cm-text-body-lg-bold { font-size: var(--cm-body-lg-size); line-height: var(--cm-body-lg-lh); letter-spacing: var(--cm-body-lg-ls); }
.cm-text-body-md-bold { font-size: var(--cm-body-md-size); line-height: var(--cm-body-md-lh); letter-spacing: var(--cm-body-md-ls); }
.cm-text-body-sm-bold { font-size: var(--cm-body-sm-size); line-height: var(--cm-body-sm-lh); letter-spacing: var(--cm-body-sm-ls); }
.cm-text-underline { text-decoration: underline; }  /* Body/Button 的 underline 變體＝同級字＋此 class */

/* 按鈕 Button 字級 */
.cm-text-btn-lg { font-size: var(--cm-btn-lg-size); line-height: var(--cm-btn-lg-lh); letter-spacing: var(--cm-btn-lg-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-btn-md { font-size: var(--cm-btn-md-size); line-height: var(--cm-btn-md-lh); letter-spacing: var(--cm-btn-md-ls); font-weight: var(--cm-fw-semibold); }
.cm-text-btn-sm { font-size: var(--cm-btn-sm-size); line-height: var(--cm-btn-sm-lh); letter-spacing: var(--cm-btn-sm-ls); font-weight: var(--cm-fw-semibold); }

/* Mobile & Tablet 0-767：DS 只覆寫 Display L/M/S 與 Heading L 四級 */
@media (max-width: 767px) {
  .cm-text-display-l { font-size: var(--cm-display-l-size-m); line-height: var(--cm-display-l-lh-m); }
  .cm-text-display-m { font-size: var(--cm-display-m-size-m); line-height: var(--cm-display-m-lh-m); }
  .cm-text-display-s { font-size: var(--cm-display-s-size-m); line-height: var(--cm-display-s-lh-m); }
  .cm-text-h1        { font-size: var(--cm-h1-size-m);        line-height: var(--cm-h1-lh-m); }
}

/* ==== tokens/tokens.shadow.css ==== */
/* CM Web DS — tokens.shadow.css
 * 陰影階。規格＝Figma DS「Shadow & Elevation 陰影」頁 node 24829:68758 Tokens 區（精確值，REST 抽取）。
 * 五階：Shadow-1 Web base／Shadow-2 Every Button／Shadow-3 Card／
 *       Shadow-4 Popover 與固定 navigation bar／Shadow-5 有遮罩的 Dialog。
 * 色一律 #262626（--cm-grey-100）帶透明度；rgba 直寫符合 CONTRIBUTING 例外規則。
 * 第 1 層 Base（頁面底）DS 明文不定義陰影值，故無 token。
 * 註：Shadow-4 與 CONTRIBUTING 通用慣例的彈出面板陰影一致。 */
:root {
  /* 數字階（依 DS Token 名） */
  --cm-shadow-1: 0 0 0 1px rgba(38,38,38,.05), 0 1px 3px 0 rgba(38,38,38,.15);
  --cm-shadow-2: 0 1px 0 0 rgba(38,38,38,.05);
  --cm-shadow-3: 0 1px 2px 0 rgba(38,38,38,.15), 0 0 5px 0 rgba(38,38,38,.05);
  --cm-shadow-4: 0 2px 10px 0 rgba(38,38,38,.10), 0 0 2px 0 rgba(38,38,38,.20);
  --cm-shadow-5: 0 26px 80px 0 rgba(38,38,38,.20), 0 0 1px 0 rgba(38,38,38,.20);

  /* 語意別名（依 DS 用途欄） */
  --cm-shadow-base: var(--cm-shadow-1);      /* Web base */
  --cm-shadow-button: var(--cm-shadow-2);    /* Every Button */
  --cm-shadow-card: var(--cm-shadow-3);      /* Card（卡片 hover 懸浮） */
  --cm-shadow-popover: var(--cm-shadow-4);   /* Popover／固定 navigation bar */
  --cm-shadow-dialog: var(--cm-shadow-5);    /* Dialog／Modal（下有遮罩） */
}

/* ==== tokens/themes/talaria.theme.css ==== */
/* Talaria 主題覆蓋 — 示範「同一套元件，只改品牌色」。
 * CMoney DS 預設主色＝紅 #E21E28；Talaria 受眾洞察平台改用深藍 #203576、亮藍 #009AD6。
 * 用法：把 class="cm-theme-talaria" 放在 <body>（或任一容器），其底下所有元件即變藍。
 * 灰階/危險/成功不改（與 CMoney 相同）。 */
.cm-theme-talaria {
  /* 主要Primary → Talaria 深藍 */
  --cm-primary-basic:#203576; --cm-primary-hover:#1A2C63; --cm-primary-click:#14204A;
  --cm-primary-light:#EAEDF5; --cm-primary-focus:#D3DAEC; --cm-primary-border:#A9B4D6;
  /* 互動Interaction / 連結 → Talaria 亮藍 */
  --cm-interaction-basic:#009AD6; --cm-interaction-hover:#0079A8; --cm-interaction-click:#005E82;
  --cm-interaction-light:#E4F4FB; --cm-interaction-focus:#BEE6F5; --cm-interaction-border:#8DD3EE;
}