/* ========================================= * 跨境合规通 — 亮色 / 暗色 主题变量 * 通过 切换 * 持久化由 main.js 写入 localStorage * ========================================= */ :root, [data-theme="light"] { /* 背景层级 */ --bg-page: #f4f5f9; /* 页面主背景 */ --bg-surface: #ffffff; /* 卡片 / header */ --bg-elevated: #ffffff; /* 次级面板 */ --bg-muted: #f8fafc; /* 输入框 / 骨架 */ --bg-overlay: rgba(15, 23, 42, 0.04); /* 文字层级 */ --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #64748b; --text-faint: #94a3b8; --text-inverse: #ffffff; /* 边框 / 分割线 */ --border-color: #e2e8f0; --border-strong: #cbd5e1; --border-dashed: #e2e8f0; /* 品牌色 */ --brand: #7c3aed; /* 主紫 */ --brand-hover: #6d28d9; --brand-soft: #f3e8ff; --brand-tag-bg: #faf5ff; --brand-tag-text: #6b21a8; /* 紫色渐变 (CTA banner) */ --grad-cta-start: #8b5cf6; --grad-cta-mid: #a855f7; --grad-cta-end: #ec4899; /* Hero 徽章三色 (亮色) */ --badge-green: #16a34a; --badge-green-soft: rgba(22, 163, 74, 0.18); --badge-blue: #2563eb; --badge-blue-soft: rgba(37, 99, 235, 0.18); --badge-purple: #7c3aed; --badge-purple-soft:rgba(124, 58, 237, 0.18); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.08); --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12); /* 特殊 (扇形卡片) */ --card-bg: #ffffff; --card-skel-bg: #f8fafc; --card-skel-line: #e2e8f0; /* 五卡主题色 (亮色，沿用 kapian.html) */ --theme-customs-border: #3b82f6; --theme-customs-tag: #eff6ff; --theme-customs-text: #1d4ed8; --theme-contract-border: #10b981; --theme-contract-tag: #ecfdf5; --theme-contract-text: #047857; --theme-invoice-border: #6366f1; --theme-invoice-tag: #eef2ff; --theme-invoice-text: #4338ca; --theme-proforma-border: #a855f7; --theme-proforma-tag: #faf5ff; --theme-proforma-text: #6b21a8; --theme-packing-border: #f97316; --theme-packing-tag: #fff7ed; --theme-packing-text: #c2410c; } [data-theme="dark"] { /* 背景层级 */ --bg-page: #0b1020; /* 主页面：深空蓝近黑 */ --bg-surface: #131a2e; /* 卡片 / header */ --bg-elevated: #1a2238; --bg-muted: #1e293b; --bg-overlay: rgba(255, 255, 255, 0.04); /* 文字层级 */ --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --text-inverse: #0f172a; /* 边框 / 分割线 */ --border-color: #1f2a44; --border-strong: #334155; --border-dashed: #334155; /* 品牌色（暗色下提亮） */ --brand: #a78bfa; --brand-hover: #c4b5fd; --brand-soft: #2e1f54; --brand-tag-bg: #2a1c4a; --brand-tag-text: #d8b4fe; /* 紫色渐变 (暗色：更亮的紫粉) */ --grad-cta-start: #a78bfa; --grad-cta-mid: #c084fc; --grad-cta-end: #f472b6; /* Hero 徽章三色 (暗色：提亮) */ --badge-green: #4ade80; --badge-green-soft: rgba(74, 222, 128, 0.22); --badge-blue: #60a5fa; --badge-blue-soft: rgba(96, 165, 250, 0.22); --badge-purple: #a78bfa; --badge-purple-soft:rgba(167, 139, 250, 0.22); /* 阴影（暗色更深、更柔） */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6); /* 特殊 (扇形卡片) */ --card-bg: #161e33; --card-skel-bg: #1e2740; --card-skel-line: #2a3553; /* 五卡主题色 (暗色：提亮 tag 背景) */ --theme-customs-border: #60a5fa; --theme-customs-tag: #1e3a5f; --theme-customs-text: #93c5fd; --theme-contract-border: #34d399; --theme-contract-tag: #0f3d2e; --theme-contract-text: #6ee7b7; --theme-invoice-border: #818cf8; --theme-invoice-tag: #1e1b4b; --theme-invoice-text: #a5b4fc; --theme-proforma-border: #c084fc; --theme-proforma-tag: #3b1d6b; --theme-proforma-text: #d8b4fe; --theme-packing-border: #fb923c; --theme-packing-tag: #4a2410; --theme-packing-text: #fdba74; }