/* ========================================================================== Design Tokens — 衍生 (Yinannsheng) new version Source of truth: "衍生 -Copy-260730" (key kkF3A3s8f89H5WEtuhz6Li) — our own duplicate of the designer's newest files, read on a Full seat (200 MCP calls/day). Supersedes the 260722 copy (LKIZGhUGjuDkob3yW8XNwe). The designer's live file (djbyIZsSSCyP5Xuk7d3gV5) is readable too since she granted edit access 2026-07-22, but only on a View seat with a very low MCP quota — so use it sparingly, just to check whether she has changed anything, and re-duplicate when she has. - Base Colours : node 407:839 - text style : node 407:817 - button : node 417:245 (component-level vars) - Input Field : node 430:398 (component-level vars) Do not hand-edit values without re-syncing. RE-SYNC NOTE (2026-07-30): line-heights only. Every COLOUR below re-verified against Base Colours and unchanged. Every text style moved from ratio to absolute px — see the line-height block. Also confirms neutral/400 now resolves to a single #CFCFCF (it used to report two values). RE-SYNC NOTE (2026-07-22): the designer migrated from raw scales (neutral-700, primary-300 …) to SEMANTIC tokens (text/primary, text/brand …). New semantic names are the source of truth below; the old scale names are kept as ALIASES at the bottom so existing components.css keeps working. Migrate components.css to the semantic names, then delete the alias block. ========================================================================== */ :root { /* ====================================================================== COLOUR — semantic (source of truth) ====================================================================== */ /* ----- Text ----------------------------------------------------------- */ --text-primary: #373939; --text-secondary: #585A59; --text-tertiary: #888887; --text-inverse: #FFFFFF; --text-brand: #519B6E; --text-disabled: #CFCFCF; /* = icon/disabled; same value as border/strong */ /* ----- Surface / background ------------------------------------------ */ --surface-default: #FFFFFF; --surface-interactive-hover: #F8F8F8; --surface-inverse: #373939; /* dark footer bar */ --background-page: #FFFFFF; --background-page-subtle: #F8F8F8; --background-brand: #519B6E; --background-brand-light: #EBF6EF; /* ----- Border --------------------------------------------------------- */ --border-default: #ECEEED; --border-strong: #CFCFCF; /* replaces the old --neutral-400 #B5B7B3 */ --border-brand: #519B6E; /* ----- Icon ----------------------------------------------------------- */ --icon-primary: #585A59; --icon-secondary: #888887; /* ====================================================================== COLOUR — raw scales (still bound in Figma) ====================================================================== */ --neutral-900: #0F0F10; /* NEW this sync */ --primary-400: #064334; /* darkest — primary actions / headings */ --primary-200: #62CA8B; --secondary-50: #F1F4EC; /* NEW this sync */ --secondary-100: #EAF1E7; /* CHANGED: was #EAEDE5 */ --secondary-200: #969F81; /* CHANGED: was #BBBF9D (guessed from a */ /* screenshot). Now a real bound variable — */ /* the earlier QA note is resolved. */ --error-100: #D74942; /* full-strength error red */ --error-200: #FBEDEC; /* CHANGED MEANING: was #FE544C (a bright */ /* red). Now a pale error BACKGROUND tint. */ --done-100: #5AAF7C; /* NEW this sync — success state */ --done-200: #EFF7F2; /* NEW this sync — success background */ /* ----- Semantic aliases (app-level) ----------------------------------- */ --color-text: var(--text-primary); --color-bg: var(--background-page); --color-panel: var(--background-page-subtle); --color-border: var(--border-default); --color-brand: var(--primary-400); --color-brand-tint: var(--background-brand-light); /* ====================================================================== SPACING + RADIUS ====================================================================== */ --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --radius-xs: 4px; --radius-sm: 8px; --radius-xl: 99px; /* pill / circular badges */ /* ----- Elevation ------------------------------------------------------ */ --shadow-md: 0 2px 8px rgba(0, 0, 0, .12); /* Figma style "shadow/md" */ /* ====================================================================== TYPOGRAPHY ====================================================================== */ /* ----- Families ------------------------------------------------------- */ --font-zh: "Noto Sans TC", system-ui, sans-serif; /* 中文 */ --font-en: "Poppins", system-ui, sans-serif; /* English (Latin) */ --font-base: var(--font-zh); /* ----- Weights -------------------------------------------------------- */ --fw-medium: 500; --fw-bold: 700; /* ----- Size + line-height scale --------------------------------------- */ /* Named to match Figma text styles exactly. RE-SYNC 2026-07-30: the designer moved EVERY text style off ratios onto absolute px line-heights, bound to Figma vars "Line Height/20|24|26|38|44" and "spacing/32". The numbers below are those px values verbatim — do not re-express them as ratios, they are not size x ratio. Not re-verified this sync (title/36px was not bound on the text-style frame 407:817): --title-xl-*. */ --title-xl-size: 36px; --title-xl-lh: 52px; /* title/36px (price display, Medium) */ --title-lg-size: 26px; --title-lg-lh: 44px; /* title/26px/B */ --title-md-size: 22px; --title-md-lh: 38px; /* title/22px/B CHANGED: was 1.6 = 35.2px */ --title-sm-size: 20px; --title-sm-lh: 32px; /* title/20px/B CHANGED: was 1.4 = 28px */ --body-size: 16px; --body-lh: 26px; /* body/16px/M CHANGED: was 1.6 = 25.6px */ --body-b-size: 16px; --body-b-lh: 26px; /* body/16px/B CHANGED: was 1.4 = 22.4px */ --body-u-lh: 26px; /* body/16px/MUnderline CHANGED: was 1.4 */ --caption-size: 14px; --caption-lh: 24px; /* caption/14px/M */ --caption-xs-size: 11px; --caption-xs-lh: 18px; /* caption/11px/M NEW this sync */ --caption-b-lh: 24px; /* caption/14px/B CHANGED: was 1.6 = 22.4px */ --caption-mu-lh: 24px; /* caption/14px/MUnderline CHANGED: was 1.6 */ --caption-bu-lh: 24px; /* caption/14px/BUnderline CHANGED: was 1.4 */ --nav-size: 12px; --nav-lh: 20px; /* btm nav/12px/B CHANGED: was 1.4 = 16.8px */ --nav-m-lh: 20px; /* btm nav/12px/M CHANGED: was 1.6 = 19.2px */ /* After this sync several of the vars above hold identical values (--body-u-lh = --body-lh; all four caption line-heights = 24px; --nav-m-lh = --nav-lh). They are kept as separate vars because each maps 1:1 to a named Figma text style and she has already changed these twice. */ /* ====================================================================== LEGACY ALIASES — old scale names → new semantic values. Kept so prototype/css/components.css keeps working unchanged. TODO: migrate components.css to the semantic names, then delete this. ====================================================================== */ --neutral-700: var(--text-primary); /* #373939 */ --neutral-600: var(--text-secondary); /* #585A59 */ --neutral-500: var(--text-tertiary); /* #888887 */ --neutral-400: var(--border-strong); /* CHANGED #B5B7B3 -> #CFCFCF */ --neutral-300: var(--border-default); /* #ECEEED */ --neutral-200: var(--background-page-subtle); /* #F8F8F8 */ --neutral-100: var(--text-inverse); /* #FFFFFF */ --primary-300: var(--text-brand); /* #519B6E */ --primary-100: var(--background-brand-light); /* #EBF6EF */ --error-01: var(--error-100); /* #D74942 */ --error-02: var(--error-200); /* CHANGED #FE544C -> #FBEDEC */ } /* ========================================================================== Typography utility classes — one per Figma text style. Use these instead of re-declaring font properties on every element. ========================================================================== */ .t-title-xl { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--title-xl-size); line-height: var(--title-xl-lh); color: var(--color-text); } .t-title-lg { font-family: var(--font-zh); font-weight: var(--fw-bold); font-size: var(--title-lg-size); line-height: var(--title-lg-lh); color: var(--color-text); } .t-title-md { font-family: var(--font-zh); font-weight: var(--fw-bold); font-size: var(--title-md-size); line-height: var(--title-md-lh); color: var(--color-text); } .t-title-sm { font-family: var(--font-zh); font-weight: var(--fw-bold); font-size: var(--title-sm-size); line-height: var(--title-sm-lh); color: var(--color-text); } .t-body { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-text); } .t-body-b { font-family: var(--font-zh); font-weight: var(--fw-bold); font-size: var(--body-b-size); line-height: var(--body-b-lh); color: var(--color-text); } .t-caption { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--color-text); } .t-caption-xs { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--caption-xs-size); line-height: var(--caption-xs-lh); color: var(--color-text); } .t-caption-b { font-family: var(--font-zh); font-weight: var(--fw-bold); font-size: var(--caption-size); line-height: var(--caption-b-lh); color: var(--color-text); } .t-nav { font-family: var(--font-zh); font-weight: var(--fw-bold); font-size: var(--nav-size); line-height: var(--nav-lh); color: var(--color-text); } .t-nav-m { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--nav-size); line-height: var(--nav-m-lh); color: var(--color-text); } .t-nav-en { font-family: var(--font-en); font-weight: var(--fw-medium); font-size: var(--nav-size); line-height: var(--nav-m-lh); color: var(--color-text); } /* Underline modifiers. These once existed because Figma's *Underline styles carried different line-heights from their base style; as of the 2026-07-30 sync they match, so .t-body-u is now .t-body + .t-underline. Kept as separate classes because they still track separate Figma styles that could diverge. */ .t-underline { text-decoration: underline; text-underline-position: from-font; } .t-body-u { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--body-size); line-height: var(--body-u-lh); color: var(--color-text); text-decoration: underline; text-underline-position: from-font; } .t-caption-mu { font-family: var(--font-zh); font-weight: var(--fw-medium); font-size: var(--caption-size); line-height: var(--caption-mu-lh); color: var(--color-text); text-decoration: underline; text-underline-position: from-font; } .t-caption-bu { font-family: var(--font-zh); font-weight: var(--fw-bold); font-size: var(--caption-size); line-height: var(--caption-bu-lh); color: var(--color-text); text-decoration: underline; text-underline-position: from-font; }