/* ================= 极影内容工厂 · 设计令牌（第①层）================= * 只放变量，不写具体组件样式。所有颜色/间距/圆角/字号/层级从这里取。 * 改这里 = 全站生效。新功能不要在别处硬编码色值和像素，一律用这里的变量。 * * 设计基调：product register（工具类 app UI）—— 克制的高级感（Linear / Raycast / Stripe）。 * · 中性色系经过调校（微冷灰），不是通用 #f4f5f7 * · 红色是「精准强调色」，只用于主操作/选中/状态，不做装饰、不发光 * · 阴影中性、克制；层次靠 1px 描边 + 柔和阴影，不靠彩色 glow * * 【强调色 accent】每个模块一个色，靠 切换（shell.js 设置）。 */ :root { /* —— 品牌固定色（不随模块变，用于充值等商业化元素）—— 红：保留极影身份，但比原来更沉一点、去霓虹感 */ --red: #f01f3c; --red-dark: #d01230; --red-soft: #fdeef0; --brand: #3b5bdb; /* 系统蓝：登录/账号等外壳级，沉稳非荧光 */ --brand-soft: #eef1fb; /* —— 强调色（默认红；被 [data-accent] 覆盖）—— */ --accent: #f01f3c; --accent-dark: #d01230; --accent-soft: #fdeef0; --accent-ring: rgba(240, 31, 60, .18); /* 焦点环，比 soft 更克制 */ /* —— 中性色（微冷灰，经过调校）—— */ --bg: #f5f6f8; /* 应用背景：内容区之外 */ --panel: #ffffff; /* 卡片/主内容面 */ --surface-2: #fafbfc; /* 次级中性层：工具栏/内嵌区 */ --sidebar: #0f1013; /* 深近黑（微冷），比原来更沉 */ --sidebar-hover: #1b1d23; --sidebar-active: #26282f; --sidebar-text: #9a9da7; --sidebar-text-strong: #f4f4f6; --border: #eceded; /* 常规描边（微冷）*/ --border-strong: #e0e1e5; /* 输入框/强描边 */ --text: #16171b; /* 正文近黑 */ --text-2: #3f424b; /* 次正文 */ --muted: #6c6f7a; /* 弱化文字：调深以满足对比度（原 #8a8a94 偏浅）*/ --placeholder: #9a9da8; /* —— 语义色（沉稳版）—— */ --success: #10893e; --success-soft: #e7f6ec; --danger: #d01230; --warning: #b7791f; --info: #3b5bdb; /* —— 圆角 —— */ --radius-xs: 7px; --radius-sm: 9px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* —— 阴影（中性、克制；无彩色 glow）—— */ --shadow-xs: 0 1px 2px rgba(16, 18, 26, .05); --shadow-sm: 0 1px 2px rgba(16, 18, 26, .06), 0 1px 1px rgba(16, 18, 26, .04); --shadow: 0 1px 2px rgba(16, 18, 26, .05), 0 4px 12px rgba(16, 18, 26, .06); --shadow-md: 0 2px 6px rgba(16, 18, 26, .06), 0 10px 24px rgba(16, 18, 26, .08); --shadow-lg: 0 8px 40px rgba(16, 18, 26, .16), 0 2px 8px rgba(16, 18, 26, .06); /* —— 间距阶梯（只用这几档）—— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* —— 字号阶梯（product：固定 rem 尺度，紧凑比例）—— */ --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; /* —— 层级 —— */ --z-sticky: 15; --z-mask: 100; --z-lightbox: 300; --z-modal: 3000; --z-authgate: 3500; --z-toast: 4000; /* —— 字体 —— */ --font: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, "Segoe UI", system-ui, sans-serif; --font-num: "Inter", "SF Pro Display", ui-monospace, system-ui, sans-serif; /* —— 缓动（ease-out，指数感；无弹跳）—— */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-out-quart: cubic-bezier(.25, 1, .5, 1); --dur-1: .12s; --dur-2: .2s; --dur-3: .32s; } /* ================= 每模块强调色 ================= */ /* shell.js 在切换模块时给 设置 data-accent，组件自动变色。 色值都调沉一档、去霓虹，配 ring 做克制焦点态。 */ [data-accent="red"] { --accent: #f01f3c; --accent-dark: #d01230; --accent-soft: #fdeef0; --accent-ring: rgba(240,31,60,.18); } [data-accent="orange"] { --accent: #e8590c; --accent-dark: #c2410c; --accent-soft: #fdf0e6; --accent-ring: rgba(232,89,12,.18); } [data-accent="purple"] { --accent: #6741d9; --accent-dark: #5528c9; --accent-soft: #f1edfc; --accent-ring: rgba(103,65,217,.18); } [data-accent="blue"] { --accent: #3b5bdb; --accent-dark: #2f49c0; --accent-soft: #eef1fb; --accent-ring: rgba(59,91,219,.18); } [data-accent="green"] { --accent: #10893e; --accent-dark: #0b7333; --accent-soft: #e7f6ec; --accent-ring: rgba(16,137,62,.18); } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; } }