/* ========================================================================== 型態雷達 design tokens 主題模型:頁面預設淺色(:root,給 SEO 內容頁使用)。任何「工具表面」外層加 class .tool-page → 內部切換為深色 token (實務上用 .tool-page[data-theme="dark"] 選擇器,data-theme="dark" 為固定值, 保留未來如果要做淺色工具主題的擴充空間)。元件 CSS(styles.css)只准引用下面這些變數,不准寫裸色值。 ========================================================================== */ :root{ /* ---- 色彩:背景 / 邊框 / 文字 ---- */ --bg-page:#fbfbfa; --bg-surface:#ffffff; --bg-surface-2:#f3f4f6; --border:#e2e4e9; --border-strong:#c9cdd6; --fg:#14181f; --fg-muted:#565e6c; --fg-faint:#6b7280; /* AA 修正:原 #8b93a1 對淺底僅 2.99,調至 4.67(小字 meta 需 4.5) */ /* ---- 漲跌 / 連結強調 ---- */ --up:#08805a; --up-bg:rgba(13,159,110,.12); --down:#c62e3a; --down-bg:rgba(213,66,78,.12); --accent:#2f6fed; --accent-bg:rgba(47,111,237,.10); /* ---- 狀態(不得等於連結 --accent) ---- */ --status-form:#8a5300; --status-form-bg:rgba(184,114,10,.14); --status-done:#0b7a54; --status-done-bg:rgba(11,122,84,.12); /* ---- 免責 info-box ---- */ --info-bg:#eaf1ff; --info-border:#cfe0ff; --info-fg:#2b4a86; /* ---- 字型 ---- */ --font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* ---- 字級 scale ---- */ --fs-xs:11px; --fs-sm:12.5px; --fs-base:15px; --fs-md:16px; --fs-lg:19px; --fs-xl:23px; --fs-2xl:28px; /* ---- 行高 ---- */ --lh-tight:1.25; --lh-normal:1.5; --lh-loose:1.75; /* ---- 間距 ---- */ --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; /* ---- 圓角 / 陰影 ---- */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --shadow-sm:0 1px 2px rgba(20,24,31,.06); --shadow-md:0 4px 16px rgba(20,24,31,.08); } /* ========================================================================== 工具表面:深色終端風。加在任何「工具表面」容器上(例如

包住首頁的即時掃描框,或用在 /live 整頁)。 .content-page .frame 是內容頁裡的深色圖表島,套用同一組 token(見契約: 「內容頁淺色、其中的即時圖表框是深色島」)。 ========================================================================== */ .tool-page, [data-theme="dark"], .content-page .frame{ --bg-page:#070b12; --bg-surface:#0e1522; --bg-surface-2:#141c2b; --border:#1c2636; --border-strong:#2c3a4c; --fg:#e6edf3; --fg-muted:#9aa4b2; --fg-faint:#808a9a; /* AA 修正:原 #6b7686 對深底僅 4.28,調至 5.65(小字 meta 需 4.5) */ --up:#2ecc8e; --up-bg:rgba(46,204,142,.14); --down:#f0616d; --down-bg:rgba(240,97,109,.14); --accent:#7db0ff; --accent-bg:rgba(125,176,255,.12); --status-form:#e0a53a; --status-form-bg:rgba(224,165,58,.16); --status-done:#2ecc8e; --status-done-bg:rgba(46,204,142,.16); --info-bg:rgba(125,176,255,.10); --info-border:rgba(125,176,255,.25); --info-fg:#c3d5f5; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 8px 24px rgba(0,0,0,.45); }