/* * 行之 Design Tokens * CSS Custom Properties — colors, typography, spacing, radius, shadow, glass * Source: 行之 前端 codebase (proto-app.jsx PC object + styles.css) */ /* Font Plan A — 沉静 (chosen) Display : Noto Serif SC 700/900 — 时辰 character, card titles Body : Noto Sans SC 300–700 — UI labels, body copy (web-safe CJK replacement for SF Pro) Mono : IBM Plex Mono 400/500 — distances, timestamps, metadata (warmer than JetBrains) */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* ============================================================ FONTS ============================================================ */ :root { /* Plan A: Noto Serif SC + Noto Sans SC + IBM Plex Mono SF Pro / PingFang SC remain as system fallbacks on Apple devices. */ --font-serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "STSong", serif; --font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", "PingFang SC", Menlo, monospace; --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* ============================================================ COLOR TOKENS ============================================================ */ :root { /* ── Backgrounds ── */ --bg: #F5F4EF; /* Primary background — warm off-white, washi paper */ --bg-2: #EDEBE3; /* Secondary background — inset areas, chip fills */ --bg-card: #FFFFFF; /* Card / sheet surface */ --bg-warm: #FAF9F4; /* Warm card inset (e.g., timeline bg) */ /* ── Text scale ── */ --ink: #161718; /* Display ink — largest serif text */ --text-1: #1c1c1e; /* Primary body text (iOS default) */ --text-2: #3c3c43; /* Secondary text */ --text-3: rgba(60,60,67,.6); /* Tertiary / metadata */ --text-4: rgba(60,60,67,.36);/* Placeholder / disabled */ /* ── Dividers & borders ── */ --divider: rgba(0,0,0,.06); /* Standard card border / separator */ --hairline: rgba(60,60,67,.18);/* Heavier hairline (nav bar border) */ /* ── Brand accent ── */ --accent: #4F46E5; /* Indigo primary — CTAs, active, highlights */ --accent-soft: #EEF0FE; /* Accent fill background — chip bg, label bg */ --accent-dark: #3730A3; /* Pressed / deeper accent */ /* ── Semantic colors ── */ --jade: #3D7B6B; /* Jade 玉 — L2 memory, success, positive states */ --jade-soft: #E6F2EF; /* Jade fill background */ --vermilion: #B14A3A; /* Vermilion 朱 — danger, delete, clear memory */ --vermilion-soft: #FAEEEC; /* Vermilion fill background */ --amber: #C28A2C; /* Amber 琥珀 — ratings, journey recap, L3 tier */ --amber-soft: #FBF3E0; /* Amber fill background */ --green: #22C55E; /* System green — live / active pulse dot */ /* ── Dark mode surfaces (Voice Modal) ── */ --dark-bg: #0C0C10; /* Near-black background for immersive voice modal */ --dark-surface: #1a1a1a; /* Dark card / sheet surface */ --dark-border: rgba(255,255,255,.10); /* Border on dark surfaces */ --dark-text: rgba(255,255,255,.90); /* Primary text on dark */ --dark-text-2: rgba(255,255,255,.45);/* Secondary text on dark */ /* ── Accent glow ── */ --accent-glow: rgba(79,70,229,.40); /* Indigo button shadow */ --accent-purple: #a78bfa; /* Voice modal waveform / cursor color */ } /* ============================================================ SEMANTIC / COMPONENT COLOR ALIASES ============================================================ */ :root { /* Navigation */ --nav-bg: rgba(245,244,239,.85); --nav-bg-dark: rgba(20,20,22,.85); /* Tabbar */ --tab-active: var(--ink); --tab-inactive: rgba(60,60,67,.45); /* CTA */ --btn-primary-bg: var(--ink); --btn-primary-text: #ffffff; --btn-secondary-bg: var(--bg-card); --btn-secondary-text: var(--text-2); --btn-accent-bg: var(--accent); --btn-accent-text: #ffffff; /* Toast */ --toast-bg: var(--accent); --toast-text: #ffffff; /* Plan B / Warning */ --warning-bg: #FFF6E0; --warning-text: var(--amber); } /* ============================================================ TYPOGRAPHY SCALE ============================================================ */ :root { /* Size tokens */ --text-2xs: 9.5px; /* Micro labels, timestamp tiny text */ --text-xs: 10px; /* Chip labels, rating supplemental */ --text-sm: 11px; /* Section headers (mono caps), captions */ --text-base: 12px; /* Most body copy, list sublabels */ --text-md: 13px; /* Input text, chip text, standard body */ --text-lg: 14px; /* List item titles, card body */ --text-xl: 15px; /* Large body, modal text */ --text-2xl: 17px; /* NavBar title (iOS HIG Headline) */ --text-3xl: 19px; /* User name, dialog title */ --text-4xl: 22px; /* Card serif title, modal heading */ --text-5xl: 26px; /* Recap banner title */ --text-6xl: 28px; /* Large screen heading (漫游 title) */ --text-7xl: 34px; /* Large Title (iOS HIG) */ --text-display: 52px; /* 时辰 character — home screen centrepiece */ /* Line heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Letter spacing */ --tracking-tight: -0.04em; /* Large serif display text */ --tracking-normal: -0.02em; /* NavBar titles, body headings */ --tracking-wide: 0.04em; /* CTA buttons */ --tracking-wider: 0.08em; /* Monospaced section headers */ --tracking-widest: 0.12em; /* MONO CAPS section labels */ /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 900; } /* ============================================================ SPACING SCALE (base unit = 4px) ============================================================ */ :root { --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 18px; --space-9: 20px; --space-10: 24px; --space-11: 28px; --space-12: 32px; --space-13: 36px; --space-14: 44px; --space-15: 54px; /* Status bar height */ } /* ============================================================ BORDER RADIUS SCALE ============================================================ */ :root { --radius-xs: 5px; /* Micro badge / tag */ --radius-sm: 8px; /* Time chip, map control */ --radius-md: 10px; /* Toggle, preference chip */ --radius-lg: 12px; /* Standard list item, tracking input */ --radius-xl: 14px; /* Card inner rows, plan tabs */ --radius-2xl: 16px; /* Map preview card */ --radius-3xl: 20px; /* Adjust panel, recap card */ --radius-4xl: 24px; /* Bottom sheet inner card */ --radius-sheet: 44px; /* Bottom sheet top corners */ --radius-pill: 100px; /* True pill (full-round) */ --radius-iphone: 50px; /* iPhone 15 Pro screen corners */ } /* ============================================================ SHADOW SCALE ============================================================ */ :root { --shadow-xs: 0 1px 3px rgba(0,0,0,.06); --shadow-sm: 0 2px 8px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.06); --shadow-lg: 0 8px 32px rgba(0,0,0,.10); --shadow-xl: 0 12px 40px rgba(0,0,0,.10); --shadow-2xl: 0 20px 56px rgba(0,0,0,.12); --shadow-3xl: 0 40px 80px rgba(0,0,0,.20); /* Accent shadows */ --shadow-accent: 0 4px 14px rgba(79,70,229,.40); --shadow-accent-lg: 0 8px 24px rgba(79,70,229,.35); /* iPhone frame shadow */ --shadow-iphone: 0 0 0 1px rgba(255,255,255,.08), 0 0 0 11px #1a1a1a, 0 0 0 12px #333, 0 40px 80px -20px rgba(0,0,0,.70), 0 24px 48px -16px rgba(0,0,0,.50); } /* ============================================================ GLASSMORPHISM UTILITIES ============================================================ */ :root { /* Light glass (used on warm bg) */ --glass-light-bg: rgba(255,255,255,.92); --glass-light-border: rgba(255,255,255,.60); --glass-nav-bg: rgba(245,244,239,.85); /* Dark glass (navbar dark mode) */ --glass-dark-bg: rgba(20,20,22,.85); --glass-dark-border: rgba(255,255,255,.10); /* Blur amount */ --blur-sm: blur(12px); --blur-md: blur(20px); --blur-lg: blur(24px); --blur-xl: blur(28px); --blur-glass: saturate(1.6) blur(20px); --blur-glass-heavy: saturate(1.6) blur(28px); } /* ============================================================ ANIMATIONS ============================================================ */ :root { /* Easing curves */ --ease-spring: cubic-bezier(.22,1,.36,1); --ease-page: cubic-bezier(.2,0,0,1); --ease-in-out: cubic-bezier(.4,0,.2,1); /* Durations */ --duration-fast: 200ms; --duration-normal: 350ms; --duration-slow: 450ms; } @keyframes xz-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } } @keyframes xz-breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } @keyframes xz-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } @keyframes xz-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes xz-spin { to { transform: rotate(360deg); } } @keyframes typingDot { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* ============================================================ BASE UTILITY CLASSES ============================================================ */ .xz-serif { font-family: var(--font-serif); } .xz-sans { font-family: var(--font-sans); } .xz-mono { font-family: var(--font-mono); } .xz-bg { background-color: var(--bg); } .xz-card { background-color: var(--bg-card); border: .5px solid var(--divider); border-radius: var(--radius-xl); } .xz-glass { background: var(--glass-nav-bg); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); border: .5px solid var(--hairline); } .xz-glass-card { background: var(--glass-light-bg); backdrop-filter: var(--blur-xl); -webkit-backdrop-filter: var(--blur-xl); border: .5px solid var(--divider); } .xz-pulse { animation: xz-pulse 1.6s ease-in-out infinite; } .xz-breathe { animation: xz-breathe 3s ease-in-out infinite; } .xz-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; } .xz-no-scrollbar::-webkit-scrollbar { display: none; } /* Global smooth rendering */ * { -webkit-font-smoothing: antialiased; box-sizing: border-box; }