/* ========================================================================== Scrilab Design Tokens 單一真相來源。任何顏色、字級、間距、動效時間都必須來自這裡。 請勿在各頁 CSS 內硬寫 hex 或 ms。 ========================================================================== */ :root { /* --------------------------------------------------------------------- 色彩 — 深色分層藍調 純黑 #000 在 OLED 上會讓卡片邊界消失，改用四階深灰藍拉出空氣感。 --------------------------------------------------------------------- */ --bg-base: #08090B; /* 頁面最底（main-wrapper 之外） */ --bg-surface: #0E1014; /* 內容區 */ --bg-raised: #14171D; /* 卡片 */ --bg-overlay: #1B1F27; /* hover / modal / 下拉 */ --bg-sunken: #0A0C0F; /* 程式碼區、輸入框內凹 */ /* 線條 — 三階，取代單一 border 色 */ --line-subtle: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .16); /* 文字 — 三階 */ /* 對比度都以 --bg-base #08090B 為底實測（tools/audit.py） */ --text-hi: #F2F4F7; /* 標題、重點 17.5:1 */ --text-mid: #A0A7B4; /* 正文 8.4:1 */ --text-lo: #838B98; /* 註解、次要 對比要用「它會出現的最亮背景」來校，不是頁面最底色： 在 --bg-overlay #1B1F27 上 4.8:1、在 --bg-base 上 5.7:1。 原本的 #6B7280 在卡片上只有 3.9:1，換過的 #757D89 也只有 4.3:1， 都不到 AA 的 4.5。 */ --text-inverse: #08090B; /* 亮底上的文字 */ /* 重點色 — 由 #3b82f6 降飽和、提亮度，深底上更耐看 用色紀律：只用於主 CTA / 超連結 / focus ring / 當前導航項 / 關鍵數據 ⚠ 兩個角色要分開： --accent 當「深底上的文字/邊框」用，必須夠亮 --accent-solid 當「填色背景 + 白字」用，必須夠暗才撐得起白字 白字在 --accent 上只有 3.20:1，不到一般文字要求的 4.5， 所以填色按鈕一律用 --accent-solid（白字 4.7:1）。 */ --accent: #4C8DFF; /* 文字/連結/邊框 */ --accent-hi: #6BA1FF; /* 文字 hover */ --accent-lo: #2F6FE0; --accent-solid: #2F6FE0; /* 填色背景，配白字 4.7:1 */ --accent-solid-a:#2A64D6; /* 填色背景 active，配白字 5.4:1 */ --accent-dim: rgba(76, 141, 255, .12); --accent-line: rgba(76, 141, 255, .28); --accent-glow: rgba(76, 141, 255, .35); /* 狀態色 */ --ok: #34D399; --ok-dim: rgba(52, 211, 153, .12); --warn: #FBBF24; --warn-dim: rgba(251, 191, 36, .12); --err: #F87171; --err-dim: rgba(248, 113, 113, .12); /* --------------------------------------------------------------------- 字型 Inter 沒有中文字符 → 中文必須明確落到 Noto Sans TC， 否則會 fallback 到系統字型，同一行出現兩種字型。 --------------------------------------------------------------------- */ --font-sans: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace; /* 字級 — 1.25 modular scale */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.375rem; /* 22px */ --fs-2xl: 1.75rem; /* 28px */ --fs-3xl: 2.25rem; /* 36px */ --fs-4xl: 3rem; /* 48px */ --fs-5xl: 3.75rem; /* 60px */ /* 字重 */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* 行高 — 中文方塊字需要比西文更多呼吸 */ --lh-tight: 1.25; /* 大標 */ --lh-snug: 1.45; /* 小標、按鈕 */ --lh-normal: 1.65; /* 一般 */ --lh-relax: 1.75; /* 中文長文正文 */ /* 字距 */ --ls-tight: -0.02em; /* 西文大標 */ --ls-normal: 0; --ls-cjk: 0.01em; /* 中文正文 */ --ls-wide: 0.08em; /* 全大寫 eyebrow / badge */ /* --------------------------------------------------------------------- 間距 — 4px 基準 --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* --------------------------------------------------------------------- 圓角 --------------------------------------------------------------------- */ --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* --------------------------------------------------------------------- 層次（elevation） 深色底打黑陰影等於沒打 → 改用「邊框 + 內光 + 大範圍柔和暗影」 --------------------------------------------------------------------- */ --elev-1: 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .03); --elev-2: 0 0 0 1px var(--line), 0 8px 24px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); --elev-3: 0 0 0 1px var(--line-strong), 0 16px 48px -12px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); --elev-4: 0 0 0 1px var(--line-strong), 0 32px 80px -16px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08); /* 重點色光暈 — 主 CTA / focus */ --glow-accent: 0 0 0 1px var(--accent-line), 0 8px 32px -8px var(--accent-glow); /* --------------------------------------------------------------------- 動效 鐵則：進場用 ease-out 且快；離場用 ease-in 且時長減半。 只動 transform 與 opacity（GPU 合成層）。 --------------------------------------------------------------------- */ --dur-instant: 80ms; /* 按鈕按下回饋 */ --dur-fast: 160ms; /* hover / focus */ --dur-base: 240ms; /* 卡片浮起、tooltip */ --dur-slow: 400ms; /* modal、抽屜 */ --dur-page: 520ms; /* 頁面轉場 */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* 進場：快進慢出，質感關鍵 */ --ease-in: cubic-bezier(.4, 0, 1, 1); /* 離場 */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* 位移 */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 彈跳，只用於成功/確認 */ /* 常用組合。 刻意不用 `all` —— visibility 是可繼承屬性，`transition: all` 會把 從 .modal / .nav-drawer 繼承下來的 visibility 變化也拿去補間， discrete 屬性要到補間 50% 才翻面，導致開啟後前半段時間裡 面板內的按鈕仍是 visibility:hidden、無法被 focus()，focus trap 直接失效。 另外 `all` 也讓瀏覽器得監看每一個屬性，沒有好處。 */ --t-fast: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); --t-base: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); /* --------------------------------------------------------------------- 版面 --------------------------------------------------------------------- */ --wrap-max: 1280px; /* main-wrapper 最大寬（原 1200px） */ --content-max: 1120px; /* 內容容器 */ --prose-max: 68ch; /* 長文可讀寬度 */ --nav-h: 72px; /* 導覽列高度，錨點 scroll-padding 依此 */ --nav-h-sm: 60px; /* 捲動後縮高 */ /* z-index 分層 — 集中管理避免各頁亂喊數字 */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 1000; --z-drawer: 1100; --z-modal: 1200; --z-toast: 1300; }