/* ======================================================================== Product Match Agent Design Tokens · ChatGPT 风 来源：复用 uaip-portal / chatgpt.com 实测（2026-05） 用法：在任何 HTML 的 里 ======================================================================== */ :root { /* === 颜色（亮色） === */ --bg: #ffffff; --surface: #f9f9f9; --surface-2: rgba(233,233,233,0.5); --surface-hover: rgba(0,0,0,0.07); --border: rgba(13,13,13,0.05); --border-input: rgba(13,13,13,0.1); --border-hover: rgba(13,13,13,0.15); --fg: #0d0d0d; --fg-secondary: #5d5d5d; --muted: #8f8f8f; --primary: #000000; --primary-hover: rgba(13,13,13,0.8); --accent: #0285ff; --accent-hover: #cce6ff; --accent-press: #99ceff; --link: #5d5d5d; --danger: #ef4444; --success: #10a37f; /* === 字体 === */ --font-sans: -apple-system, ui-sans-serif, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji"; --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --leading-normal: 1.5; --leading-tight: 1.3; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* === 间距（4px 步进） === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* === 圆角 === */ --radius-sm: 6px; --radius-lg: 8px; --radius-nav: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-input: 28px; /* pill 输入框 */ --radius-full: 9999px; /* 胶囊按钮 */ /* === 阴影 === */ --shadow-input: 0 3px 6px rgba(0,0,0,0.04), 0 4px 80px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.62); --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04); --shadow-dropdown: 0 12px 32px rgba(0,0,0,0.12); /* === 布局 === */ --sidebar-width: 260px; --topbar-height: 56px; /* === 项目 / 产品分类专用：彩色 dot === */ --proj-color-1: #0285ff; /* blue */ --proj-color-2: #10a37f; /* green */ --proj-color-3: #f59e0b; /* amber */ --proj-color-4: #8b5cf6; /* purple */ --proj-color-5: #e11d48; /* rose */ --proj-color-6: #64748b; /* slate */ } /* === 暗色模式 === */ .dark { --bg: #212121; --surface: #000000; --surface-2: rgba(50,50,50,0.85); --surface-hover: rgba(255,255,255,0.15); --border: rgba(255,255,255,0.1); --border-input: rgba(255,255,255,0.15); --border-hover: rgba(255,255,255,0.2); --fg: #ffffff; --fg-secondary: #f3f3f3; --muted: #afafaf; --primary: #ffffff; --primary-hover: rgba(255,255,255,0.85); --accent: #99ceff; --link: #afafaf; --shadow-input: 0 3px 6px rgba(0,0,0,0.06), inset 0 0 1px rgba(255,255,255,0.2); --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06); --shadow-dropdown: 0 12px 32px rgba(0,0,0,0.4); }