/* ═══════════════════════════════════════════════════════════════ 财小云 CaiXiaoYun — Design Tokens · DS v1.2「Aurora 极光」 ─────────────────────────────────────────────────────────────── ⚠ 基础色值来自 DS v1.2 权威 token；V2.1 只增加暗色岛与层级的语义别名， 不改品牌色值，供跨页组件消除硬编码并保持一致。 权威源：E:\Caixiaoyun Design System\（只读）。 规则：组件样式只许引用 var(--cxy-*)，禁止硬编码色值/间距。 ═══════════════════════════════════════════════════════════════ */ :root { /* ── 品牌色 Brand ── */ --cxy-blue: #2563EB; /* 主蓝 — 品牌识别色 / 主操作 / 强调 */ --cxy-blue-deep: #1D4ED8; /* 深蓝 — hover / 权威满版 */ --cxy-blue-700: #1E40AF; --cxy-cyan: #22D3EE; /* 青 — 极光渐变末端 */ --cxy-indigo: #4F46E5; --cxy-violet: #7C6FF0; /* 紫 — AI 高光，极克制 */ --cxy-green: #10B981; --cxy-green-deep: #0E9F6E; /* ── 渐变 Gradients（品牌签名）── */ --cxy-gradient-aurora: linear-gradient(135deg, #2563EB 0%, #22D3EE 100%); --cxy-gradient-ai: linear-gradient(120deg, #4F46E5 0%, #2563EB 48%, #22D3EE 100%); --cxy-gradient-soft: linear-gradient(160deg, #EFF4FF 0%, #E7F8F0 100%); /* ── 墨色 / 中性（冷调 slate；正文严禁纯黑）── */ --cxy-ink: #0F172A; --cxy-ink-2: #334155; --cxy-text: #475569; --cxy-muted: #64748B; --cxy-faint: #CBD5E1; --cxy-on-color: #FFFFFF; /* 色块上的文字/图形 — 永远纯白 */ --cxy-subtle: #F8FAFC; --cxy-subtle-2: #F1F5F9; --cxy-border: #E8EDF3; --cxy-border-strong:#D7DEE8; /* ── 标签底色 Tints ── */ --cxy-tint-blue-bg: #EFF4FF; --cxy-tint-blue-fg: #1D4ED8; --cxy-tint-green-bg: #E7F8F0; --cxy-tint-green-fg: #047857; --cxy-tint-cyan-bg: #E5FAFE; --cxy-tint-cyan-fg: #0B7590; --cxy-tint-amber-bg: #FFF4E5; --cxy-tint-amber-fg: #B45309; --cxy-tint-red-bg: #FEECEC; --cxy-tint-red-fg: #B91C1C; /* ── 语义别名 ── */ --cxy-action: var(--cxy-blue); --cxy-action-hover: var(--cxy-blue-deep); --cxy-positive: var(--cxy-green); --cxy-positive-ink: var(--cxy-green-deep); --cxy-negative: #E5484D; --cxy-warning: #F5A623; --cxy-surface-page: #FFFFFF; --cxy-surface-card: #FFFFFF; --cxy-surface-subtle: var(--cxy-subtle); --cxy-border-default: var(--cxy-border); --cxy-border-hairline: 1px; /* ── 字体族 ── */ --cxy-font-display: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif; --cxy-font-sans: 'Source Sans 3', 'Noto Sans SC', system-ui, sans-serif; --cxy-font-cn: 'Noto Sans SC', system-ui, sans-serif; --cxy-font-num: 'Space Grotesk', 'Source Sans 3', system-ui, sans-serif; /* ── 字重 ── */ --cxy-weight-regular: 400; --cxy-weight-medium: 500; --cxy-weight-semibold: 600; --cxy-weight-bold: 700; --cxy-weight-heavy: 900; /* 中文大标题 */ /* ── 字号阶梯（px = 渲染值）── */ --cxy-size-display: 56px; --cxy-size-h1: 40px; --cxy-size-h2: 30px; --cxy-size-h3: 22px; --cxy-size-title: 18px; --cxy-size-body: 16px; --cxy-size-sm: 14px; --cxy-size-caption: 13px; --cxy-size-xs: 12px; --cxy-size-label: 11px; --cxy-size-body-article: 17px; /* ── 行高 / 字距 ── */ --cxy-leading-tight: 1.15; --cxy-leading-snug: 1.35; --cxy-leading-body: 1.65; --cxy-tracking-display: -0.02em; --cxy-tracking-tight: -0.01em; --cxy-tracking-label: 0.16em; /* ── 间距（4px 网格）── */ --cxy-space-1: 4px; --cxy-space-2: 8px; --cxy-space-3: 12px; --cxy-space-4: 16px; --cxy-space-5: 20px; --cxy-space-6: 24px; --cxy-space-7: 32px; --cxy-space-8: 40px; --cxy-space-9: 48px; --cxy-space-10: 64px; --cxy-space-12: 96px; /* ── 圆角 ── */ --cxy-radius-xs: 6px; --cxy-radius-sm: 10px; --cxy-radius-md: 14px; --cxy-radius-lg: 18px; --cxy-radius-xl: 24px; --cxy-radius-2xl: 32px; --cxy-radius-pill: 999px; /* ── 布局 ── */ --cxy-margin-min: 24px; --cxy-container-max: 1200px; --cxy-container-article: 720px; /* 文章/知识子页阅读列（V16 回迁：wrap-article / tool-sec / cal-src） */ /* ── 高度 Elevation ── */ --cxy-elevation-0: none; --cxy-elevation-1: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.08); --cxy-elevation-2: 0 2px 4px rgba(15,23,42,0.04), 0 12px 32px -8px rgba(15,23,42,0.12); --cxy-elevation-3: 0 24px 60px -16px rgba(15,23,42,0.22); /* ── 品牌光晕 Glow ── */ --cxy-glow-blue: 0 10px 30px -8px rgba(37,99,235,0.45); --cxy-glow-aurora: 0 12px 36px -10px rgba(37,99,235,0.40); --cxy-glow-green: 0 10px 28px -8px rgba(16,185,129,0.40); /* ── 焦点环 ── */ --cxy-ring: 0 0 0 3px rgba(37,99,235,0.28); /* ── 深色岛背景（duo 墨卡 / 资质证据卡 / footer 共用）── 浅色下 = DS 墨色 #0F172A；暗色下提亮一档 = dark surface-card #131C30， 防止墨岛融入暗色页底 #0B1220（边界消失） */ --cxy-isle-bg: #0F172A; /* Fixed palette for dark islands that remain dark in both themes. */ --cxy-isle-ink: #F1F5FB; --cxy-isle-ink-2: #E2E8F4; --cxy-isle-text: #C2CCDE; --cxy-isle-muted: #93A0BC; --cxy-isle-border: #25304A; --cxy-isle-border-strong: #34415F; --cxy-isle-surface-card: #131C30; --cxy-isle-surface-subtle: #111A2E; --cxy-isle-tint-blue-bg: rgba(79,141,245,0.14); --cxy-isle-tint-blue-fg: #8FB6F8; --cxy-isle-tint-cyan-bg: rgba(34,211,238,0.16); --cxy-isle-tint-cyan-fg: #5EE9FB; --cxy-isle-tint-green-bg: rgba(52,211,153,0.16); --cxy-isle-tint-green-fg: #6EE7B7; --cxy-light-ink: #0F172A; --cxy-light-muted: #64748B; /* Semantic stacking layers for shared website chrome. */ --cxy-z-base: 0; --cxy-z-raised: 1; --cxy-z-popover: 100; --cxy-z-nav: 200; --cxy-z-dropdown: 300; --cxy-z-modal: 1200; /* 模态遮罩 + 对话框（qr-modal，须高于浮层弹码与导航） */ /* 模态遮罩底色（qr-modal-scrim；V16 回迁，暗色在 dark 块重映射） */ --cxy-scrim: rgba(15,23,42,0.50); /* ── 动效（UI 过渡 ≤320ms；环境性循环动效属另一类别，见 home.css 注释）── */ --cxy-duration-fast: 150ms; --cxy-duration-base: 240ms; --cxy-duration-slow: 320ms; --cxy-ease-standard: cubic-bezier(0.2, 0, 0, 1); --cxy-ease-out: cubic-bezier(0, 0, 0.2, 1); --cxy-ease-in: cubic-bezier(0.4, 0, 1, 1); --cxy-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── 暗色模式 Dark —— DS v1.2 colors.css / effects.css 暗色重映射照抄； 深 slate navy（非纯黑），主蓝提亮保对比 ── */ :root[data-theme="dark"] { --cxy-white: #0B1220; --cxy-subtle: #111A2E; --cxy-subtle-2: #18233C; --cxy-border: #25304A; --cxy-border-strong: #34415F; --cxy-ink: #F1F5FB; --cxy-ink-2: #E2E8F4; --cxy-text: #C2CCDE; --cxy-muted: #93A0BC; --cxy-faint: #5C6B88; --cxy-surface-page: #0B1220; --cxy-surface-card: #131C30; --cxy-surface-subtle: #111A2E; --cxy-action: #4F8DF5; --cxy-action-hover: #6BA0F7; --cxy-blue: #4F8DF5; --cxy-green: #34D399; --cxy-green-deep: #34D399; --cxy-positive: #34D399; --cxy-positive-ink: #34D399; --cxy-negative: #F0989B; --cxy-warning: #F5C66B; /* 柔和渐变暗色版：不透明暗色微渐变（axe 对比度可机器验证） */ --cxy-gradient-soft: linear-gradient(160deg, #0F1A2E 0%, #0C1825 100%); --cxy-tint-blue-bg: rgba(79,141,245,0.14); --cxy-tint-blue-fg: #8FB6F8; --cxy-tint-green-bg: rgba(52,211,153,0.14); --cxy-tint-green-fg: #6EE7B7; --cxy-tint-violet-bg: rgba(124,111,240,0.18); --cxy-tint-violet-fg: #B5AEF7; --cxy-tint-cyan-bg: rgba(34,211,238,0.16); --cxy-tint-cyan-fg: #5EE9FB; --cxy-tint-amber-bg: rgba(245,166,35,0.16); --cxy-tint-amber-fg: #F5C66B; --cxy-tint-red-bg: rgba(229,72,77,0.16); --cxy-tint-red-fg: #F0989B; --cxy-tint-gray-bg: rgba(148,163,184,0.14); --cxy-tint-gray-fg: #C2CCDE; --cxy-elevation-1: 0 1px 2px rgba(0,0,0,0.30), 0 6px 16px -6px rgba(0,0,0,0.50); --cxy-elevation-2: 0 2px 6px rgba(0,0,0,0.35), 0 16px 38px -10px rgba(0,0,0,0.60); --cxy-elevation-3: 0 28px 70px -18px rgba(0,0,0,0.70); --cxy-ring: 0 0 0 3px rgba(79,141,245,0.40); --cxy-isle-bg: #131C30; /* 暗色下深色岛提亮一档（= dark surface-card） */ --cxy-scrim: rgba(2,6,18,0.62); /* 暗色遮罩加深（V16 effects.css 口径） */ } /* 断点（CSS 变量无法用于 media query，统一口径注释）： 375 / 768 / 1280 / 1440 — 与 DS v1.2 tokens/layout.css 一致 */