@tailwind base; @tailwind components; @tailwind utilities; /* === §6.0 设计语言 CSS variables === * 暗色为默认(html.dark) / 亮色用 :root 反转 * HSL 形式以兼容 Tailwind alpha-value 语法 */ :root { /* 亮色(可切换) */ --base: 0 0% 98%; /* #FAFAFA */ --surface: 0 0% 100%; /* #FFFFFF */ --elevated: 240 5% 96%; /* #F4F4F5 */ --border: 240 6% 90%; /* #E4E4E7 */ --fg-primary: 240 6% 10%; /* #18181B */ --fg-secondary: 240 4% 35%;/* #52525B */ --fg-muted: 240 5% 65%; /* #A1A1AA */ --accent: 217 91% 60%; /* #3B82F6 电光蓝 */ --bull: 4 87% 60%; /* #F04438 红涨 */ --bear: 152 67% 45%; /* #12B76A 绿跌 */ --warning: 32 95% 50%; /* #F79009 */ --danger: 4 87% 60%; /* #F04438 */ } html.dark { --base: 240 5% 5%; /* #0A0A0B */ --surface: 240 7% 10%; /* #18181B 略亮一点,与 base 对比清晰 */ --elevated: 240 9% 14%; /* #212126 */ --border: 240 5% 22%; /* #353539 边框加亮,易识别 */ --fg-primary: 0 0% 98%; /* #FAFAFA */ --fg-secondary: 240 5% 78%;/* #C4C4CB 大幅提亮 — 子标题/导航非激活态 */ --fg-muted: 240 5% 58%; /* #8E8E96 muted 提亮 — 辅助提示 */ --accent: 217 91% 60%; --bull: 4 87% 60%; --bear: 152 67% 45%; --warning: 32 95% 50%; --danger: 4 87% 60%; } /* 价格 / 数字一律等宽 */ .scrollbar-gutter-stable { scrollbar-gutter: stable; } /* 全局滚动条 */ * { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: hsl(var(--border) / 0.72); border: 2px solid transparent; border-radius: 999px; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: hsl(var(--accent) / 0.75); background-clip: content-box; } .tabular { font-variant-numeric: tabular-nums; } .num { font-family: theme('fontFamily.mono'); font-variant-numeric: tabular-nums; } /* 默认 1px 细分隔线(暗色用边框区分层次,不用 shadow) */ * { border-color: hsl(var(--border)); } body { background: hsl(var(--base)); color: hsl(var(--fg-primary)); font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* 暗色模式不用 antialiased — 让字形保持饱满,不发虚 */ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; }