/*!
* MuSi Art · Design Tokens (v11.4)
* 全局设计变量：颜色 / 字号 / 间距 / 阴影 / 圆角 / 断点
*
* 用法：
*
*
*
* 兼容性：所有变量都以 --musi-* 为前缀，避免与 Tailwind 内置变量冲突。
* 老变量（--bg-primary 等）保留作为 alias，老页面无需修改。
*
* 主色：紫 #7C3AED
* 主题：深色 (#0f172a) / 浅色 (#f8fafc) 双主题预留
* 字体：-apple-system stack, PingFang SC, Microsoft YaHei
*/
:root {
/* ===== 颜色 - 主色 ===== */
--musi-primary: #7c3aed;
--musi-primary-hover: #6d28d9;
--musi-primary-light: #a78bfa;
--musi-primary-soft: rgba(124, 58, 237, 0.15);
--musi-primary-bg: rgba(124, 58, 237, 0.08);
/* ===== 颜色 - 强调 / 信息 ===== */
--musi-secondary: #06b6d4; /* 青色 - 副色 */
--musi-secondary-soft: rgba(6, 182, 212, 0.15);
--musi-accent: #f59e0b; /* 琥珀 - 评分 / 提醒 */
--musi-accent-soft: rgba(245, 158, 11, 0.15);
/* ===== 颜色 - 语义 ===== */
--musi-success: #10b981;
--musi-success-bg: #d1fae5;
--musi-success-text: #065f46;
--musi-warning: #f59e0b;
--musi-warning-bg: #fef3c7;
--musi-warning-text: #92400e;
--musi-danger: #ef4444;
--musi-danger-hover: #dc2626;
--musi-danger-bg: #fee2e2;
--musi-danger-text: #991b1b;
--musi-info: #06b6d4;
--musi-info-bg: #cffafe;
/* ===== 颜色 - 中性(深色主题) ===== */
--musi-bg: #0f172a;
--musi-bg-deep: #0a0e27;
--musi-bg-card: #1e293b;
--musi-bg-elev: #243046; /* 浅一档 - 输入框 / 抽屉 */
--musi-bg-overlay: rgba(0, 0, 0, 0.7);
/* ===== 颜色 - 中性(浅色主题) ===== */
--musi-bg-light: #f8fafc; /* marketplace/mall */
--musi-bg-paper: #ffffff;
--musi-border: #334155;
--musi-border-light: #d1d5db;
--musi-border-purple: rgba(124, 58, 237, 0.2);
/* ===== 文字(对比度全部达 WCAG AA) ===== */
--musi-text: #f1f5f9; /* 21:1 on --musi-bg */
--musi-text-2: #cbd5e1; /* 12.5:1 提亮自 #94a3b8 */
--musi-text-muted: #94a3b8; /* 5.4:1 on --musi-bg (用于次要) */
--musi-text-dim: #64748b; /* 3.5:1 仅用于装饰 */
--musi-text-on-light: #1e293b; /* 15.8:1 on #f8fafc */
--musi-text-2-light: #374151; /* 9.7:1 on #f8fafc */
/* ===== 渐变 ===== */
--musi-gradient-primary: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
--musi-gradient-pink: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
--musi-gradient-purple-deep:linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
--musi-gradient-text: linear-gradient(90deg, #7c3aed, #06b6d4);
--musi-gradient-light: linear-gradient(135deg, #f3e8ff, #cffafe);
/* ===== 字号 ===== */
--musi-fs-xs: 11px;
--musi-fs-sm: 13px;
--musi-fs-md: 14px;
--musi-fs-lg: 16px;
--musi-fs-xl: 18px;
--musi-fs-2xl: 24px;
--musi-fs-3xl: 30px;
--musi-fs-4xl: 36px;
--musi-fw-normal: 400;
--musi-fw-medium: 500;
--musi-fw-semibold: 600;
--musi-fw-bold: 700;
--musi-fw-extra: 800;
--musi-lh-tight: 1.25;
--musi-lh-base: 1.5;
--musi-lh-loose: 1.75;
/* ===== 间距 (8 倍数) ===== */
--musi-sp-1: 4px;
--musi-sp-2: 8px;
--musi-sp-3: 12px;
--musi-sp-4: 16px;
--musi-sp-5: 20px;
--musi-sp-6: 24px;
--musi-sp-8: 32px;
--musi-sp-10: 40px;
--musi-sp-12: 48px;
--musi-sp-16: 64px;
/* ===== 圆角 ===== */
--musi-radius-sm: 6px;
--musi-radius: 8px;
--musi-radius-md: 12px;
--musi-radius-lg: 16px;
--musi-radius-xl: 24px;
--musi-radius-pill: 999px;
/* ===== 阴影 ===== */
--musi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--musi-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
--musi-shadow-md: 0 8px 24px rgba(124, 58, 237, 0.15);
--musi-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.20);
--musi-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.3);
/* ===== 字体族 ===== */
--musi-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
--musi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--musi-font-display: 'Inter', var(--musi-font-sans);
/* ===== 动画 ===== */
--musi-dur-fast: 120ms;
--musi-dur: 250ms;
--musi-dur-slow: 400ms;
--musi-ease: cubic-bezier(0.4, 0, 0.2, 1);
--musi-ease-in: cubic-bezier(0.4, 0, 1, 1);
--musi-ease-out: cubic-bezier(0, 0, 0.2, 1);
/* ===== 断点 ===== */
/* 使用 @media (min-width: 481px) { /* sm *\/ }
(min-width: 769px) { /* md *\/ }
(min-width: 1025px) { /* lg *\/ }
(min-width: 1281px) { /* xl *\/ }
(min-width: 1441px) { /* 2xl *\/ }
*/
--bp-sm: 481px;
--bp-md: 769px;
--bp-lg: 1025px;
--bp-xl: 1281px;
--bp-2xl: 1441px;
/* ===== 兼容性 alias (老页面继续可用) ===== */
--bg-primary: var(--musi-bg);
--bg-card: var(--musi-bg-card);
--bg-elev: var(--musi-bg-elev);
--accent-1: var(--musi-primary);
--accent-2: var(--musi-secondary);
--accent-3: var(--musi-success);
--accent-4: var(--musi-accent);
--text-primary: var(--musi-text);
--text-muted: var(--musi-text-2);
--critical: var(--musi-danger);
--warning: var(--musi-warning);
--info: var(--musi-info);
}
/* ===== 浅色主题页 (marketplace / mall / templates) ===== */
.theme-light, body.bg-light {
--musi-bg: #f8fafc;
--musi-bg-card: #ffffff;
--musi-bg-elev: #f1f5f9;
--musi-text: #1e293b;
--musi-text-2: #374151;
--musi-text-muted: #64748b;
--musi-border: #d1d5db;
}
/* ===== 减少动效偏好（无障碍） ===== */
@media (prefers-reduced-motion: reduce) {
:root {
--musi-dur-fast: 0ms;
--musi-dur: 0ms;
--musi-dur-slow: 0ms;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}