/* * 新魅魔社 / newmeimo.com 前端设计系统令牌 * 视觉方向：暗夜魔法 · 魅魔社 —— 深夜紫 / 黑李背景，紫罗兰 + 品红霓虹口音，星芒白正文，克制玫瑰金点缀。 * 取色自 Logo / 吉祥物：紫发品红发梢、玫瑰金犄角、紫色星宝石（金边）、蝠翼渐变、黑李束身。 * 约定：全部使用 --mm-* 前缀，纯增量，不覆盖旧 --ri-* 变量，避免影响尚未重写的页面。 * 明/暗色复用现成的 ；不引入外部字体，使用 CJK 友好的系统字体栈。 * 明色 = 薰衣草微光（浅底 + 李墨字 + 品红口音，避免整屏平铺紫渐变）；暗色 = 深夜黑李（魅魔社主身份）。 */ :root { /* 构建标记（换肤层版本，供缓存击穿 / 回归核对）：s25 图片 SEO 属性兜底 */ --mm-build: "s29-article-link-global"; --mm-font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mm-font-display: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; --mm-font-mono: "DIN Alternate", "SF Mono", ui-monospace, "Cascadia Mono", "Roboto Mono", "JetBrains Mono", Consolas, monospace; /* 流式字号：手机 375 → 桌面 1440 */ --mm-fs-100: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem); --mm-fs-200: clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem); --mm-fs-300: clamp(0.875rem, 0.85rem + 0.18vw, 0.9375rem); --mm-fs-400: clamp(0.9375rem, 0.9rem + 0.22vw, 1rem); --mm-fs-500: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --mm-fs-600: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); --mm-fs-700: clamp(1.5rem, 1.25rem + 1.4vw, 2.25rem); --mm-fs-800: clamp(1.9rem, 1.5rem + 2.2vw, 3rem); --mm-lh-tight: 1.16; --mm-lh-snug: 1.34; --mm-lh-body: 1.68; --mm-fw-regular: 400; --mm-fw-medium: 500; --mm-fw-bold: 700; --mm-fw-black: 800; /* 间距刻度（4pt 基） */ --mm-space-1: 0.25rem; --mm-space-2: 0.5rem; --mm-space-3: 0.75rem; --mm-space-4: 1rem; --mm-space-5: 1.5rem; --mm-space-6: 2rem; --mm-space-7: 3rem; --mm-space-8: 4.5rem; --mm-radius-xs: 4px; --mm-radius-sm: 8px; --mm-radius-md: 12px; --mm-radius-lg: 18px; --mm-radius-pill: 999px; --mm-border: 1px; --mm-container: 1240px; --mm-container-narrow: 960px; --mm-z-header: 1020; --mm-z-signal: 1015; --mm-z-backtop: 1010; --mm-z-mnav: 1030; /* 粘性顶部偏移：随 WordPress 管理工具条动态调整（见 shell.css .admin-bar） */ --mm-sticky-top: 0px; --mm-header-h: 64px; --mm-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --mm-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mm-dur-1: 120ms; --mm-dur-2: 220ms; --mm-dur-3: 360ms; /* 明色（默认）：薰衣草微光浅底 + 李墨字 + 品红口音，避免整屏平铺紫 */ --mm-bg: #f4f1fa; --mm-bg-rgb: 244, 241, 250; --mm-surface: #ffffff; --mm-surface-2: #efeaf7; --mm-surface-sunken: #e8e1f3; --mm-ink: #211a2e; --mm-ink-soft: #5a5170; --mm-ink-faint: #7a7191; --mm-line: rgba(33, 26, 46, 0.12); --mm-line-strong: rgba(33, 26, 46, 0.2); /* 品红口音：深至可与白字达 WCAG AA（白字 ~5:1，作链接色于浅面 ~5.3:1） */ --mm-accent: #c1258f; --mm-accent-rgb: 193, 37, 143; --mm-accent-ink: #fff5fb; --mm-accent-soft: rgba(193, 37, 143, 0.1); /* 玫瑰金点缀（边框 / 图标 / 大标题装饰，非正文） */ --mm-gold: #bf8a34; --mm-gold-soft: rgba(191, 138, 52, 0.16); --mm-success: #0f8446; --mm-danger: #d1462f; --mm-info: #6d43b3; /* 品牌延伸令牌（供 brand.css 星宝石 / 蝠翼 / 玫瑰金 / 星芒使用；纯增量） */ --mm-violet: #8b39d4; --mm-magenta: #ff4fc3; --mm-rose-gold: #d99a72; --mm-star: #f5ecff; --mm-glow-magenta: rgba(255, 79, 195, 0.4); --mm-glow-violet: rgba(139, 57, 212, 0.32); --mm-header-bg: rgba(255, 255, 255, 0.82); --mm-header-blur: saturate(150%) blur(14px); --mm-footer-bg: #130c1f; --mm-footer-ink: #d8cfe8; --mm-footer-ink-soft: #9a8fb5; --mm-shadow-sm: 0 1px 2px rgba(29, 16, 43, 0.08), 0 2px 8px rgba(29, 16, 43, 0.06); --mm-shadow-md: 0 6px 20px rgba(29, 16, 43, 0.12); --mm-shadow-lg: 0 18px 48px rgba(29, 16, 43, 0.2); --mm-shadow-accent: 0 8px 22px rgba(var(--mm-accent-rgb), 0.32); } /* 暗色：深夜黑李 · 魅魔社主身份（Deep Night / Black Plum） */ [data-bs-theme="dark"] { --mm-bg: #0e0a16; --mm-bg-rgb: 14, 10, 22; --mm-surface: #171029; --mm-surface-2: #201636; --mm-surface-sunken: #0b0713; --mm-ink: #f3eefb; --mm-ink-soft: #bcb0d6; --mm-ink-faint: #9184ab; --mm-line: rgba(180, 150, 230, 0.14); --mm-line-strong: rgba(180, 150, 230, 0.26); /* 品红霓虹：亮而口音在暗底，白/深字均可读；发光靠 shadow 表达 */ --mm-accent: #e356b8; --mm-accent-rgb: 227, 86, 184; --mm-accent-ink: #1a0a13; --mm-accent-soft: rgba(227, 86, 184, 0.16); --mm-gold: #e3b56b; --mm-gold-soft: rgba(227, 181, 107, 0.18); --mm-success: #0f8446; --mm-danger: #ef5a48; --mm-info: #6a3fc0; --mm-violet: #a463e8; --mm-magenta: #ff5cc4; --mm-rose-gold: #e8c19c; --mm-star: #f6efff; --mm-glow-magenta: rgba(255, 92, 196, 0.45); --mm-glow-violet: rgba(164, 99, 232, 0.4); --mm-header-bg: rgba(16, 11, 26, 0.72); --mm-header-blur: saturate(160%) blur(16px); --mm-footer-bg: #0a0611; --mm-footer-ink: #cfc4e6; --mm-footer-ink-soft: #9a8fb5; --mm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --mm-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --mm-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.68); --mm-shadow-accent: 0 8px 26px rgba(var(--mm-accent-rgb), 0.42); } @media (prefers-reduced-motion: reduce) { :root { --mm-dur-1: 0ms; --mm-dur-2: 0ms; --mm-dur-3: 0ms; } }