/* ============================================ Brickify Design Tokens Shared variables for all CSS files. ============================================ */ :root { /* Brand colors */ --primary: #E3670C; --primary-dark: #C85A0A; --primary-light: #FDF2E5; /* ~8% primary tint over white — checked-state bg */ --accent: #2B5EA7; --accent-dark: #234B86; --accent-light: #E8F0FE; /* Semantic colors */ --success: #27AE60; --warning: #F39C12; --error: #E74C3C; --white: #FFFFFF; /* Gray scale */ --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.03); --shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.1); /* Border radius */ --radius-sm: 6px; --radius-button: 8px; /* unified button radius — shadcn rounded-md + Apple HIG 8-12pt baseline; see docs/research/fp-pdp-button-standards.md */ --radius: 12px; --radius-lg: 16px; /* Touch target — Apple HIG / WCAG 2.5.8 最小可點面積(2026-08-18, gifts 頁首用;購買面沿用各自既有規範) */ --touch-target: 44px; /* Content width ladder — 版面容器寬度(2026-08-19 owner 核准升格, gifts 頁首用):narrow=正文/FAQ、mid=卡片群、wide=三欄網格 */ --content-narrow: 720px; --content-mid: 800px; --content-wide: 1000px; /* 品牌橘的「文字級」變體(2026-08-19 P1b):#E3670C on 白 = 3.38:1 不過 AA;<24px 的橘色「文字」一律用 --primary-text(4.5:1)。 按鈕/大標(≥24px bold)仍用 --primary。 */ --primary-text: #B85408; /* Spacing scale — 4pt grid, T-shirt sizing. Use these exclusively for paddings/margins/gaps. Law of Proximity: outer padding ≥ col gap > inner gap > inline gap. (e.g. card padding md ≥ row col gap md > name→tags gap xs > tag→tag gap xxs) */ --space-xxs: 4px; /* tag-to-tag, icon-to-text */ --space-xs: 8px; /* name → tags, related elements within a column */ --space-sm: 12px; /* row vertical padding, sub-section spacing */ --space-md: 16px; /* row horizontal padding, between columns, card padding */ --space-lg: 24px; /* between sections inside a card */ --space-xl: 32px; /* between unrelated regions */ --space-xxl: 48px; /* between stacked independent cards/modules — referenced by gifts.css since 2026-08-25 but never defined here, so it silently computed to 0px (no gap) the whole time; surfaced 2026-09-06 when the gift-guide clusters got a card background and touching-with-no-gap became visible */ /* Bottom-content-offset SoT — vertical space reserved by persistent bottom UI (sticky bars, snack bars, cookie banners). Floating UI (FAB) computes its `bottom` against this so it auto-shifts up when bottom UI appears. Never hardcode per-page; consumers set this via `body.has-X { --bottom-content-offset: ; }`. */ --bottom-content-offset: 0px; /* Typography scale — see docs/research/typography-standards.md for HIG / M3 / shadcn cross-ref */ --font-2xs: 0.625rem; /* 10px — overlay badges on tiny surfaces(72px 縮圖格)only */ --font-xs: 0.75rem; /* 12px — captions, tiny meta */ --font-sm: 0.8125rem; /* 13px — secondary text */ --font-base: 0.9375rem; /* 15px — body, list item primary */ --font-md: 1rem; /* 16px — emphasized body */ --font-lg: 1.125rem; /* 18px — section headings */ --font-h3: 1.25rem; /* 20px — small section H3 (M3 Headline Small / shadcn text-xl) */ --font-h2: 1.5rem; /* 24px — page section H2 (shadcn text-2xl) */ --font-h1: 2rem; /* 32px — product / page primary H1 (M3 Headline Large baseline) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line height (leading) scale — 業界共識 1.2 / 1.5 / 1.6 */ --leading-tight: 1.2; /* 標題,緊湊有力 */ --leading-normal: 1.5; /* body,預設可讀性 */ --leading-relaxed: 1.6; /* lead / 長段落,呼吸空間 */ /* Font family — Noto Sans TC first so CJK + Latin render from the same typeface (consistent baseline / cap-height / metrics). Inter listed as a tertiary hint; browser still uses Noto when both are loaded because Noto is primary. System fallbacks at the end for environments without web fonts. Why Noto-first (and not Inter-first): - Inter has no CJK glyphs → browser falls back to OS CJK font (PingFang TC / JhengHei / Noto CJK / etc) which ship with different metrics. Mixed-script text like "B010 代拼" then renders with two font families at two baselines, and pill tags show "text 偏上" on pages where Inter is primary. - Noto Sans TC has usable Latin glyphs AND full CJK coverage in one file, so every character renders with one set of metrics. Already loaded via the shared tag in all pages — no extra network cost. Any `body { font-family: ... }` in a page CSS file MUST use this token. Hardcoded font-family on body/root is a smell — see `frontend/CLAUDE.md` Code review smell list. */ --font-family-base: 'Noto Sans TC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Safe-area insets (iPhone notch + home indicator). Requires on the page; returns 0 otherwise. Use via var(--safe-bottom) etc. — never write env() anywhere else. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); } /* i18n FOUC cloak: while i18n.js is loading translations, hide any element whose text will be replaced — the default HTML fallback (English) would otherwise flash before being swapped to the user's locale. Class is added synchronously at i18n.js IIFE top, removed at end of the first init(). */ html.i18n-loading [data-i18n], html.i18n-loading [data-i18n-html] { visibility: hidden; }