/* * 声客 v2 设计 Token (shadcn/ui 风格 + 暖橙品牌叠加) * * 命名规范: ---[-] * 颜色值用 HSL 三元组 (h s% l%) — 通过 hsl(var(--xxx)) 引用，避开 var() 内联 fallback 链 * * 接入方式: * * * → 切暗色：document.documentElement.setAttribute('data-theme','dark') */ :root { /* —— 中性色 (Stone 系，类 shadcn zinc) —— */ --background: 0 0% 100%; --foreground: 24 10% 10%; --card: 0 0% 100%; --card-foreground: 24 10% 10%; --popover: 0 0% 100%; --popover-foreground: 24 10% 10%; --muted: 30 6% 96%; --muted-foreground: 25 6% 45%; --border: 20 6% 90%; --input: 20 6% 90%; --ring: 24 95% 53%; /* —— 品牌主色（声客暖橙） —— */ --brand: 24 95% 53%; --brand-foreground: 0 0% 100%; --brand-50: 33 100% 96%; --brand-100: 33 100% 91%; --brand-200: 33 100% 83%; --brand-300: 30 100% 73%; --brand-400: 27 96% 61%; --brand-500: 24 95% 53%; --brand-600: 21 90% 48%; --brand-700: 17 88% 40%; /* —— 模块辨识色 —— */ --accent-blue: 217 91% 60%; /* AI 版 */ --accent-blue-50: 217 91% 95%; --accent-blue-700: 217 91% 40%; --accent-purple: 271 81% 56%; /* 数字人 */ --accent-purple-50: 271 81% 95%; --accent-purple-700: 271 81% 40%; --accent-teal: 174 84% 38%; /* 声纹 */ --accent-teal-50: 174 84% 92%; --accent-teal-700: 174 84% 26%; --accent-amber: 38 92% 50%; /* 历史 */ --accent-amber-50: 38 92% 92%; --accent-amber-700: 38 92% 30%; /* —— 语义色 —— */ --success: 142 71% 45%; --success-foreground: 0 0% 100%; --warning: 38 92% 50%; --warning-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --info: 217 91% 60%; --info-foreground: 0 0% 100%; /* —— 圆角 —— */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.625rem; --radius-xl: 0.875rem; /* —— 阴影 —— */ --shadow-2xs: 0 1px 2px 0 hsl(24 10% 10% / 0.04); --shadow-xs: 0 1px 3px 0 hsl(24 10% 10% / 0.06); --shadow-sm: 0 1px 3px 0 hsl(24 10% 10% / 0.08), 0 1px 2px -1px hsl(24 10% 10% / 0.06); --shadow: 0 4px 6px -1px hsl(24 10% 10% / 0.08), 0 2px 4px -2px hsl(24 10% 10% / 0.04); --shadow-md: 0 8px 12px -2px hsl(24 10% 10% / 0.08), 0 4px 6px -2px hsl(24 10% 10% / 0.04); --shadow-lg: 0 12px 24px -4px hsl(24 10% 10% / 0.10), 0 8px 12px -6px hsl(24 10% 10% / 0.06); --shadow-brand: 0 8px 24px -4px hsl(24 95% 53% / 0.25); /* —— 字体 —— */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; /* —— 尺寸常量 —— */ --sidebar-width: 240px; --header-height: 64px; } /* —— 暗色模式 —— */ [data-theme="dark"] { --background: 24 10% 7%; --foreground: 30 6% 96%; --card: 24 10% 9%; --card-foreground: 30 6% 96%; --popover: 24 10% 9%; --popover-foreground: 30 6% 96%; --muted: 24 6% 14%; --muted-foreground: 25 6% 64%; --border: 24 6% 18%; --input: 24 6% 18%; --ring: 27 96% 61%; --brand: 27 96% 61%; --brand-50: 24 30% 14%; --brand-100: 24 40% 18%; --brand-700: 30 100% 73%; --accent-blue-50: 217 91% 16%; --accent-blue-700: 217 91% 75%; --accent-purple-50: 271 81% 16%; --accent-purple-700: 271 81% 75%; --accent-teal-50: 174 84% 12%; --accent-teal-700: 174 84% 70%; --accent-amber-50: 38 92% 14%; --accent-amber-700: 38 92% 70%; --shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.4); --shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.5); --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.5), 0 1px 2px -1px hsl(0 0% 0% / 0.4); --shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.5), 0 2px 4px -2px hsl(0 0% 0% / 0.3); --shadow-md: 0 8px 12px -2px hsl(0 0% 0% / 0.5), 0 4px 6px -2px hsl(0 0% 0% / 0.3); --shadow-lg: 0 12px 24px -4px hsl(0 0% 0% / 0.6), 0 8px 12px -6px hsl(0 0% 0% / 0.4); --shadow-brand: 0 8px 24px -4px hsl(24 95% 53% / 0.4); }