/* ============================================================================= * Chevereto-Go · 设计令牌（Design Tokens） * ----------------------------------------------------------------------------- * 用途： * 1. 全站唯一的颜色 / 圆角 / 阴影 / 字体 / 动效时长事实源。 * 主题基线「画廊白 Gallery Light」+ 暗色「深空 Deep Space」。 * 2. 供 Tailwind 以 rgb(var(--rgb-*) / ) 语法消费——因此本文件 * 所有颜色令牌均为「R G B」空格分隔的通道值：不带 rgb() 包装、不带 alpha。 * * 消费方式（生产链路，无 Node 构建链）： * - tailwind.config.js 将令牌映射为语义工具类（bg-surface / text-foreground / * bg-primary / bg-danger-soft …），模板只允许使用语义类，禁止裸写色值。 * - standalone CLI 编译产物与本文件随 web/embed.go 一并 go:embed 进单二进制。 * - 原型（web/prototypes/*）与生产模板共用本文件，保证视觉零漂移。 * * 主题切换： * - 跟随 元素的 .dark class（darkMode: 'class'），不使用 media query； * 由服务端注入或前端脚本切换，切换脚本需在 内执行以防闪烁。 * * 无障碍基线（已按 WCAG AA 逐一校验）： * - text-primary / text-secondary 在 surface 与 background 上均 >= 4.5:1； * - text-muted 低于 AA，仅允许用于占位符（placeholder）与纯装饰文案； * - 语义色（success / warning / danger / info）只用于状态反馈，禁止用于装饰； * - 主色 #0284C7 上的白字为 4.09:1：仅用于 >= 19px 加粗的大号 CTA 文案 * （满足 WCAG 大字号 3:1 条款），小号文字禁止直接使用。 * ============================================================================= */ :root { color-scheme: light; /* -- 页面与表面（画廊白） --------------------------------------------- */ --rgb-background: 248 250 252; /* #F8FAFC 页面底色 slate-50 */ --rgb-surface: 255 255 255; /* #FFFFFF 卡片表面 */ --rgb-surface-2: 241 245 249; /* #F1F5F9 次级面板 slate-100 */ --rgb-border: 226 232 240; /* #E2E8F0 常规边框 slate-200 */ --rgb-border-strong: 203 213 225; /* #CBD5E1 悬停提升边框 slate-300 */ /* -- 文字 ---------------------------------------------------------------- */ --rgb-text-primary: 15 23 42; /* #0F172A 主文字 slate-900 (AA 14.7) */ --rgb-text-secondary: 100 116 139; /* #64748B 次文字 slate-500 (AA 4.8) */ --rgb-text-muted: 148 163 184; /* #94A3B8 占位/装饰专用 (2.6 限占位) */ /* -- 遮罩（Lightbox 等浮层背板） ----------------------------------------- */ --rgb-overlay: 15 23 42; /* #0F172A slate-900 遮罩基色 */ /* -- 品牌主色（青蓝 sky） ------------------------------------------------- */ --rgb-primary: 2 132 199; /* #0284C7 sky-600 */ --rgb-primary-hover: 3 105 161; /* #0369A1 sky-700 */ --rgb-primary-foreground: 255 255 255; /* 主色表面上的文字（限大号加粗 CTA） */ /* -- 语义色（仅状态反馈） ------------------------------------------------- */ --rgb-success: 21 128 61; /* #15803D green-700 白底 AA 4.8 */ --rgb-success-soft: 240 253 244; /* #F0FDF4 green-50 底色 */ --rgb-warning: 180 83 9; /* #B45309 amber-700 白底 AA 5.0 */ --rgb-warning-soft: 255 251 235; /* #FFFBEB amber-50 底色 */ --rgb-danger: 220 38 38; /* #DC2626 red-600 白底 AA 4.8 */ --rgb-danger-soft: 254 242 242; /* #FEF2F2 red-50 底色 */ --rgb-info: 14 165 233; /* #0EA5E9 sky-500（图标/边框用，小字慎用） */ --rgb-info-soft: 240 249 255; /* #F0F9FF sky-50 底色 */ /* -- 非颜色令牌 ------------------------------------------------------------ */ --radius-sm: 8px; /* 小控件：徽标、分段条 */ --radius-md: 10px; /* 输入框、按钮 */ --radius-lg: 12px; /* 卡片、面板 */ --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06); --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04); --shadow-lg: 0 12px 28px -6px rgb(15 23 42 / 0.16), 0 6px 12px -6px rgb(15 23 42 / 0.10); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", "Helvetica Neue", Arial, sans-serif; --transition-fast: 150ms; /* 颜色/边框等微交互统一时长 */ } /* 「深空 Deep Space」暗色主题： 下同名整套替换。 * soft 底色 = 对应语义色以约 12% 叠加于 surface 的实色近似值。 */ .dark { color-scheme: dark; --rgb-background: 8 12 18; /* #080C12 页面底色 */ --rgb-surface: 15 22 32; /* #0F1620 卡片/面板 */ --rgb-surface-2: 24 33 46; /* #18212E 次级面板 */ --rgb-border: 51 65 85; /* #334155 slate-700 */ --rgb-border-strong: 71 85 105; /* #475569 slate-600 */ --rgb-text-primary: 241 245 249; /* #F1F5F9 slate-100 (AA 16.4) */ --rgb-text-secondary: 148 163 184; /* #94A3B8 slate-400 (AA 7.1) */ --rgb-text-muted: 100 116 139; /* #64748B 占位/装饰专用 */ /* 遮罩基色：近黑深蓝（与页面底色同族） */ --rgb-overlay: 2 6 12; /* #02060C */ /* 主色提亮为 sky-400，按钮前景翻转为深色以保对比度（6.5:1） */ --rgb-primary: 56 189 248; /* #38BDF8 sky-400 */ --rgb-primary-hover: 125 211 252; /* #7DD3FC sky-300（暗色下悬停更亮） */ --rgb-primary-foreground: 8 47 73; /* #082F49 sky-950 */ --rgb-success: 74 222 128; /* #4ADE80 green-400 (AA 10.4) */ --rgb-success-soft: 22 46 44; --rgb-warning: 251 191 36; /* #FBBF24 amber-400 (AA 10.9) */ --rgb-warning-soft: 37 34 20; --rgb-danger: 248 113 113; /* #F87171 red-400 (AA 6.6) */ --rgb-danger-soft: 43 33 42; --rgb-info: 56 189 248; /* #38BDF8（暗色下与主色同族） */ --rgb-info-soft: 20 42 58; /* 暗色下阴影加深为黑，克制度不变 */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.40); --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.50); --shadow-lg: 0 12px 32px -6px rgb(0 0 0 / 0.60); }