/* =========================================================================== tokens.css — 設計 token 值全部取自 docs/DESIGN.md 的「Quick Start → CSS Custom Properties」。 這個檔是本站唯一允許出現裸色碼的地方；app.css 只能引用 var()。 不得自行發明中間值。要改先改 docs/DESIGN.md。 =========================================================================== */ :root { /* 淺色跟深色兩套並存，由 color-scheme 決定用哪一套（見本檔最後一節）。 每個 token 先寫一行純淺色當後備，再寫 light-dark() 的版本——不支援 light-dark() 的舊瀏覽器會忽略第二行，退回淺色，不會整條 token 失效。 深色值不是隨手調的：淺色那套的層次是 canvas → surface-alt → paper 由暗到亮，深色維持同一個語意（越上層越亮），色階取自 shadcn/ui 自己的 neutral 深色刻度，色相仍然是零（純中性灰），符合 DESIGN.md 的單色原則。 */ /* Colors */ --color-canvas: #f5f5f5; --color-canvas: light-dark(#f5f5f5, #0a0a0a); --color-paper: #ffffff; --color-paper: light-dark(#ffffff, #1a1a1a); --color-surface-alt: #fafafa; --color-surface-alt: light-dark(#fafafa, #141414); --color-ink: #0a0a0a; --color-ink: light-dark(#0a0a0a, #fafafa); --color-ink-soft: #171717; --color-ink-soft: light-dark(#171717, #ededed); /* 兩邊的 muted 都不能用同一個值。 深色：#737373 在 #1a1a1a 上只有 3.4:1，不到 AA，提亮到 #a1a1a1 （卡片上 6.7:1、頁面底色上 7.7:1）。 淺色：#737373 在 #f5f5f5 上是 4.35:1，不到 AA 的 4.5:1，而且看起來偏淡。 改成 #606060（頁面底色 5.8:1、卡片 6.3:1），由主人指定。 這是本檔唯一一個不在 shadcn neutral 刻度上的值：官方刻度只有 #737373 （太淡、不合 AA）與 #525252（合格但偏重），中間沒有可用的階。要再調的話 下限是 #717171——再淡就掉出 AA 了。 */ --color-mid-gray: #606060; --color-mid-gray: light-dark(#606060, #a1a1a1); --color-hairline: #e5e5e5; --color-hairline: light-dark(#e5e5e5, #333333); /* 只給 destructive。被支配的系統、低證據等級、低成功率都不是 destructive。 深色版換成 #ff6467——#e7000b 在深底上只有 2.6:1，讀不出來。 */ --color-ember: #e7000b; --color-ember: light-dark(#e7000b, #ff6467); /* Typography — Font Families */ --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.33; --tracking-caption: 0.6px; --text-body: 14px; --leading-body: 1.43; --text-body-lg: 16px; --leading-body-lg: 1.5; --text-subheading: 18px; --leading-subheading: 1.56; --text-heading-sm: 24px; --leading-heading-sm: 1.33; --tracking-heading-sm: -0.6px; --text-heading: 30px; --leading-heading: 1.2; --tracking-heading: -0.75px; --text-heading-lg: 36px; --leading-heading-lg: 1.11; --tracking-heading-lg: -0.9px; --text-display: 48px; --leading-display: 1.1; --tracking-display: -2.4px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* 700 只給站名裡的 OpenMyMy 字標，不是通用的標題字重——介面文字最重仍是 600。 這一階是本檔在 DESIGN.md 的 400/500/600 之外唯一新增的字重，已同步寫進 docs/DESIGN.md 的 Typography 一節。用之前記得字型請求也要載入 700， 否則瀏覽器會拿 600 去合成假粗體。 */ --font-weight-bold: 700; /* Spacing */ --spacing-unit: 4px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-48: 48px; /* Layout */ --page-max-width: 1280px; /* DESIGN.md 原值寫 `--section-gap: 48-80px`，那不是合法 CSS 值， 所以拆成上下界兩個 token，數值沒有更動。 */ --section-gap: 48px; --section-gap-lg: 80px; --card-padding: 20px; --element-gap: 8px; /* Border Radius */ --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; --radius-3xl: 24px; /* Named Radii */ --radius-cards: 24px; --radius-small: 6px; --radius-badges: 18px; --radius-inputs: 18px; --radius-nested: 10px; --radius-buttons: 18px; /* Shadows 深色版不能沿用 rgba(0,0,0,.1)——黑影投在黑底上等於沒有。改成一圈很淡的 白色 ring 撐出卡片邊界，再加一層真正的黑影做深度，維持「幾乎察覺不到的 浮起」那個層級，不會變成戲劇性的陰影。 */ /* light-dark() 只接受兩個參數，而這是三段式陰影，塞不進去。 所以陰影用兩個具名 token 存好，再由本檔最後一節的深色區塊切換。 */ --shadow-light: oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px; --shadow-dark: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 1px 3px 0px, rgba(0, 0, 0, 0.4) 0px 1px 2px -1px; --shadow-subtle: var(--shadow-light); --shadow-subtle-2: lab(2.75381 0 0) 0px 0px 0px 0px; /* Surfaces — 與上面的色彩 token 是同一組值，用 var() 指過去， 深色切換時才不會有一半忘了跟著換。 */ --surface-canvas: var(--color-canvas); --surface-sidebar: var(--color-surface-alt); --surface-card: var(--color-paper); --surface-input-fill: var(--color-canvas); } /* --------------------------------------------------------------------------- 衍生 token — 只由上面的原始值組合而成，沒有新色碼、沒有新色相。 下面每一項都是 DESIGN.md 未明訂、由本檔決定的版面數值，已列入交付說明。 --------------------------------------------------------------------------- */ :root { /* 字體堆疊：Geist → Inter → system-ui（CONTRACT.md 第 4 節） */ --font-ui: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-features: "ss01" on, "cv11" on; /* 邊框與 focus ring：DESIGN.md 一律 1px hairline */ --border-hairline: 1px solid var(--color-hairline); --focus-ring: 0 0 0 1px var(--color-hairline); /* 表面語意別名 */ --surface-page: var(--color-canvas); --surface-raised: var(--color-paper); --surface-muted: var(--color-surface-alt); /* 文字語意別名 */ --text-primary: var(--color-ink); --text-secondary: var(--color-ink-soft); --text-muted: var(--color-mid-gray); /* 元件尺寸（DESIGN.md 未明訂，見交付說明） */ --control-height: 36px; /* DESIGN.md：按鈕高度 ≈ 36–40px */ --bar-height: 4px; /* Stat Block 的細進度條 */ --table-cell-padding-y: 12px; /* compact density，走 --spacing-12 */ --table-min-width: 960px; /* 十欄表格的最小可讀寬度 */ --chart-aspect: 16 / 9; /* frontier-chart 容器比例 */ --chart-min-height: 320px; /* is-dominated 的降權改用 --text-muted，不再用不透明度——muted 疊 0.55 之後 對比只剩 2.0:1（淺）／2.9:1（深），達不到 WCAG AA，而那一層佔表格多數列。 見 app.css 的 .is-dominated。 */ --opacity-loading: 0.4; } /* --------------------------------------------------------------------------- 主題切換 三種狀態： 沒有 data-theme → 跟隨作業系統 data-theme="light" → 強制淺色 data-theme="dark" → 強制深色 color-scheme 同時做兩件事：讓上面的 light-dark() 選對值，以及讓瀏覽器把 原生控制項（