/* ============================================================================ L1 · tokens.css — 設計變數（唯一許可定義 :root 的檔案） 專案：蔬知道 PC 端 依據：a3b74bef05904c73d48f261fcc78abb7.png 實測取樣 規則：本檔只放變數，不得含任何實際規則 ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. 色票 — 標記 [M] = 從規範稿實測、[D] = 由實測派生（對比/層級補色） --------------------------------------------------------------------- */ /* — 品牌主色（森林綠）[M] 實測分佈 #304830 ~ #405840，取中值 — */ --c-brand: #385038; --c-brand-hover: #2E4430; /* [D] 加深約 12% */ --c-brand-active: #263A28; /* [D] 加深約 20% */ --c-brand-soft: #EAEFE6; /* [D] 極淡綠，hover 底 / 選中底 */ /* — 次品牌 · 鼠尾草綠 — */ --c-sage: #B0B5A0; /* [M] 色票 2 */ /* [D→修正] 原 #6F7F5F 在米底僅 3.82:1 不合格，加深至 5.10:1 */ --c-sage-deep: #5C6B4D; --c-sage-soft: #E9EDE2; /* [D] */ /* — 沙棕（側欄選中底 / 標籤底）[M] #E1D3BF ~ #E2D4C0 — */ --c-sand: #E2D4BF; --c-sand-deep: #C9B394; /* [D] 邊框/分隔 */ --c-sand-soft: #F3EBDF; /* [D] */ /* — 米白（頁底 / 卡面）[M] 頁底 #F5F1ED、卡面 #F8F0E8、頂欄 #FDF8EE — */ --c-cream: #F5F1ED; --c-cream-2: #F8F0E8; --c-cream-3: #FDF8EE; --c-white: #FFFFFF; /* — 陶土棕（強調 / 價格 / 熱門）[M] #A57552 ~ #C1946E — */ /* [D→修正] 原 #B2825C 壓白字僅 3.37:1 不合格，加深至 5.54:1（白字）/ 4.93:1（米底）。色相不變，僅明度下修以通過 WCAG AA */ --c-clay: #8A5F3F; --c-clay-deep: #7A5537; /* [D] hover / 更強調 */ --c-clay-soft: #F6ECE3; /* [D] */ /* — 中性文字階（[D]，由森林綠系調降飽和得出）— [→修正] 原 muted #7C8478（3.43~3.87）、faint #A7ADA2（2.30）皆未達 WCAG AA 4.5:1。依實測重算，以下值在米底/卡白底/純白底皆 ≥4.6:1 */ --c-ink: #1E2B20; /* 標題 */ --c-body: #46503F; /* 內文 */ --c-muted: #666E60; /* 輔助文字 — 米底 4.70 / 白底 5.30 */ --c-faint: #6F7669; /* 占位/禁用/純裝飾 — 白底 4.70 */ /* — 邊框與分隔 — */ --c-line: #E4DFD5; --c-line-strong: #D3CBBE; --c-line-soft: #EFEAE1; /* — 語意色（狀態）— */ --c-success: #3E7A4E; --c-warning: #C08A2D; --c-danger: #B4453A; --c-info: #4A7A8C; /* — 遮罩與捲動 — */ --c-overlay: rgba(30, 43, 32, .45); --c-scrollbar: #D9D3C8; --c-scrollbar-hv: #BDB5A6; /* --------------------------------------------------------------------- 2. 字體 --------------------------------------------------------------------- */ --font-sans: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif; --font-hand: "Caveat", "Segoe Script", "KaiTi", "STKaiti", cursive; /* 字級階（1.25 比例）*/ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 25px; --fs-2xl: 31px; --fs-3xl: 39px; --fs-4xl: 49px; /* 行高 */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.6; --lh-loose: 1.8; /* 字重 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* 字距 */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.14em; /* 英文全大寫小字用 */ /* --------------------------------------------------------------------- 3. 間距（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; /* --------------------------------------------------------------------- 4. 圓角 --------------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* --------------------------------------------------------------------- 5. 陰影 — 只允許兩級（能用邊框就不用陰影） --------------------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(30, 43, 32, .04), 0 6px 18px rgba(30, 43, 32, .06); --sh-2: 0 4px 12px rgba(30, 43, 32, .08), 0 18px 44px rgba(30, 43, 32, .12); --sh-ring: 0 0 0 3px var(--c-brand-soft); /* --------------------------------------------------------------------- 6. 版面尺寸 --------------------------------------------------------------------- */ --container: 1200px; --gutter: 24px; --page-pad: 32px; --header-h: 72px; --header-h-sm: 56px; --side-w: 200px; /* 商場左側分類欄 */ --side-w-md: 180px; --community-l: 220px; /* 社區左欄 */ --community-r: 280px; /* 社區右欄 */ --tap-min: 44px; /* 觸控目標最小邊長（Apple HIG / WCAG 2.5.5） */ --tabbar-h: 56px; /* 行動底部導覽高度（不含安全區） */ /* tabbar 的實際外框高：項目高度 + 其自身上框線 1px。 頁尾在小屏隱藏後，預留量必須等於 tabbar 真實高度， 否則卡片底部會被固定 tabbar 蓋掉一條 */ --tabbar-total: calc(var(--tabbar-h) + 1px); --drawer-w: 300px; /* 行動導覽抽屜寬度 */ /* --------------------------------------------------------------------- 7. 斷點（移動優先，min-width 放大） --------------------------------------------------------------------- */ --bp-sm: 640px; --bp-md: 960px; --bp-lg: 1200px; --bp-xl: 1440px; /* --------------------------------------------------------------------- 8. 動效 --------------------------------------------------------------------- */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* --------------------------------------------------------------------- 9. 層級 --------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================================== 響應式 token 覆寫 —— 仍屬 L1，故留在 tokens.css （唯一允許覆寫 :root 的檔案） ========================================================================== */ @media (max-width: 959px) { :root { --page-pad: 20px; --header-h: 60px; --fs-4xl: 34px; --fs-3xl: 28px; --fs-2xl: 24px; --side-w: 100%; } } @media (max-width: 639px) { :root { --page-pad: 16px; --gutter: 16px; --fs-4xl: 28px; --fs-3xl: 24px; --fs-2xl: 21px; } }