/* ===================================================================== 器傳 QICHUAN — Design Tokens (single source of truth) --------------------------------------------------------------------- 所有工具頁的顏色 / 字型 / 圓角 / 陰影 / 間距都來自這裡。 值同步「主頁」(index.html) 的視覺基因；改色只改這裡 → 全站一致。 每個顏色提供兩種形式： --qc-x : hex，給純 HTML（theme.css）直接用 var(--qc-x)。 --qc-x-rgb : "R G B" 通道，給 Tailwind 用 rgb(var(--qc-x-rgb) / ) → 支援 /透明度 修飾。 深色模式：在 加 data-theme="dark"，下方變數會自動切換 （hex 與 rgb 兩種都會換）。 ===================================================================== */ :root { /* ---- 品牌色 ---- */ --qc-primary: #2b54d4; --qc-primary-rgb: 43 84 212; --qc-primary-hover: #2344b0; --qc-primary-hover-rgb: 35 68 176; --qc-primary-deep: #1c328a; --qc-primary-deep-rgb: 28 50 138; --qc-primary-soft: #cfe0ff; --qc-primary-soft-rgb: 207 224 255; --qc-primary-ink: #1c328a; --qc-primary-ink-rgb: 28 50 138; --qc-primary-tint: #eef2fd; --qc-primary-tint-rgb: 238 242 253; --qc-primary-tint-2: #e2e9fb; --qc-primary-tint-2-rgb: 226 233 251; /* ---- 中性色（值同步主頁）---- */ --qc-bg: #fbfcfe; --qc-bg-rgb: 251 252 254; --qc-surface: #ffffff; --qc-surface-rgb: 255 255 255; --qc-text: #141925; --qc-text-rgb: 20 25 37; --qc-text-muted:#5a6675; --qc-text-muted-rgb: 90 102 117; --qc-text-subtle:#8b96a6; --qc-text-subtle-rgb: 139 150 166; --qc-border: #e7ecf3; --qc-border-rgb: 231 236 243; /* ---- 頁首專用（固定為深藍底白字，給舊版 .qc-header 用，不隨深淺色反轉）---- */ --qc-header-bg: #2b54d4; --qc-header-fg: #ffffff; --qc-header-accent: #cfe0ff; /* ---- 狀態色 ---- */ --qc-success: #10b981; --qc-success-rgb: 16 185 129; --qc-warning: #f59e0b; --qc-warning-rgb: 245 158 11; --qc-danger: #ef4444; --qc-danger-rgb: 239 68 68; /* ---- 字型 ---- */ --qc-font-sans: 'IBM Plex Sans', 'IBM Plex Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --qc-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---- 圓角 ---- */ --qc-radius-sm: 8px; --qc-radius: 16px; --qc-radius-lg: 24px; --qc-radius-pill: 999px; /* ---- 陰影 ---- */ --qc-shadow-sm: 0 1px 3px rgba(16, 28, 64, 0.08); --qc-shadow: 0 4px 16px rgba(16, 28, 64, 0.10); --qc-shadow-lg: 0 14px 30px -18px rgba(27, 50, 138, 0.45); /* ---- 間距尺度（4 的倍數）---- */ --qc-space-1: 4px; --qc-space-2: 8px; --qc-space-3: 12px; --qc-space-4: 16px; --qc-space-6: 24px; --qc-space-8: 32px; --qc-space-12: 48px; /* ---- 內容最大寬度 ---- */ --qc-container: 960px; } /* ===================================================================== 深色模式： 只覆寫會反轉的顏色（hex + rgb 兩種）；狀態色 / 圓角 / 間距 / 字型不變。 ===================================================================== */ html[data-theme="dark"] { --qc-primary: #7c9bf2; --qc-primary-rgb: 124 155 242; --qc-primary-hover: #9fb6f6; --qc-primary-hover-rgb: 159 182 246; --qc-primary-deep: #9fb6f6; --qc-primary-deep-rgb: 159 182 246; --qc-primary-soft: #2b3a5a; --qc-primary-soft-rgb: 43 58 90; --qc-primary-ink: #cfe0ff; --qc-primary-ink-rgb: 207 224 255; --qc-primary-tint: #1a2336; --qc-primary-tint-rgb: 26 35 54; --qc-primary-tint-2: #2b3a5a; --qc-primary-tint-2-rgb: 43 58 90; --qc-bg: #0d1017; --qc-bg-rgb: 13 16 23; --qc-surface: #151b26; --qc-surface-rgb: 21 27 38; --qc-text: #eef1f6; --qc-text-rgb: 238 241 246; --qc-text-muted:#aab4c2; --qc-text-muted-rgb: 170 180 194; --qc-text-subtle:#6c7686; --qc-text-subtle-rgb: 108 118 134; --qc-border: #242e3d; --qc-border-rgb: 36 46 61; --qc-header-bg: #1c328a; --qc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50); --qc-shadow: 0 8px 20px rgba(0, 0, 0, 0.50); --qc-shadow-lg: 0 16px 34px -16px rgba(0, 0, 0, 0.70); }