/* FateTips V3 · 知命 — design tokens. THE single source: every colour, radius, font, duration, easing and layer lives here. Names are the contract (ARCHITECTURE.md); other files consume var(--*) only and never restate a value. Fonts: Noto Serif TC + Cormorant Garamond (display), Geist + Noto Sans TC (UI), Geist Mono (numerals). Loaded here so every page that links tokens.css gets them; display=swap keeps text visible on the system fallback while they arrive (offline = fallbacks, still legible). */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&family=Noto+Sans+TC:wght@300;400;500;600&family=Noto+Serif+TC:wght@300;400;500;600;700&family=LXGW+WenKai+TC:wght@300;400&display=swap'); :root { /* ── Paper & ink ──────────────────────────────────────────────────────────── Contrast, computed (WCAG 2.x relative luminance, qa/shell/contrast.js): --ink #151713 on --paper 15.83:1 · on --paper-bright 16.7:1 --ink-2 #52554C on --paper 6.67:1 (AA body ✓) · on --paper-bright 7.03:1 · on --backdrop 5.55:1 (deepened from #5E6158 on 2026-09-26 so the shared ink painting can reach 17% ink and --ink-2 still clears 4.7:1 over its darkest pixel — "No cards" round, assets/bg/) --ink-3 #7F8278 on --paper 3.43:1 (non-text only: icons at rest, rules; ≥3:1 ✓) --paper #F3F0E7 on --ink 15.83:1 · --ink-2-dark #A7ABA0 on --ink 7.71:1 --seal #B62F23 on --paper 5.39:1 · --paper-bright on --seal 5.68:1 (button text ✓) --jade #294C40 on --paper 8.37:1 · --paper-bright on --jade 8.82:1 ::selection paper: --paper-bright on --jade 8.82:1 · ink: --ink on #C9DBCF 12.47:1 */ --paper: #F3F0E7; --paper-bright: #F8F6EF; --paper-deep: #EAE5D8; /* recessed wells, skeletons */ --backdrop: #E2DCCB; /* desktop surround behind the device column */ --ink: #151713; --ink-2: #52554C; /* muted text (AA on paper, bright, and over the bg painting) */ --ink-3: #7F8278; /* non-text: resting icons, strong rules */ --line: rgba(21, 23, 19, .11); /* hairline */ --line-strong: rgba(21, 23, 19, .2); --wash: rgba(21, 23, 19, .045); /* faint ink wash: unselected option / chip fill, pressed rows */ --wash-strong: rgba(21, 23, 19, .075); /* hover on a wash control */ --jade: #294C40; /* system structure: links, focus, selection */ --jade-soft: #C9DBCF; --seal: #B62F23; /* the brand seal mark only (+ form error text); never a button */ --seal-press: #9C271D; /* Ink surface (quiet ink sky, onboarding, receipts) */ --ink-surface: #151713; --ink-surface-2: #1E211B; --on-ink: #F3F0E7; --on-ink-2: #A7ABA0; /* 7.71:1 on ink */ --on-ink-line: rgba(243, 240, 231, .14); /* Five elements as mineral pigments, only inside fate data */ --el-wood: #4E7658; /* 石綠 */ --el-fire: #B4553B; /* 朱磦 */ --el-earth: #A27A3C; /* 赭石 */ --el-metal: #8A826A; /* 鉛金 */ --el-water: #2E4A6B; /* 花青 */ /* ── White-mist glass (L-locked material; tune here only) ──────────────────── */ --glass-fill: rgba(250, 249, 245, .58); --glass-fill-solid: rgba(250, 249, 245, .96); /* no backdrop-filter / reduced transparency */ --glass-blur: blur(22px) saturate(1.3); --glass-rim: rgba(21, 23, 19, .075); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 -1px 0 rgba(21, 23, 19, .03), 0 1px 2px rgba(21, 23, 19, .04), 0 14px 34px -14px rgba(21, 23, 19, .22); /* ── No-cards round (2026-09-26, DESIGN.md "No cards"): one background, content on it ── Mist = gradient blur glass: backdrop blur + faint paper fill, mask dissolving to transparent (no edge, no radius, no shadow). Measured (qa/opt-shell/checks.cjs, darkest pixel under the text): --ink-2 on mist over the full-strength painting 4.98:1 · on sheets and the nav 6.61:1. The shared static painting is assets/bg/pine-mist.webp (grayscale pine, out of focus, alpha ≤ .17 so --ink-2 stays ≥ 4.68:1 over its darkest pixel; build: qa/opt-shell/make_bg.py; layer: base.css .ft-bg). */ --mist-fill: rgba(243, 240, 231, .74); /* .69 is the AA floor over the full-strength painting */ --mist-fill-strong: rgba(243, 240, 231, .82); /* sheets: the page behind stays legible-proof */ --mist-fill-solid: rgba(243, 240, 231, .97); /* no backdrop-filter / reduced transparency */ --mist-blur: blur(20px) saturate(1.05); --mist-fade: 28px; /* dissolve length on every mist edge */ --scrim: rgba(243, 240, 231, .58); /* paper haze behind sheets (was a dark ink scrim) */ /* Action = ink (seal red is the brand seal only; red buttons render as the ink pill) */ --action: var(--ink); --action-hover: #262922; --on-action: var(--paper-bright); /* ── Geometry ───────────────────────────────────────────────────────────── */ --radius-sm: 13px; --radius-md: 18px; --radius-lg: 28px; --radius-pill: 999px; --col: 402px; --gutter-flow: 28px; /* onboarding + full-bleed flows (FateTell measure, research/13) */ --gutter: 28px; /* app pages share the same 28px text measure */ --tap: 44px; /* hit area floor — never shrink the tap zone */ --ctl-h: 40px; /* visual height of pills, buttons, options */ --ctl-gap: 14px; /* gap between stacked options */ --action-gap: 16px; /* gap between stacked actions */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Safe spacing. --sat = status-bar-like top band; --sab = gap under the floating nav. Desktop frame (≥600px) overrides these in base.css. */ --frame-top: 0px; --frame-bottom: 0px; --status-h: 32px; --sat: calc(var(--frame-top) + var(--status-h)); --sab: calc(var(--frame-bottom) + 10px); --nav-h: 62px; --nav-clear: calc(var(--nav-h) + var(--sab) + 28px); /* page bottom padding under the nav */ /* ── Type ───────────────────────────────────────────────────────────────── */ --font-display: 'Cormorant Garamond', 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif; --font-ui: 'Geist', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Scale (optimisation round): title 24–26/300 · subtitle 13/400 --ink-2 · body 15 · labels 13 · micro 11–12. Hierarchy by size + tone, never weight. */ --fs-display-xl: 22.4px; /* L 2026-09-26: nothing on the site above 22.4px */ /* page / step title (300) */ --fs-display-l: 22px; /* section title */ --fs-display-m: 18px; /* group title */ --fs-title: 16px; /* UI title (bar, row emphasis) */ --fs-body: 15px; --fs-ctl: 14.5px; /* control label (pill, button, option) */ --fs-small: 14px; --fs-sub: 13px; /* subtitle under a title, max 2 lines */ --fs-label: 13px; /* field / column / group label */ --fs-caption: 12.5px; --fs-micro: 11.5px; --font-glyph: 'Noto Serif TC', 'Songti TC', serif; /* standard-form CJK glyphs (seal, 干支) */ /* ── Motion ─────────────────────────────────────────────────────────────── */ --dur-micro: 140ms; --dur-control: 240ms; --dur-panel: 440ms; --dur-route: 360ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); /* Damped spring (ζ .8, 1.5% overshoot), sampled — used for sheets entering */ --ease-spring: linear(0, .079, .249, .438, .61, .749, .852, .923, .969, .996, 1.009, 1.014, 1.015, 1.013, 1.01, 1.008, 1.005, 1.003, 1.002, 1.001, 1); /* ── Layers (one ladder; grep before adding) ────────────────────────────── */ --z-sticky: 20; --z-nav: 40; --z-frame: 50; /* desktop device mask */ --z-sheet: 80; /* +2 per stacked sheet */ --z-toast: 120; --z-dev: 200; /* DEV bar always on top */ } /* ── All Latin text in Satoshi Light (L-confirmed 2026-09-26 — KEEP):「英文字全部用 satoshi light」. Every family the app names (tokens and the few hard-coded stacks) gets a Latin-only face pointing at Satoshi Light (Fontshare, ITF Free Font License). Faces declared later win for overlapping ranges, so Latin letters, digits and punctuation render in Satoshi Light at every weight, and CJK text falls through to the CJK face unchanged. Needs internet (Fontshare CDN) — vendor the woff2 before an offline demo. */ @font-face { font-family: 'Satoshi Light'; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Serif TC'; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122; } @font-face { font-family: 'Noto Sans TC'; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122; } @font-face { font-family: 'Cormorant Garamond'; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122; } @font-face { font-family: 'Geist'; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122; } @font-face { font-family: 'Geist Mono'; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122; } @font-face { font-family: 'PingFang TC'; src: url('https://cdn.fontshare.com/wf/D7WD5OXZFWQ5T76HSPWAC7MNKAJXE2YG/LUGNSPO5YC34ABNB2O6K7AFDSOJZT56V/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-205E, U+20AC, U+2122; } :root { --font-display: 'Satoshi Light', 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif; --font-ui: 'Satoshi Light', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif; --font-mono: 'Satoshi Light', 'Geist Mono', ui-monospace, monospace; } /* Satoshi has no old-style figures to fight, but keep dates and prices aligned */ .mono, [class*="__v"], [class*="price"], time { font-variant-numeric: tabular-nums; } /* ── CJK display face: LXGW WenKai TC 霞鶩文楷 TC (assistant pick 2026-09-26, pending L; L asked for a Japanese-origin, TC-complete, zen-but-modern face — research/12-cjk-font-candidates.md). Derived from Fontworks' Klee One (Japan), covers all Big5 + HK supplementary sets, 300/400 weights, OFL, Google Fonts. It uses inherited (傳承) glyph forms, e.g. 為 draws as 爲. L 2026-09-27:「我說寫哪一個都可以不過統一」— so every CJK face here is WenKai (UI labels and mono included) and 為 reads the same everywhere; Satoshi stays first for Latin and digits. Swap back = drop it. */ /* English face (L 2026-09-27, font-lab-en.html panel 02「Cormorant Garamond · Body Cormorant Garamond — go for this please」): Latin letters and digits in Cormorant Garamond — display in the Regular cut, UI/mono in the Light cut (each one static cut declared for weights 1–1000); CJK stays WenKai. */ @font-face{font-family:'Fate Cormorant Display';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86KnrOiss4.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Fate Cormorant Display';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_v86KnTOig.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Fate Cormorant Body';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_qE6KnrOiss4.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Fate Cormorant Body';src:url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3umX5slCNuHLi8bLeY9MK7whWMhyjypVO7abI26QOD_qE6KnTOig.woff2') format('woff2');font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root { --font-display: 'Fate Cormorant Display', 'LXGW WenKai TC', 'Noto Serif TC', 'Songti TC', serif; --font-ui: 'Fate Cormorant Body', 'LXGW WenKai TC', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', system-ui, sans-serif; --font-mono: 'Fate Cormorant Body', 'LXGW WenKai TC', 'Geist Mono', ui-monospace, monospace; }