/* rico-style.css v1.0.0 · git@git_ai:Qlink-TP/qlink_theme.git · 產生檔，請勿手改 */ /* ============================================================================ rico-style.css — qlink_theme 的第二套平行主題，手寫源檔單一真相來源（Single Source of Truth）就是這支檔案本身 ---------------------------------------------------------------------------- 設計目標： 1. 灰白為預設主題（:root），深色為切換（html[data-theme="dark"]） 2. 字級整體升一級（base 16px），標籤最小 13px，標題用 clamp() 隨螢幕縮放 3. 一套 token 名涵蓋深淺兩色，舊變數名（--c-green 等）保留別名相容 4. 三個標準斷點：640 / 960 / 1280 tools/emit-rico.py 在本檔中段唯一的切分標記處，把這支源檔切成兩支產生檔： dist/rico-style.css — token 層（必載） dist/rico-style-components.css — 元件層（選配）載入順序（路徑會過期，順序永遠為真）： 1. token 層（必載） 2. 元件層（選配，同時是一份全域 reset） 3. 專案自己的樣式 —— 永遠最後每頁可設指定識別色實際的與網址見 repo 的 docs/consuming.md；完整 token 表與元件目錄見 docs/rico-style.md。 ============================================================================ */ /* ───────────────────────── 1. 主題色：灰白（預設）───────────────────────── */ :root { color-scheme: light; /* 結構色（與 logistics / purchase 既有淺色值對齊） */ --bg: #f5f6fa; /* 頁面底 */ --card: #fff; /* 主要卡片 */ --card2: #f8fafc; /* 次要區塊／表頭 */ --line: #e9edf3; /* 一般邊框／分隔線 */ --line2: #dde3ec; /* 強調邊框 */ /* 文字三階 */ --tx: #1f2937; /* 主文字 */ --tx2: #64748b; /* 次要文字／標籤 */ --tx3: #94a3b8; /* 弱化文字／提示 */ /* 語意色（標準名） */ --green: #10b981; --red: #ef4444; --amber: #f59e0b; --blue: #3b82f6; --violet: #8b5cf6; --teal: #14b8a6; --cyan: #06b6d4; --orange: #f97316; /* 語意色的淡底（badge／chip 背景） */ --green-bg: #ecfdf5; --red-bg: #fef2f2; --amber-bg: #fffbeb; --blue-bg: #eff6ff; --violet-bg: #f5f3ff; --teal-bg: #f0fdfa; --cyan-bg: #ecfeff; --orange-bg: #fff7ed; /* 陰影（淺色用柔和投影） */ --shadow-sm: 0 1px 2px rgb(15 23 42 / .06); --shadow-md: 0 4px 14px rgb(15 23 42 / .08); --shadow-lg: 0 12px 32px rgb(15 23 42 / .12); /* 識別色預設（可被 body[data-accent] 覆寫） */ --accent: var(--blue); --accent-bg: var(--blue-bg); } /* ───────────────────────── 2. 主題色：深色（切換）───────────────────────── */ html[data-theme="dark"] { color-scheme: dark; /* 結構色（與 sales/v2 既有深色值對齊） */ --bg: #0b0f1a; --card: #131a2b; --card2: #0f1522; --line: #1e2840; --line2: #2a3654; --tx: #e6ebf5; --tx2: #8b96ad; --tx3: #525e78; /* 語意色（深色版較亮，沿用 sales 調性） */ --green: #34d399; --red: #fb7185; --amber: #fbbf24; --blue: #60a5fa; --violet: #a78bfa; --teal: #2dd4bf; --cyan: #22d3ee; --orange: #fb923c; --green-bg: #0c2a22; --red-bg: #2a1119; --amber-bg: #2a2110; --blue-bg: #10243f; --violet-bg: #1d1733; --teal-bg: #0c2a2a; --cyan-bg: #0a2a33; --orange-bg: #2a1a0c; --shadow-sm: 0 1px 2px rgb(0 0 0 / .35); --shadow-md: 0 4px 16px rgb(0 0 0 / .45); --shadow-lg: 0 14px 38px rgb(0 0 0 / .55); } /* ─────────── 3. 舊變數名相容別名（既有頁面不改也能運作）─────────── */ :root, html[data-theme="dark"] { --c-green: var(--green); --c-red: var(--red); --c-amber: var(--amber); --c-blue: var(--blue); --c-violet: var(--violet); --c-teal: var(--teal); --card-bg: var(--card); --border: var(--line); --border2: var(--line2); --text: var(--tx); --text-muted: var(--tx2); --text-faint: var(--tx3); --success: var(--green); --danger: var(--red); --warning: var(--amber); } /* ───────────────────────── 4. 各版面識別色 ───────────────────────── */ body[data-accent="logistics"] { --accent: var(--blue); --accent-bg: var(--blue-bg); } body[data-accent="purchase"] { --accent: var(--violet); --accent-bg: var(--violet-bg); } body[data-accent="sales"] { --accent: var(--green); --accent-bg: var(--green-bg); } body[data-accent="cost"] { --accent: var(--amber); --accent-bg: var(--amber-bg); } /* ───────────────────────── 5. 字級／字重／行高 ───────────────────────── base 16px（升一級）；標籤最小 13px 不再縮；標題 clamp() 手機自動降一級 */ :root { --fs-xs: 0.8125rem; /* 13px — 最小標籤、註記 */ --fs-sm: 0.9375rem; /* 15px — 次要內文 */ --fs-base: 1rem; /* 16px — 標準內文 */ --fs-md: 1.125rem; /* 18px — 強調內文 */ --fs-lg: clamp(1.25rem, 1.10rem + 0.6vw, 1.5rem); /* 區塊標題 20→24 */ --fs-xl: clamp(1.5rem, 1.30rem + 1.0vw, 2rem); /* 頁面標題 24→32 */ --fs-2xl: clamp(2rem, 1.60rem + 2.0vw, 2.75rem); /* Hero／大數字 32→44 */ --fs-num: clamp(1.75rem, 1.40rem + 1.6vw, 2.5rem); /* KPI 數字 */ --fw-normal: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.6; /* 間距階（4 的倍數） */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* 圓角階（2026-06-29 調圓：貼近並略超過 sales 原始手感） */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-full: 999px; /* 標準斷點（供註解參考；CSS 內直接寫數值）：640 / 960 / 1280 */ } /* 版本戳記：由 tools/emit-rico.py 注入，不在源檔裡。要查某個頁面實際載入的是哪一版，這是唯一能事後查出的線索。 */ :root { --rico-style-version: "1.0.0"; }