/* ============================================================ tokens.base.css — 四主题共享基础契约 (Base Contract) 版本: S1-Pro v1 · 2026-04-18 依赖: 无 加载顺序: 必须最先加载，随后由 themes/theme-{N}.tokens.css 覆盖差异值 结构 (厚契约 · 一次建满): §1 主色系 (T1 Teal Stone 默认值) §2 点缀色 §3 语义色 (state) §4 品牌第三方固定色 (不随主题覆盖) §5 文本层 (扩展: on-primary/on-accent/on-dark 全家族) §6 背景层 (含 header/footer/section/hero 背景) §7 边框层 §8 Alpha 透明色 (white/black) §9 Overlay 遮罩/阴影源 §10 渐变系统 (primary/tech/dark/hero-radial/cta) §11 玻璃拟态 §12 间距 §13 字体 (family/size/weight/line/tracking) §14 圆角 §15 阴影 (scale + glow + card + focus + inset) §16 过渡动效 §17 布局/容器/Z-Index/宽高比/图标 §18 预设阴影 (R14: float/dropdown/popup/mobile-bar/card-hover) §19 ★ 跨组件语义层 (S1-Pro 新增) — Hero/Badge/Tag/Chip/Price-tag/ CTA/Alert/Card/Panel/Input 全家族 §20 响应式覆盖 §21 兼容别名层 (B2 旧命名 → 真 token 桥接) 命名约定: --color-text-* 纯文本前景 --color-text-on-* 指定背景上的前景 (primary/accent/dark/success ...) --color-bg-* 纯背景 --color-border-* 边框 --overlay-*-{N} 半透明源 (供 shadow/glass 引用) --{component}-* 跨组件语义 (hero/badge/cta/price-tag/...) ============================================================ */ :root { /* =========================================== §1 主色系 · Teal Stone (深邃墨绿) =========================================== */ --color-primary: #0d9488; --color-primary-hover: #0f766e; --color-primary-active: #115e59; --color-primary-tint: #14b8a6; --color-primary-light: #e6f7f5; --color-primary-lighter: #f0fdf9; --color-primary-dark: #134e4a; /* =========================================== §2 点缀色 · 金铜暖调 =========================================== */ --color-secondary: #57534e; --color-secondary-hover: #44403c; --color-secondary-light: #f5f5f4; --color-accent: #d97706; --color-accent-hover: #b45309; --color-accent-light: #fef3e2; --color-accent-secondary: #0891b2; --color-accent-secondary-light: #e6f7fa; /* =========================================== §3 语义色 (state) =========================================== */ --color-success: #10b981; --color-success-hover: #059669; --color-success-light: #d1fae5; --color-success-lighter: #ecfdf5; --color-success-dark: #047857; --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: #fef3c7; --color-warning-lighter: #fffbeb; --color-warning-dark: #b45309; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-danger-light: #fee2e2; --color-danger-lighter: #fef2f2; --color-danger-dark: #b91c1c; --color-info: #0891b2; --color-info-hover: #0e7490; --color-info-light: #cffafe; --color-info-lighter: #ecfeff; --color-info-dark: #155e75; --color-info-bright: #06b6d4; /* R14-C2: legacy --info 精度桥接 (cyan-500, 独立于 --color-info cyan-600) */ /* =========================================== §3a -rgb 分量补齐 (R12-4 T0-1, 2026-04-21) 目的: 为 rgba(var(--color-*-rgb), α) 语法提供基础契约的 rgb 分量。 原则: 与 §1~§3 定义的主色 hex 严格对应, 仅作上游接口补齐, 不改任何运行态生效值。 生效链: 本层给出兜底, theme-N / complete-theme-system.css 可继续覆盖。 延后: --color-purple-rgb 不在本批次, 待 purple 家族是否纳入 base 一并决定。 =========================================== */ --color-primary-rgb: 13, 148, 136; /* #0d9488 */ --color-secondary-rgb: 87, 83, 78; /* #57534e */ --color-accent-rgb: 217, 119, 6; /* #d97706 */ --color-success-rgb: 16, 185, 129; /* #10b981 */ --color-warning-rgb: 245, 158, 11; /* #f59e0b */ --color-danger-rgb: 239, 68, 68; /* #ef4444 */ --color-info-rgb: 8, 145, 178; /* #0891b2 */ /* =========================================== §3b gradient-primary 族补齐 (R12-5 T0-2, 2026-04-21) R14-K 主题化改造 (2026-04-22): 原硬编码 #0d9488/#14b8a6/#0f766e 改为 var(--color-primary*) 引用, 使 --gradient-primary 族随 theme-N.tokens.css 的 --color-primary 覆盖自动联动, 不再需要每个 theme-N 单独声明一份 gradient 副本。 目的: 为 var(--gradient-primary*) 语法提供基础契约的渐变兜底。 原则: 与 §1 主色联动; 退链 complete-theme-system.css 后由本层直接承接。 生效链: 本层 (var-based) → theme-N 覆盖 --color-primary* → 自动级联。 并存: 既有 --color-gradient-primary(-shine) 命名岛不合并, 详见 R12-5 施工单 §4 冲突豁免。 =========================================== */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-tint) 50%, var(--color-primary-hover) 100%); --gradient-primary-90: linear-gradient(90deg, var(--color-primary), var(--color-primary-tint)); --gradient-primary-120: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-hover) 50%, var(--color-primary-tint) 100%); --gradient-primary-reverse: linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-primary) 100%); --gradient-primary-vertical: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-tint) 100%); /* =========================================== §3b-ext Gradient 多色族补齐 (R14-B0-0, 2026-04-21) 目的: 为 R14-B 批次将要消费的多色 gradient-* token 提供基础契约兜底。 原则: 纯加法; 仅作上游接口补齐, 不改任何运行态生效值; 与 §3b primary 族 / §10 color-gradient-* 聚合别名并存不合并。 生效链: 本层给出兜底, theme-N.tokens.css 可再差分; aoyun.css / custom.css 消费。 分组: 品牌恒定 (brand) / Hero 3-stop / Primary soft & bg / Neutral / Semantic / Semantic bg / Accent / Overlay / Shimmer / Radial 共 10 组 35 条。 =========================================== */ /* --- §3b-ext.1 品牌渐变 (R14-O: 已从"蓝→绿恒定"改为主色→成功绿, 随主题切换) --- */ --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, #00cc88 100%); /* R14-O: was #0066ff→#00cc88 */ --gradient-brand-90: linear-gradient(90deg, var(--color-primary) 0%, #00cc88 100%); /* R14-O: was #0066ff→#00cc88 */ --gradient-brand-vertical: linear-gradient(180deg, var(--color-primary) 0%, #00cc88 100%); /* R14-O: was #0066ff→#00cc88 */ --gradient-brand-reverse: linear-gradient(135deg, var(--color-primary-hover) 0%, #00b377 100%); /* R14-O: was #0052cc→#00b377 */ /* --- §3b-ext.2 Hero 3-stop 主色渐变 (R14-O: 改随主题) --- */ --gradient-hero-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-active) 50%, var(--color-primary) 100%); /* R14-O: was #1e3a8a→#1e40af→#2563eb 深蓝三段 */ /* --- §3b-ext.3 Primary soft tint & bg 薄雾层 (主题可差分) --- */ --gradient-primary-soft: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-primary-rgb), 0.12) 100%); --gradient-primary-soft-hover: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12) 0%, rgba(var(--color-primary-rgb), 0.18) 100%); --gradient-primary-bg: linear-gradient(135deg, var(--color-primary-lightest) 0%, var(--color-primary-light) 100%); /* R14-O: was #f0f9ff→#e0f2fe 冷蓝雾 */ --gradient-primary-shimmer: linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-rgb), 0.03) 50%, transparent 100%); /* --- §3b-ext.4 中性色渐变 --- R14-Q: 原写死浅灰渐变,在深色主题下会"亮卡反白",改用 card-bg-elevated 底做轻 shade */ --gradient-neutral-soft: linear-gradient(135deg, var(--card-bg-elevated) 0%, var(--color-bg-secondary) 100%); /* R14-Q: was #f8f9fa→#f0f0f0 */ --gradient-neutral-card: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); /* R14-Q: was #f5f5f5→#e8e8e8 */ --gradient-neutral-light: linear-gradient(135deg, var(--card-bg-elevated) 0%, var(--color-bg-secondary) 100%); /* R14-Q: was #fafafa→#f8fafc */ /* --- §3b-ext.4b Dark hero 深色 hero 背景渐变 (R14-B1 补充; 与 §10 --color-gradient-dark #1c1917/#0c0a09 区别, 用于 #1a1a1a/#2d2d2d aoyun.css legacy dark-hero) --- */ --gradient-dark-hero: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); --gradient-dark-hero-vertical: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%); --gradient-dark-hero-reverse: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); --gradient-dark-hero-reverse-v: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%); /* --- §3b-ext.4c Neutral / Success 补方向变体 (R14-B1 补充) --- */ --gradient-neutral-soft-vertical: linear-gradient(180deg, var(--card-bg-elevated) 0%, var(--color-bg-secondary) 100%); /* R14-Q: was #f8f9fa→#f0f0f0 */ --gradient-success-wechat-reverse: linear-gradient(135deg, #00a854 0%, #07c160 100%); /* --- §3b-ext.4d Product/Ledger/Gallery 专用族 (R14-B2 补充) --- */ /* R14-O: all cold-blue hardcoded gradients rethemed to follow --color-primary* chain */ --gradient-brand-ink: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%); /* R14-O: was #0066FF→#0040CC */ --gradient-brand-ink-hover: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%); /* R14-O: was #2980FF→#0055FF */ --gradient-brand-soft-10: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1) 0%, rgba(0, 204, 136, 0.1) 100%); /* R14-O: was rgba(0,102,255) 蓝→绿, 蓝端改主色 rgb */ --gradient-brand-soft-20: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2) 0%, rgba(0, 204, 136, 0.2) 100%); /* R14-O: was rgba(0,102,255) 蓝→绿 */ --gradient-apple-blue: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); /* R14-O: was #007aff→#0051d5 iOS 蓝 */ --gradient-apple-blue-hover: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%); /* R14-O: was #0051d5→#003d99 */ --gradient-apple-blue-90: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); /* R14-O: was #007aff→#0051d5 90° */ --gradient-neutral-cool: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--card-bg-elevated) 100%); /* R14-Q: was #fafafa→#f5f5f5 浅灰固定 */ /* R14-S-DEPLOY: color-mix() 需 Safari 16.2+ / Chrome 111+ / Firefox 113+. 注: 自定义属性是 raw token stream, 后声明覆盖前声明 —— 同一 token 写两个值达不到 fallback 效果 (旧浏览器会 IACVT 成 initial). 所以这里 token 基础值 = 纯 card-bg-elevated (旧浏览器永远拿到这个), 文件末尾用 @supports 单独给现代浏览器升级到 color-mix 渐变. */ --gradient-neutral-warm-cream: var(--card-bg-elevated); --gradient-primary-bg-soft-sky: var(--card-bg-elevated); /* --- §3b-ext.4e News/FAQ/About/Contact 专用族 (R14-B3 补充) --- R14-Q (2026-04-22): 深色主题下 --color-primary-lightest/light 为低 α rgba, 单独作为卡背景会变透明,让文字落到"暗卡 + 透明 tint + 浅文字"的无结构层上。 改用 card-bg-elevated 做底,color-mix 叠加主色 12% 让卡在明暗两类主题都是 "可读卡面 + 主色隐隐提示"。 */ --gradient-info-bg: var(--card-bg-elevated); /* R14-S-DEPLOY · 见文件末 @supports 升级 */ --gradient-neutral-snow: linear-gradient(135deg, var(--card-bg-elevated) 0%, var(--color-bg-primary) 100%); /* R14-Q: was #f8fafc→#ffffff 固定浅灰 */ --gradient-primary-bg-mist: var(--card-bg-elevated); /* R14-S-DEPLOY · 见文件末 @supports 升级 */ --gradient-primary-theme-vertical: linear-gradient(180deg, var(--color-primary, #0d9488), var(--color-primary-hover, #0f766e)); --gradient-primary-theme-90: linear-gradient(90deg, var(--color-primary, #0d9488), var(--color-primary-hover, #0f766e)); --gradient-primary-bright-90: linear-gradient(90deg, var(--color-primary-light), var(--color-primary)); /* R14-O: was #3b82f6→#2563eb blue-500→blue-600 */ --gradient-warning-90: linear-gradient(90deg, #f59e0b, #d97706); /* --- §3b-ext.4f Legacy primary theme-aware 迁移族 (R14-B4 补充) --- */ --gradient-primary-theme: linear-gradient(135deg, var(--color-primary, #0d9488) 0%, var(--color-primary-hover, #0f766e) 100%); --gradient-radial-primary-soft-03: radial-gradient(circle, rgba(var(--color-primary-rgb, 13, 148, 136), 0.03) 0%, transparent 70%); --gradient-primary-tint-left-03: linear-gradient(90deg, rgba(var(--color-primary-rgb, 13, 148, 136), 0.03) 0%, transparent 100%); /* --- §3b-ext.4g Primary pressed/deep 族 (R14-C2 补充) --- */ --gradient-primary-deep: linear-gradient(135deg, var(--color-primary-active, #1e40af) 0%, var(--color-primary-dark, #1e3a8a) 100%); /* --- §3b-ext.5 Semantic 语义色渐变 --- */ --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-info: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%); --gradient-success-wechat: linear-gradient(135deg, #07c160 0%, #00a854 100%); /* --- §3b-ext.6 Semantic 薄雾背景 --- R14-Q (2026-04-22): 原 hex 写死浅色雾,在深色主题下(T2/T6/T8/T9/T10) 出现 "浅色卡出现在深色页面 + 文字淡灰 → 不可读" 的对比崩塌。改用 card-bg-elevated 作为底色 mix 少量 semantic 主色,让卡片随主题明暗切换,仍保持 semantic 暗示色。 */ --gradient-warning-bg: var(--card-bg-elevated); /* R14-S-DEPLOY · 见文件末 @supports 升级 */ --gradient-success-bg: var(--card-bg-elevated); /* R14-S-DEPLOY · 见文件末 @supports 升级 */ /* --- §3b-ext.7 Accent 副色渐变 --- R14-M (2026-04-22): 原为"视觉独立彩" (purple/pink/cyan 写死彩虹色), 在 theme-3 琥珀暖调下视觉割裂 (详见用户截图 "蓝不蓝紫不紫")。 改为主色 3 变调, 保持 3 档视觉差异但随 theme-N 联动: purple → primary → hover (最饱和主色段) pink → hover → active (更深沉主色段) cyan → tint → primary (最亮主色段) orange 原本是暖红渐变, 保留作为"new/warning" 装饰 semantic。 */ --gradient-accent-purple: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); --gradient-accent-pink: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%); --gradient-accent-cyan: linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-primary) 100%); --gradient-accent-orange: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%); /* --- §3b-ext.8 Overlay / Mask 遮罩 --- */ --gradient-overlay-dark: linear-gradient(135deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 100%); --gradient-scrim-bottom: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%); --gradient-banner-overlay: linear-gradient(90deg, rgba(2, 14, 35, 0.85) 0%, rgba(2, 14, 35, 0.5) 50%, rgba(2, 14, 35, 0.1) 100%); --gradient-tint-left: linear-gradient(90deg, rgba(26, 26, 26, 0.06) 0%, transparent 100%); /* --- §3b-ext.9 Shimmer 流光 --- */ --gradient-shimmer-white: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); --gradient-shimmer-brand: linear-gradient(90deg, transparent 0%, #00cc88 50%, transparent 100%); --gradient-fade-brand: linear-gradient(90deg, #00cc88 0%, transparent 100%); /* --- §3b-ext.10 Radial 径向光晕 --- */ --gradient-radial-white-08: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); --gradient-radial-white-05: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%); --gradient-radial-white-03: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%); --gradient-radial-primary-soft: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.03) 0%, transparent 70%); --gradient-radial-indigo-soft: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.02) 0%, transparent 70%); /* R14-O: was rgba(99,102,241) indigo 写死 */ /* =========================================== §3c shadow-primary 族补齐 (R12-6 T0-3, 2026-04-21) 目的: 为 var(--shadow-primary), var(--shadow-primary-lg) 语法提供基础契约兜底。 原则: 与 §1 主色 Teal Stone (#0d9488) 自洽; 复用 §3a 已补的 --color-primary-rgb; 仅作上游接口补齐, 不改任何运行态生效值。 生效链: 本层给出兜底, complete-theme-system.css 继续末端覆盖 (runtime 视觉预期不变)。 边界: 仅补齐有活跃消费证据的 2 条; --shadow-secondary / --shadow-accent 因零消费不纳入。 =========================================== */ --shadow-primary: 0 8px 24px rgba(var(--color-primary-rgb), 0.35); --shadow-primary-lg: 0 12px 32px rgba(var(--color-primary-rgb), 0.45); /* =========================================== §3d complete-theme-system.css 接口迁移 (R14-K, 2026-04-22) 背景: complete-theme-system.css 作为末端 :root 覆盖层, 历史累积了一批 既不在 tokens.base.css 也不在 theme-N.tokens.css 里定义, 但被 aoyun.css / color-override-system-v2_1.css 真实消费的 token; R14-J 先行剥离了 --color-primary* 冲突族, 本批次将剩余"仅此处 定义"的 unique token 上移至基础契约, 随后即可安全删除末端 :root。 原则: (1) 纯迁移, 默认值与 complete-theme 原值 1:1 对齐, 无视觉变化; (2) 与 base 已有 token 同名的一律不迁 (base 已胜出, 如 --color-bg-primary, --color-text-secondary, --shadow-xs/sm/md/lg/xl/2xl, --color-success* 等); (3) 跨主题固定的 slate/indigo legacy 色保留原值, 待后续 theme-N 接入时再各自差分; (4) --z-tooltip/--z-toast 按 base §17 的 700/800 为最终约定, complete-theme-system 的反向值 (700/800 互换) 属于历史矛盾, 不迁移。 消费点验证: grep var(--color-purple*/--color-bg-light/--color-bg-active/ --color-bg-selected/--color-bg-dark-secondary/--color-border-secondary/ --gradient-dark/--gradient-accent/--gradient-overlay/--shadow-base/ --shadow-text-sm/md/--shadow-purple/--color-accent-active 在 aoyun.css + color-override-system-v2_1.css 共 78 处有效消费。 =========================================== */ /* --- §3d.1 Purple 族 (R14-O: 已改跟随主题主色, theme-N 可 override 恢复 indigo) --- */ --color-purple: var(--color-primary); /* R14-O: was #6366f1 indigo-500 */ --color-purple-hover: var(--color-primary-hover); /* R14-O: was #4f46e5 indigo-600 */ --color-purple-dark: var(--color-primary-active); /* R14-O: was #4338ca indigo-700 */ --color-purple-light: var(--color-primary-light); /* R14-O: was #818cf8 indigo-400 */ --color-purple-lightest: var(--color-primary-lightest); /* R14-O: was #eef2ff indigo-50 */ --color-purple-rgb: var(--color-primary-rgb); /* R14-O: was 99, 102, 241 indigo-500 rgb */ /* --- §3d.2 Accent-active (与 base §2 --color-accent 配套的 pressed 态) --- */ --color-accent-active: #155e75; /* --- §3d.2b Text-quaternary (R14-C4 bridge 消费, slate-600) --- aoyun.css 11 处 + color-override-system-v2_1.css 10 处签注 "was #475569" 的桥接消费点, 对应 slate-600 中低饱和灰; base §5 原 stone 族未含此层级, 迁移后保持运行态不变。 */ --color-text-quaternary: #475569; /* --- §3d.3 背景扩展变体 (slate 系 legacy) --- */ --color-bg-light: #fafbfc; /* 极浅灰白, 低对比度分层 */ --color-bg-active: #e2e8f0; /* 选中/active 态灰底 */ --color-bg-selected: var(--color-primary-lightest, #eff6ff); /* R14-O: was #eff6ff legacy 冷蓝底, 改跟主题最浅主色 */ --color-bg-dark-secondary: #1e293b; /* dark hero 次级底 (slate-800) */ /* --- §3d.4 边框扩展 (slate 系 secondary) --- */ --color-border-secondary: #cbd5e1; /* --- §3d.5 Legacy dark/accent/overlay gradient (slate/amber/scrim) --- */ /* R14-R: --gradient-dark-vertical 原本硬编码 slate-900/800, 站点 footer 直接吃这个 token, 导致 11 个主题的 footer 背景永远是同一块 slate 蓝, 主题切换完全失效. 重建为 theme-aware: 走每个 theme-N 都显式定义的 --color-footer-bg / --color-bg-dark / --color-bg-darker, 这样 T10 Onyx Flame → 纯黑, T4 Lavender Haze → 紫, T6 Sunset Ember → 暖黑, T11 → 蓝灰, 等等. --gradient-dark / --gradient-dark-reverse 同步 retheme 保持一致. */ --gradient-dark: linear-gradient(135deg, var(--color-footer-bg) 0%, var(--color-bg-dark) 55%, var(--color-bg-darker) 100%); --gradient-dark-vertical: linear-gradient(180deg, var(--color-footer-bg) 0%, var(--color-bg-darker) 100%); --gradient-dark-reverse: linear-gradient(135deg, var(--color-bg-darker) 0%, var(--color-bg-dark) 55%, var(--color-footer-bg) 100%); --gradient-accent: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%); --gradient-accent-reverse: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%); --gradient-overlay: linear-gradient(120deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.75) 40%, rgba(51, 65, 85, 0.3) 100%); --gradient-overlay-vertical: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.5) 100%); --gradient-purple: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 50%, var(--color-primary-light) 100%); /* R14-O: was #6366f1→#818cf8→#a5b4fc indigo 三段, 改跟主题 */ --gradient-purple-reverse: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary-hover) 50%, var(--color-primary) 100%); /* R14-O: was #a5b4fc→#818cf8→#6366f1 反向 */ /* --- §3d.6 Legacy shadow (base/text-shadow 变体) --- */ --shadow-base: 0 4px 12px rgba(15, 23, 42, 0.1); --shadow-text-sm: 0 2px 8px rgba(15, 23, 42, 0.8), 0 4px 16px rgba(15, 23, 42, 0.9); --shadow-text-md: 0 4px 12px rgba(15, 23, 42, 0.9), 0 8px 24px rgba(15, 23, 42, 0.95); --shadow-purple: 0 8px 24px rgba(var(--color-purple-rgb), 0.4); /* --- §3d.7 Opacity tokens (不透明度通用刻度) --- */ --opacity-hover: 0.9; --opacity-disabled: 0.5; --opacity-overlay: 0.6; --opacity-muted: 0.7; /* =========================================== §4 品牌第三方固定色 (不随主题覆盖) =========================================== */ --color-brand-wechat: #07c160; --color-brand-wechat-hover: #06ae56; --overlay-brand-wechat-30: rgba(7, 193, 96, 0.3); /* =========================================== §5 文本层 (13 tokens + on-* 全家族) — 基础文本 — =========================================== */ --color-text: #1c1917; --color-text-secondary: #57534e; --color-text-muted: #a8a29e; --color-text-placeholder: #d6d3d1; --color-text-disabled: #d6d3d1; --color-text-inverse: #fafaf9; --color-text-inverse-secondary: rgba(250, 250, 249, 0.7); --color-text-inverse-muted: rgba(250, 250, 249, 0.5); --color-text-on-primary: var(--color-text-inverse); --color-text-on-primary-secondary: rgba(250, 250, 249, 0.75); --color-text-on-accent: var(--color-text-inverse); --color-text-on-success: var(--color-text-inverse); --color-text-on-danger: var(--color-text-inverse); --color-text-on-warning: #1c1917; --color-text-on-dark: var(--color-text-inverse); --color-text-on-dark-secondary: var(--color-text-inverse-secondary); --color-text-on-dark-muted: var(--color-text-inverse-muted); --color-text-link: var(--color-primary); --color-text-link-hover: var(--color-primary-hover); /* =========================================== §6 背景层 (含 header/footer/section/hero) =========================================== */ --color-bg: #fafaf9; --color-bg-primary: var(--color-bg); --color-bg-secondary: #f5f5f4; --color-bg-tertiary: #e7e5e4; --color-bg-quaternary: #d6d3d1; --color-bg-dark: #1c1917; --color-bg-darker: #0c0a09; --color-bg-darkest: #040302; --color-header-bg: var(--color-bg); --color-footer-bg: var(--color-bg-dark); --color-footer-text: var(--color-text-inverse); --color-bg-section: var(--color-bg); --color-bg-section-alt: var(--color-bg-secondary); --color-bg-overlay: rgba(28, 25, 23, 0.6); /* =========================================== §7 边框层 =========================================== */ --color-border: #e7e5e4; --color-border-light: #f5f5f4; --color-border-dark: #d6d3d1; --color-border-focus: #0d9488; --color-border-hero: rgba(250, 250, 249, 0.12); --color-border-card-hover: var(--color-primary); --color-overlay: rgba(28, 25, 23, 0.6); --color-overlay-light: rgba(28, 25, 23, 0.3); --color-border-glow: rgba(250, 250, 249, 0.08); --color-border-glow-hover: rgba(250, 250, 249, 0.15); --color-border-glow-primary: rgba(13, 148, 136, 0.3); /* =========================================== §8 Alpha 透明色 =========================================== */ --color-white-5: rgba(255, 255, 255, 0.05); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-90: rgba(255, 255, 255, 0.9); --color-black-5: rgba(0, 0, 0, 0.05); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-60: rgba(0, 0, 0, 0.6); /* =========================================== §9 Overlay 遮罩/阴影源 (R14) =========================================== */ --overlay-black-05: rgba(0, 0, 0, 0.05); --overlay-black-08: rgba(0, 0, 0, 0.08); --overlay-black-10: rgba(0, 0, 0, 0.1); --overlay-black-25: rgba(0, 0, 0, 0.25); --overlay-black-50: rgba(0, 0, 0, 0.5); --overlay-black-60: rgba(0, 0, 0, 0.6); --overlay-black-70: rgba(0, 0, 0, 0.7); --overlay-white-05: rgba(255, 255, 255, 0.05); --overlay-white-10: rgba(255, 255, 255, 0.1); --overlay-white-15: rgba(255, 255, 255, 0.15); --overlay-white-40: rgba(255, 255, 255, 0.4); --overlay-white-50: rgba(255, 255, 255, 0.5); --overlay-white-60: rgba(255, 255, 255, 0.6); --overlay-white-65: rgba(255, 255, 255, 0.65); --overlay-white-85: rgba(255, 255, 255, 0.85); --overlay-white-90: rgba(255, 255, 255, 0.9); --overlay-primary-10: rgba(13, 148, 136, 0.1); --overlay-primary-15: rgba(13, 148, 136, 0.15); --overlay-primary-20: rgba(13, 148, 136, 0.2); --overlay-primary-30: rgba(13, 148, 136, 0.3); --overlay-primary-40: rgba(13, 148, 136, 0.4); --overlay-primary-50: rgba(13, 148, 136, 0.5); --overlay-accent-10: rgba(217, 119, 6, 0.1); --overlay-accent-15: rgba(217, 119, 6, 0.15); --overlay-accent-25: rgba(217, 119, 6, 0.25); --overlay-text-06: rgba(28, 25, 23, 0.06); --overlay-text-08: rgba(28, 25, 23, 0.08); --overlay-text-10: rgba(28, 25, 23, 0.1); --border-light-80: rgba(231, 229, 228, 0.8); /* =========================================== §10 渐变系统 =========================================== */ --color-gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); --color-gradient-primary-shine: linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-primary) 40%, var(--color-primary-hover) 100%); --color-gradient-tech: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-secondary) 100%); --color-gradient-dark: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%); --color-gradient-radial: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(13, 148, 136, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 20%, rgba(217, 119, 6, 0.1) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(8, 145, 178, 0.05) 0%, transparent 50%), linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%); --color-gradient-cta: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(13, 148, 136, 0.2) 0%, transparent 50%), linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%); /* =========================================== §11 玻璃拟态 =========================================== */ --glass-bg: rgba(250, 250, 249, 0.7); --glass-bg-light: rgba(250, 250, 249, 0.85); --glass-bg-dark: rgba(28, 25, 23, 0.8); --glass-border: rgba(250, 250, 249, 0.2); --glass-border-dark: rgba(250, 250, 249, 0.08); --glass-blur: 20px; /* =========================================== §12 间距 =========================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-2-5: 0.625rem; --space-3: 0.75rem; --space-3-5: 0.875rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-9: 2.25rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; /* =========================================== §13 字体 =========================================== */ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --font-size-6xl: 3.75rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; /* =========================================== §14 圆角 · 原子尺度 =========================================== */ --radius-none: 0; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 9999px; /* =========================================== §14a 圆角 · 语义层（R13-11B · 2026-04-21） 主题可感知的圆角家族 —— 组件层绑定这些语义名， 主题文件通过覆盖本节 8 个 token 表达"主题性格"。 默认值沿用 T1 基线视觉（中软），避免对当前生产 T3 产生视觉回归。 Landing 后 aoyun.css 硬编码迁移归 R13-11C → R14 候选。 =========================================== */ --radius-card: var(--radius-xl); /* 卡片 / 面板 · 12px */ --radius-btn: var(--radius-md); /* 按钮 · 6px */ --radius-btn-lg: var(--radius-lg); /* 大按钮 · 8px */ --radius-chip: var(--radius-full); /* 徽章 / 标签 · pill */ --radius-input: var(--radius-md); /* 输入框 · 6px */ --radius-image: var(--radius-lg); /* 图片卡 · 8px */ --radius-hero: var(--radius-2xl); /* Hero / Banner · 16px */ --radius-modal: var(--radius-xl); /* 模态 / 对话 · 12px */ /* =========================================== §15 阴影 =========================================== */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-sm: 0 2px 4px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04); --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.1), 0 4px 8px rgba(28, 25, 23, 0.06); --shadow-xl: 0 24px 48px rgba(28, 25, 23, 0.14), 0 8px 16px rgba(28, 25, 23, 0.08); --shadow-2xl: 0 32px 64px rgba(28, 25, 23, 0.18); --shadow-inner: inset 0 2px 4px rgba(28, 25, 23, 0.05); --shadow-glow-primary: 0 8px 32px rgba(var(--color-primary-rgb), 0.25), 0 4px 12px rgba(var(--color-primary-rgb), 0.15); /* R14-O: was rgba(13,148,136) teal 写死, 改跟主题 */ --shadow-glow-accent: 0 8px 32px var(--overlay-accent-25), 0 4px 12px var(--overlay-accent-15); --shadow-glow-white: 0 0 20px rgba(250, 250, 249, 0.1); --shadow-card: 0 4px 16px rgba(28, 25, 23, 0.06); --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15); /* R14-O: was rgba(13,148,136) teal 写死 */ --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.15); --inset-glow: inset 0 1px 0 rgba(250, 250, 249, 0.1); --inset-glow-strong: inset 0 1px 0 rgba(250, 250, 249, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.05); /* =========================================== §16 过渡动效 =========================================== */ --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --easing-linear: linear; --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* =========================================== §17 布局/容器/Z-Index/宽高比/图标 =========================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; --header-height: 64px; --z-hide: -1; --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-header: 250; --z-sticky-header: 260; --z-fixed: 300; --z-drawer: 350; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-tooltip: 800; --aspect-square: 1 / 1; --aspect-video: 16 / 9; --aspect-card: 3 / 2; --aspect-product: 6 / 7; --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 48px; --icon-xxl: 64px; /* =========================================== §18 预设阴影 (R14) =========================================== */ --shadow-float: 0 4px 12px var(--overlay-text-10), 0 2px 4px var(--overlay-text-06); --shadow-dropdown: 0 4px 20px var(--overlay-black-10), 0 2px 6px var(--overlay-black-05); --shadow-popup: 0 25px 50px -12px var(--overlay-black-25); --shadow-mobile-bar: 0 -2px 10px var(--overlay-black-08); --shadow-card-hover: 0 4px 20px var(--overlay-primary-10); /* ============================================================ §19 ★ 跨组件语义层 (S1-Pro 新增) 原则: (1) 所有跨组件复用色都在此处定义一次，组件 CSS 只消费本层； (2) 默认值尽量 var() 指向 §1~§10 的基础层，主题切换时自动联动； (3) 需要解耦的点（T2 深色特殊处理、badge 需要 near-white 前景等） 在 theme-{N}.tokens.css 中单独覆盖； (4) 命名规则: --{component}-{slot}[-state] slot ∈ { bg, text, border, shadow, icon } state ∈ { hover, active, disabled, focus } ============================================================ */ --hero-bg: var(--color-gradient-radial); --hero-bg-solid: var(--color-bg-dark); --hero-text: var(--color-text-on-dark); --hero-text-secondary: var(--color-text-on-dark-secondary); --hero-text-muted: var(--color-text-on-dark-muted); --hero-accent-bar-bg: var(--color-primary-tint); --hero-tip-bg: var(--overlay-white-10); --hero-tip-text: var(--color-text-on-dark); --hero-tip-border: var(--overlay-white-15); --hero-badge-bg: var(--overlay-primary-20); --hero-badge-text: var(--color-text-on-dark); --hero-badge-border: var(--overlay-primary-30); --hero-trust-num-text: var(--color-text-on-dark); --hero-trust-label-text: var(--color-text-on-dark-secondary); --hero-divider: var(--color-border-hero); --badge-primary-bg: var(--color-primary); --badge-primary-text: var(--color-text-on-primary); --badge-primary-border: transparent; --badge-accent-bg: var(--color-accent); --badge-accent-text: var(--color-text-on-accent); --badge-accent-border: transparent; --badge-success-bg: var(--color-success); --badge-success-text: var(--color-text-on-success); --badge-warning-bg: var(--color-warning); --badge-warning-text: var(--color-text-on-warning); --badge-danger-bg: var(--color-danger); --badge-danger-text: var(--color-text-on-danger); --badge-neutral-bg: var(--color-bg-secondary); --badge-neutral-text: var(--color-text-secondary); --badge-neutral-border: var(--color-border); --badge-hero-bg: var(--overlay-primary-20); --badge-hero-text: var(--color-text-on-dark); --badge-hero-border: var(--overlay-primary-30); --tag-bg: var(--color-bg-secondary); --tag-text: var(--color-text-secondary); --tag-border: var(--color-border); --tag-hover-bg: var(--color-primary-light); --tag-hover-text: var(--color-primary); --tag-active-bg: var(--color-primary); --tag-active-text: var(--color-text-on-primary); --chip-bg: var(--color-bg-secondary); --chip-text: var(--color-text); --chip-border: var(--color-border); --chip-close-icon: var(--color-text-muted); --price-tag-bg: var(--color-gradient-primary); --price-tag-text: var(--color-text-on-primary); --price-tag-border: transparent; --price-tag-shadow: var(--shadow-glow-primary); --cta-primary-bg: var(--color-primary); --cta-primary-text: var(--color-text-on-primary); --cta-primary-border: transparent; --cta-primary-hover-bg: var(--color-primary-hover); --cta-primary-active-bg: var(--color-primary-active); --cta-primary-shadow: var(--shadow-glow-primary); --cta-secondary-bg: transparent; --cta-secondary-text: var(--color-primary); --cta-secondary-border: var(--color-primary); --cta-secondary-hover-bg: var(--color-primary-light); --cta-secondary-hover-text: var(--color-primary-hover); --cta-tertiary-bg: transparent; --cta-tertiary-text: var(--color-text); --cta-tertiary-hover-bg: var(--color-bg-secondary); --cta-on-dark-primary-bg: var(--color-primary); --cta-on-dark-primary-text: var(--color-text-on-primary); --cta-on-dark-secondary-bg: var(--overlay-white-10); --cta-on-dark-secondary-text: var(--color-text-on-dark); --cta-on-dark-secondary-border: var(--overlay-white-15); --cta-on-dark-secondary-hover-bg: var(--overlay-white-15); --alert-info-bg: var(--color-info-lighter); --alert-info-text: var(--color-info-dark); --alert-info-border: var(--color-info-light); --alert-info-icon: var(--color-info); --alert-success-bg: var(--color-success-lighter); --alert-success-text: var(--color-success-dark); --alert-success-border: var(--color-success-light); --alert-success-icon: var(--color-success); --alert-warning-bg: var(--color-warning-lighter); --alert-warning-text: var(--color-warning-dark); --alert-warning-border: var(--color-warning-light); --alert-warning-icon: var(--color-warning); --alert-danger-bg: var(--color-danger-lighter); --alert-danger-text: var(--color-danger-dark); --alert-danger-border: var(--color-danger-light); --alert-danger-icon: var(--color-danger); --card-bg: var(--color-bg); --card-bg-elevated: #ffffff; --card-border: var(--color-border); --card-border-hover: var(--color-primary); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-card-hover); --card-text: var(--color-text); --card-text-secondary: var(--color-text-secondary); --panel-bg: var(--color-bg-section); --panel-bg-alt: var(--color-bg-section-alt); --panel-bg-accent: var(--color-primary-lighter); --panel-border: var(--color-border); --panel-text: var(--color-text); --input-bg: var(--color-bg); --input-text: var(--color-text); --input-placeholder: var(--color-text-placeholder); --input-border: var(--color-border); --input-border-hover: var(--color-border-dark); --input-border-focus: var(--color-border-focus); --input-shadow-focus: var(--shadow-focus); --input-disabled-bg: var(--color-bg-secondary); --input-disabled-text: var(--color-text-disabled); --label-text: var(--color-text); --help-text: var(--color-text-secondary); --error-text: var(--color-danger); } /* ============================================================ §20 响应式覆盖 ============================================================ */ @media (min-width: 768px) { :root { --header-height: 72px; } } @media (min-width: 1024px) { :root { --header-height: 72px; } } /* ============================================================ §21 兼容别名层 (B2 · A 类安全桥接) 说明: - 仅建立 "旧命名 → 真命名" 的 var() 指向 - 不新增任何主题覆盖、不改变任何既有值 - 所有别名在 4 个主题下均随目标 token 联动 ============================================================ */ :root { --font-size-base: var(--font-size-md); --text-xs: var(--font-size-xs); --text-sm: var(--font-size-sm); --text-base: var(--font-size-md); --text-lg: var(--font-size-lg); --text-xl: var(--font-size-xl); --text-2xl: var(--font-size-2xl); --leading-relaxed: var(--line-height-relaxed); --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); --space-2xl: var(--space-12); --space-3xl: var(--space-16); --color-bg-card: var(--color-bg-secondary); --color-text-primary: var(--color-text); --color-text-tertiary: var(--color-text-muted); --color-muted: var(--color-text-muted); --focus-ring: var(--shadow-focus); --focus-ring-color: var(--color-border-focus); --focus-ring-width: 3px; --focus-ring-offset: 2px; --transition: var(--transition-base); --card-radius: var(--radius-xl); } /* ============================================================ R14-S-DEPLOY (2026-04-22) · color-mix() 现代浏览器升级块 ============================================================ 需求: 上面 6 个 token (warm-cream / soft-sky / info-bg / primary-bg-mist / warning-bg / success-bg) 默认值是纯 --card-bg-elevated (平底卡), 这是老浏览器 (Safari <16.2 / Chrome <111 / Firefox <113) 的 fallback; 现代浏览器在此块内用 color-mix() 升级成"卡底 + 12% semantic 色晕"的微渐变. 为什么不 inline 两次声明: 自定义属性存储的是 raw token stream, 后声明直接覆盖前声明 (不做 parse 时 feature 检测), 老浏览器在 var() use 时 IACVT → background 直接退成 initial, fallback 永远拿不到. 必须用 @supports 把升级块包起来让老浏览器整块跳过. @supports condition 用 "background: color-mix(...)" 做嗅探, 而不是直接 "(color-mix(in srgb, red, blue))" 这种非标准格式, 兼容度更稳. ============================================================ */ @supports (background: color-mix(in srgb, red, blue)) { :root { --gradient-neutral-warm-cream: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-elevated) 88%, #f59e0b 10%) 0%, var(--card-bg-elevated) 100%); --gradient-primary-bg-soft-sky: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-elevated) 88%, var(--color-primary) 12%) 0%, var(--card-bg-elevated) 100%); --gradient-info-bg: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-elevated) 88%, var(--color-primary) 12%) 0%, var(--card-bg-elevated) 100%); --gradient-primary-bg-mist: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-elevated) 88%, var(--color-primary) 12%) 0%, var(--card-bg-elevated) 100%); --gradient-warning-bg: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-elevated) 88%, #f59e0b 12%) 0%, var(--card-bg-elevated) 100%); --gradient-success-bg: linear-gradient(135deg, color-mix(in srgb, var(--card-bg-elevated) 88%, #10b981 12%) 0%, var(--card-bg-elevated) 100%); } }