/* ============================================================ 衡點設計系統 · tokens.css — 全站唯一色票 / 尺寸 / 字體真相源 Design System v1 · 2026-07-02 ------------------------------------------------------------ 來源：品牌官方 14 色（品牌顏色.pdf）+ Pencil 稿 pencil-new.pen（桌機整併版 KteKp） 用法：頁面 載入本檔即可。本檔「只有變數、沒有選擇器」→ 載它不改變任何外觀， 直到頁面自己用 var(--...) 去吃這些值。 個人化主色：把 或任一容器加上 data-theme="coral|yellow|blue"（預設綠）， 凡是吃 --primary* 的元件會整組換色；狀態色（--brand-*）不受影響、恆定。 ============================================================ */ :root { /* ── 品牌四主色家族（固定值，狀態語意用，不隨個人主色改變）── */ --brand-green: #7ac19a; --brand-green-light: #e2ede6; --brand-green-dark: #5f846f; --brand-red: #f2ac98; --brand-red-light: #faece8; --brand-red-dark: #c67566; --brand-yellow: #ffe08b; --brand-yellow-light: #fcf4e3; --brand-yellow-dark: #ba9e60; --brand-blue: #9fcccc; --brand-blue-light: #daedec; --brand-blue-dark: #66888e; /* ── 中性 / UI（介面實作用，非品牌四色）── */ --text: #2d3436; /* 主文字 */ --text-muted: #636e72; /* 次要文字 */ --text-on-dark: #ffffff; /* 深底（側欄）上的文字 */ --grey-ui: #b3bcc1; /* 禁用 / 已下班 */ --page-bg: #e8f1ea; /* 頁面底（隨主題換：綠＝淡綠；手機才看得出換色）*/ --surface: #ffffff; /* 卡片 / 橫條 / 清單底 */ --border: #e6ebe8; /* 一般分隔線 / 輸入框框線 */ --danger: #e05252; /* 錯誤 / 未打卡 */ --success: #7ac19a; /* 成功（＝品牌綠）*/ /* ── 可切換主色層（個人化）：預設＝綠家族 ── 元件一律吃 --primary*（別直接寫 --brand-green），才能被 data-theme 換色。 *-rgb 供半透明用：rgba(var(--primary-rgb), .18) */ --primary: #7ac19a; --primary-rgb: 122,193,154; --primary-dark: #5f846f; --primary-dark-rgb: 95,132,111; --primary-light: #e2ede6; --primary-soft: rgba(122,193,154, .18); /* 圖示晶片底、tag 底 */ --primary-border: rgba( 95,132,111, .10); /* 卡片框線（稿：#5f846f1a）*/ /* ── 圓角（稿值）── */ --radius-sm: 10px; /* 導覽項 / 小晶片 */ --radius-md: 12px; /* 圖示晶片 / 使用者盒 */ --radius-lg: 14px; /* 模組卡 */ --radius-xl: 16px; /* 統計卡 */ --radius-pill: 999px; /* 藥丸標籤 / 頭像 */ /* ── 陰影（稿值）── */ --shadow-card: 0 3px 14px rgba(0,0,0,.05); /* 卡片柔陰影（稿：#0000000d）*/ --shadow-pop: 0 8px 28px rgba(0,0,0,.12); /* 彈窗 / 下拉 */ /* ── 間距節奏 ── */ --gap-1: 6px; --gap-2: 8px; --gap-3: 10px; --gap-4: 12px; --gap-5: 14px; --gap-6: 16px; --gap-7: 18px; --gap-8: 24px; /* ── 字體 ── */ --font-sans: 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif; /* ── 版型尺寸（桌機後台）── */ --sidebar-w: 252px; /* ── 側欄配色（隨個人主色換）── 預設＝綠：深底 + 白字系 ── 深色系主題（綠/珊瑚/藍）皆沿用這組白字 overlay，只覆蓋 --sidebar-bg； 亮色系（黃）另在 [data-theme="yellow"] 覆蓋整組為深字。 */ --sidebar-bg: var(--brand-green-dark); /* 側欄底 */ --sidebar-text: #ffffff; /* 品牌字 / 選中字 / 圖示 */ --sidebar-text-2: rgba(255,255,255,.85); /* 導覽項 */ --sidebar-text-3: rgba(255,255,255,.50); /* 分組標 / 使用者副標 */ --sidebar-hover: rgba(255,255,255,.10); /* 導覽 hover */ --sidebar-active: rgba(255,255,255,.16); /* 導覽選中 */ --sidebar-surface: rgba(255,255,255,.08); /* 使用者盒 */ --sidebar-avatar: rgba(255,255,255,.18); /* 頭像底 */ } /* ── 個人化主色：珊瑚（深底 + 白字，沿用預設 overlay）── */ [data-theme="coral"] { --primary: #f2ac98; --primary-rgb: 242,172,152; --primary-dark: #c67566; --primary-dark-rgb: 198,117,102; --primary-light: #faece8; --primary-soft: rgba(242,172,152, .18); --primary-border: rgba(198,117,102, .10); --sidebar-bg: #c67566; /* 深珊瑚側欄 */ --page-bg: #fbf1ed; /* 淡珊瑚頁底 */ } /* ── 個人化主色：黃（亮底 + 深字，避免土金）── 黃是亮色 → 側欄用品牌主黃 #ffe08b 當亮底、配深字，晴朗不土。 重點色（晶片/按鈕/hover）仍走 --primary（亮黃）+ --primary-dark（土金）小面積用。 */ [data-theme="yellow"] { --primary: #ffe08b; --primary-rgb: 255,224,139; --primary-dark: #ba9e60; --primary-dark-rgb: 186,158, 96; --primary-light: #fcf4e3; --primary-soft: rgba(255,224,139, .22); --primary-border: rgba(186,158, 96, .12); --sidebar-bg: #ffe08b; /* 亮黃側欄 */ --sidebar-text: #4a5540; /* 深橄欖字（在亮黃上清楚可讀）*/ --sidebar-text-2: rgba(45,52,54,.72); --sidebar-text-3: rgba(45,52,54,.48); --sidebar-hover: rgba(0,0,0,.06); --sidebar-active: rgba(0,0,0,.10); --sidebar-surface: rgba(0,0,0,.05); --sidebar-avatar: rgba(0,0,0,.10); --page-bg: #fdf8ea; /* 淡黃頁底 */ } /* ── 個人化主色：藍（深底 + 白字，沿用預設 overlay）── */ [data-theme="blue"] { --primary: #9fcccc; --primary-rgb: 159,204,204; --primary-dark: #66888e; --primary-dark-rgb: 102,136,142; --primary-light: #daedec; --primary-soft: rgba(159,204,204, .20); --primary-border: rgba(102,136,142, .10); --sidebar-bg: #66888e; /* 深藍側欄 */ --page-bg: #e8f2f2; /* 淡藍頁底 */ }