/* ================================================================ tokens.css — design tokens for Taiwan Lounge Only place where palette, type scale, and spacing primitives live. To re-skin the site, change this file. Nothing else. ================================================================ */ :root { /* === Palette · Breathing Room (trial · adapted from concept-02) === Plum-ink + warm peach-cream + pastel apricot/sage/peach/lavender. Softer, more editorial, more pastel than the previous Pacific Pearl. The Pearl values are commented out below — if this doesn't fly, swap the blocks back. */ --ink: #2a2438; /* deep plum-ink (was #1f2230) */ --ink-soft: #5a516a; /* plum-grey (was #5a5e72) */ --pearl: #2b1d12; /* tapioca pearl, deep brown — unchanged */ --cream: #fef8f0; /* warm peach-cream page bg (was #f4f1e8) */ --cream-deep: #f5e6d4; /* warmer card border/divider (was #e8e2d4) */ --accent: #ffb38a; /* apricot — primary CTA (was dusty coral) */ --accent-deep: #e08560; /* deeper apricot — CTA hover/shadow */ --accent-2: #b9d4b5; /* soft sage — secondary (was ocean teal) */ --accent-2-deep: #7da079; /* deeper sage */ --banner-dark: #5a3e72; /* deep plum banner (was deep ocean) */ --night-1: #2a2438; /* deep plum-ink (was deep navy) */ --night-2: #3a3050; /* mid plum */ /* hero soft-pastel gradient stops, dawn → dusk */ --hero-1: #fef8f0; /* cream */ --hero-2: #ffd4b8; /* peach */ --hero-3: #ffb38a; /* apricot */ --hero-4: #b9d4b5; /* sage */ --hero-5: #5a3e72; /* plum */ --bopomofo: #ffd4b8; /* peach accent on dark bg (was warm gold) */ --glow: rgba(185,212,181,0.25); /* sage glow (was teal) */ /* Concept-02 spare pastels (use for nth-child rotation / per-section accents) */ --lavender: #d5cffb; /* lavender pastel */ --sky: #bee0f0; /* sky-blue pastel */ --rose: #ffafa8; /* rose pastel */ /* ----- Pacific Pearl (previous palette · backup, do not delete) --- --ink: #1f2230; --ink-soft: #5a5e72; --cream: #f4f1e8; --cream-deep: #e8e2d4; --accent: #d97e6a; --accent-deep: #ad5440; --accent-2: #4a9b97; --accent-2-deep: #2d6864; --banner-dark: #2a4d52; --night-1: #1c3854; --night-2: #3a4a6a; --hero-1: #fde4d0; --hero-2: #f5c4a0; --hero-3: #d97e6a; --hero-4: #4a9b97; --hero-5: #1c3854; --bopomofo: #e0b890; --glow: rgba(185,212,181,0.20); ----------------------------------------------------------------- */ /* === Typography ============================================== */ --font-display: "Fraunces", "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* Kai/楷書-style, readable for learners; covers Traditional + Simplified + JP (LXGW WenKai webfont). Falls back to Noto Serif TC where the webfont isn't loaded. Used for all vocabulary 漢字 so trad/simp render consistently. */ --font-han: "LXGW WenKai", "Noto Serif TC", "Fraunces", serif; --font-hand: "Caveat", cursive; /* === Spacing ================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 90px; --container-max: 1320px; --container-pad: 5vw; /* === Radii =================================================== */ --r-sm: 4px; --r-md: 14px; --r-lg: 24px; --r-xl: 32px; /* === Motion ================================================== */ --ease-soft: cubic-bezier(.2, .8, .2, 1); /* organic, hand-mimicking */ --ease-snap: cubic-bezier(.2, .8, .2, 1.2); --t-fast: 0.15s; --t-base: 0.3s; --t-slow: 0.7s; } /* === Japanese locale · font overrides ========================== /jp/ pages set . Inter/Fraunces lack JP glyphs, so body falls back to Noto Sans JP and display headings keep Fraunces for Latin while Noto Serif JP covers kana/kanji. Loaded per JP page head. */ html[lang="ja"] { --font-body: "Noto Sans JP", "Inter", system-ui, sans-serif; /* Display: Zen Kaku Gothic New — geometric gothic, stylish but clean. Avoids the heavy/dated feel of mincho at large hero sizes; carries Latin too. */ --font-display: "Zen Kaku Gothic New", "Fraunces", sans-serif; }