/* ========================================================================== PaPaYa 社團通 — Design Tokens Colors, type, spacing, radii, shadows. Import this file before any UI kit or slide stylesheet. ========================================================================== */ /* ---- Webfont ------------------------------------------------------------- Noto Sans TC (Traditional Chinese) — primary face for all UI copy. Loaded from Google Fonts CDN; weights 400/500/600/700/900. Body uses 400; UI labels 500; section headings 600; display headings 700–900. -------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ---------------------------------------------------------------- COLORS */ /* Brand primaries — the papaya metaphor */ --pulp-50: #FEF3EB; /* tints / subtle hover backgrounds */ --pulp-100: #FDE4CF; --pulp-200: #FBC9A0; --pulp-300: #F8A86C; --pulp-400: #F39046; --pulp-500: #F07830; /* 果肉橘 — primary brand color */ --pulp-600: #D4611A; --pulp-700: #B14A14; --pulp-800: #843810; --pulp-900: #54240A; --peel-50: #F1F6EA; /* 外皮綠 scale */ --peel-100: #DFEBCC; --peel-200: #C2D9A2; --peel-300: #9FC273; --peel-400: #7BA94F; --peel-500: #52A955; /* 外皮綠 — secondary brand color */ --peel-600: #46702A; --peel-700: #355720; --peel-800: #253E17; --peel-900: #16260D; --seed-50: #F6F2EE; /* 種籽棕 scale — used for text + deep surfaces */ --seed-100: #E6DBD0; --seed-200: #C7B3A1; --seed-300: #A4886F; --seed-400: #76604D; --seed-500: #4D3C2C; --seed-600: #38291C; --seed-700: #2D1A0E; /* 種籽棕 — primary text color */ --seed-800: #1F1209; --seed-900: #120A05; /* Neutrals — warm, papaya-tinted greys (never pure grey) */ --paper: #FFFEFB; /* page background — a hair warmer than white */ --bone: #FAF6EF; /* card backgrounds, subtle surfaces */ --linen: #F2ECE0; /* sunken surfaces, table stripes */ --stone-100:#E8E1D2; --stone-200:#D2C8B5; --stone-300:#B0A48E; --stone-400:#8A7E69; --stone-500:#665C49; --stone-600:#4A4233; --stone-700:#332D22; /* Semantic — anchored in brand hue family where possible */ --success: var(--peel-500); --success-bg: var(--peel-50); --success-fg: var(--peel-700); --warning: #E8A53A; /* warm amber, sits between pulp + peel */ --warning-bg: #FCF1D9; --warning-fg: #8A5C0F; --danger: #C9472B; /* deeper, more cooked than pulp */ --danger-bg: #FBE4DD; --danger-fg: #7A2613; --info: #2E6FA6; /* cool counterpoint, used sparingly */ --info-bg: #DEEBF6; --info-fg: #1A4773; /* Foreground / surface aliases — use these in components */ --fg-1: var(--seed-700); /* primary text */ --fg-2: var(--seed-500); /* secondary text */ --fg-3: var(--stone-400); /* tertiary / metadata */ --fg-mute: var(--stone-300); /* placeholder, disabled */ --fg-on-brand: #FFFEFB; /* text on pulp/peel solid backgrounds */ --bg-app: var(--paper); --bg-surface:var(--bone); --bg-sunken: var(--linen); --bg-inverse:var(--seed-700); --border-1: var(--stone-100); /* default hairline */ --border-2: var(--stone-200); /* stronger separator */ --border-strong: var(--stone-300); --accent: var(--pulp-500); --accent-hover: var(--pulp-600); --accent-press: var(--pulp-700); --accent-soft: var(--pulp-50); /* Focus ring — pulp at low alpha, doubled for clarity */ --focus-ring: 0 0 0 3px rgba(240, 120, 48, 0.28); /* ---------------------------------------------------------------- TYPE */ --font-sans: "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Type scale — modular, 1.2 ratio at small sizes, looser at display */ --t-xs: 12px; --t-sm: 13px; --t-base: 15px; /* body default — Noto Sans TC reads larger than Latin sans */ --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 30px; --t-3xl: 38px; --t-4xl: 48px; --t-5xl: 64px; /* Line heights — Chinese needs more leading than Latin */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.6; --lh-relaxed: 1.75; /* Letter spacing — TC characters generally take negative tracking on display */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.08em; /* ---------------------------------------------------------------- SPACING */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ---------------------------------------------------------------- RADII */ --r-xs: 4px; /* badges, chips */ --r-sm: 6px; /* inputs, small buttons */ --r-md: 8px; /* default — buttons, cards */ --r-lg: 12px; /* dialogs, large cards */ --r-xl: 16px; /* feature panels */ --r-pill: 9999px; /* ---------------------------------------------------------------- SHADOWS */ /* Warm-tinted shadows (seed-brown with low alpha) — avoids the cold-grey drop-shadow look that cheapens B2B UIs. */ --shadow-xs: 0 1px 2px rgba(45, 26, 14, 0.06); --shadow-sm: 0 1px 2px rgba(45, 26, 14, 0.06), 0 2px 4px rgba(45, 26, 14, 0.04); --shadow-md: 0 2px 4px rgba(45, 26, 14, 0.06), 0 6px 14px rgba(45, 26, 14, 0.07); --shadow-lg: 0 4px 8px rgba(45, 26, 14, 0.06), 0 16px 32px rgba(45, 26, 14, 0.10); --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 1px 2px rgba(45, 26, 14, 0.10), 0 8px 20px rgba(45, 26, 14, 0.12); /* Inset hairline — used on raised pulp buttons for an embossed feel */ --shadow-brand-press: inset 0 2px 0 rgba(45, 26, 14, 0.18); /* ---------------------------------------------------------------- MOTION */ --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); /* default UI ease */ --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.2); /* slight overshoot */ --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --dur-page: 400ms; } /* ============================================================== SEMANTIC ELEMENTS Apply by adding the appropriate class — or extend in component CSS. ================================================================================ */ html, body { font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .h-display { font-size: var(--t-5xl); font-weight: 900; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .h1 { font-size: var(--t-4xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .h2 { font-size: var(--t-3xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .h3 { font-size: var(--t-2xl); font-weight: 600; line-height: var(--lh-snug); } .h4 { font-size: var(--t-xl); font-weight: 600; line-height: var(--lh-snug); } .h5 { font-size: var(--t-lg); font-weight: 600; line-height: var(--lh-snug); } .h6 { font-size: var(--t-md); font-weight: 600; line-height: var(--lh-snug); } .body-lg { font-size: var(--t-md); font-weight: 400; line-height: var(--lh-normal); } .body { font-size: var(--t-base);font-weight: 400; line-height: var(--lh-normal); } .body-sm { font-size: var(--t-sm); font-weight: 400; line-height: var(--lh-normal); } .caption { font-size: var(--t-xs); font-weight: 400; line-height: var(--lh-snug); color: var(--fg-3); } .label { font-size: var(--t-sm); font-weight: 500; line-height: var(--lh-snug); color: var(--fg-2); } .eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--pulp-600); } .code, code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-sunken); color: var(--seed-600); padding: 2px 6px; border-radius: var(--r-xs); border: 1px solid var(--border-1); } /* Links — pulp underline that thickens on hover, peel on visited intentionally not used (B2B). */ a { color: var(--pulp-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--pulp-700); text-decoration-thickness: 2px; } a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }