/* ============================================================ MiniZone Design System — Design Tokens (Layer 1) ------------------------------------------------------------ 唯一的取值来源：颜色 / 字号 / 圆角 / 间距 / 玻璃 / 动效。 组件层禁止散落十六进制。所有旧变量名保持有效（向下兼容）。 视觉方向：iOS 26 App Store 的轻盈、内容优先 + MiniZone 品牌蓝点缀。 ============================================================ */ :root { color-scheme: light; /* —— 基础色板 —— 文字三档改用主墨色的透明度层级：在白卡上观感与旧定值几乎一致， 在樱粉/晴空青等待色页面上会自然带一点页面底色，整体更统一。 */ --ink-rgb: 20 24 35; /* 主墨色 RGB（供透明度层级派生） */ --bg: #f2f4f7; /* 页面底：中性浅灰，极轻冷调 */ --surface: #f7f8fa; /* 次级表面 */ --surface-strong: #ffffff; /* 卡片 */ --ink: rgb(var(--ink-rgb) / .92); /* 主文字 */ --muted: rgb(var(--ink-rgb) / .64); /* 次级文字 */ --faint: rgb(var(--ink-rgb) / .46); /* 三级文字 */ --line: rgba(24, 32, 48, .08); /* —— 品牌与功能色（只作 Accent，不大面积铺） —— */ --blue: #2368f5; --blue-deep: #1750c8; --cyan: #52d6ef; --violet: #7758f4; --peach: #ff9c78; --mint: #2fbf9a; --danger: #ff3b30; --danger-soft: rgba(255, 59, 48, .09); /* 警示 hover/选中柔和底（举报等） */ --peach-soft: rgba(255, 156, 120, .14); /* 待回复等柔和底（消息页反馈徽标） */ --mint-soft: rgba(47, 191, 154, .13); /* 已解决等柔和底 */ --report-btn-bg: rgba(127, 140, 158, .1); /* 举报胶囊默认：浅灰半透明 */ --report-btn-border: 1px solid rgba(127, 140, 158, .14); /* —— 语义角色 —— */ --text-primary: var(--ink); --text-secondary: var(--muted); --text-tertiary: var(--faint); --text-disabled: rgb(var(--ink-rgb) / .32); --text-on-accent: #ffffff; --bg-page: var(--bg); --bg-card: var(--surface-strong); --bg-card-soft: var(--surface); --border: var(--line); --accent: var(--blue); --accent-deep: var(--blue-deep); --accent-soft: rgba(35, 104, 245, .09); --success: var(--mint); --error: var(--danger); --warning: var(--peach); /* —— 字体：三层策略 —— 标题强化 + 正文保留系统字体：品牌标题与 UI 控制优先 MiSans（更现代的中文黑体， 数字与标点更利落），回退苹方/鸿蒙/系统；正文（帖子、评论、长文本）保持系统栈， 阅读优先。MiSans 未随 Web Font 分发，仅在已安装该字体的设备（小米/Redmi 等）真实 生效，其余平台经回退链取苹方/鸿蒙/系统字形，不产生加载与闪烁。 */ --font-brand: "MiSans", "PingFang SC", "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-ui: "MiSans", "PingFang SC", "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", Roboto, "Noto Sans SC", sans-serif; --font: var(--font-body); /* 兼容旧引用：全站默认 = 正文字体 */ --fs-large-title: 28px; /* Large Title / 展示标题 */ --fs-title-page: 22px; /* Title */ --fs-title-section: 18px; /* Headline / 分区标题 */ --fs-card-title: 16px; /* 卡片标题 */ --fs-body: 15px; /* Body */ --fs-body-small: 13px; /* Secondary / 辅助信息 */ --fs-meta: 12px; /* Caption */ --fs-nav: 10.5px; /* Tab 标签 */ --fs-hero: 31px; /* 兼容旧引用 */ /* 字重整体降半档：标题不再过重，正文保持轻。中间档（650/550/450）在可变字体 （MiSans VF 等）上呈现真实字重；静态字体设备按 CSS 规则就近映射到 700/600/400， 任何平台都不会比旧值（800/700/600/450）更重。 */ --fw-heavy: 700; --fw-black: 700; /* 展示标题（原 800，兼容旧引用） */ --fw-bold: 650; /* 页面/分区/弹层标题（原 700） */ --fw-semibold: 600; /* 卡片标题 / 用户名 / 次级强调 */ --fw-medium: 550; /* 按钮 / 导航 / 标签控制文字 */ --fw-regular: 450; /* 正文 / 辅助信息 */ --lh-body: 1.65; /* 大标题负字距收窄：中文大标题从 -.028/-.038em 的拥挤感回到精致但透气 */ --ls-tight: -.015em; --ls-tighter: -.02em; /* —— 间距（4dp 基础 + 语义令牌：页面/卡片/按钮统一取值） —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --page-h: 20px; /* 页面左右基础边距 */ --page-top: 16px; /* 页面顶部内容间距（+ safe-top） */ --card-pad: 16px; /* 普通卡片内边距 */ --card-pad-sm: 12px; /* 紧凑卡片内边距 */ --card-pad-lg: 20px; /* 大型卡片内边距 */ --btn-px: 20px; /* 按钮横向内边距 */ --btn-py: 12px; /* 按钮纵向内边距 */ --sec-gap: 32px; /* 分区垂直间距 */ --subpage-pad-b: 28px; /* 子页面底部留白（Dock 隐藏时） */ --touch: 48px; /* —— 圆角：连续、柔和、分层 —— */ --r-sm: 12px; /* 小图 / chip */ --r-md: 16px; /* 按钮 / 输入框 */ --r-lg: 20px; /* 内容卡片 */ --r-xl: 24px; /* 大型卡片 */ --r-2xl: 28px; /* Sheet 顶角 / 悬浮控件 */ --r-dock: 999px; /* Bottom Nav：胶囊 */ --r-pill: 999px; /* —— 玻璃三层（仅控制层：导航/顶栏/FAB/搜索/弹层） —— */ /* tier-1 导航级：Dock、迷你顶栏 */ --glass-bg: linear-gradient(180deg, rgba(255,255,255,.74), rgba(250,251,253,.58)); --glass-border: 1px solid rgba(255, 255, 255, .65); --glass-shadow: 0 14px 38px rgba(18, 26, 40, .13), 0 2px 8px rgba(18, 26, 40, .05), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -.5px 0 rgba(30, 50, 90, .05); --glass-blur: blur(28px) saturate(1.65); /* tier-2 悬浮级：FAB、圆形按钮 */ --glass-float-bg: linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,253,.66)); --glass-float-shadow: 0 16px 40px rgba(18, 26, 40, .16), 0 3px 10px rgba(18, 26, 40, .07), inset 0 1px 0 rgba(255, 255, 255, .9); /* tier-3 表面级：Sheet、横幅（更实，保证可读性） */ --glass-surface-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,253,.88)); --glass-surface-shadow: 0 24px 60px rgba(18, 26, 40, .2), inset 0 1px 0 rgba(255, 255, 255, .9); /* 选中态玻璃 */ --glass-selected-bg: linear-gradient(180deg, rgba(255,255,255,.9), rgba(35, 104, 245, .1)); --glass-selected-border: 1px solid rgba(255, 255, 255, .9); --banner-bg: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,253,.9)); /* —— 阴影（实色内容卡用，柔和弥散，不重） —— */ --shadow-card: 0 10px 28px rgba(18, 26, 40, .06), 0 1px 3px rgba(18, 26, 40, .04); --shadow-card-hover: 0 16px 40px rgba(18, 26, 40, .1), 0 2px 6px rgba(18, 26, 40, .05); --shadow-soft: 0 6px 18px rgba(18, 26, 40, .05); /* —— 表白墙主题（页面级令牌）：浅樱粉 / 蜜桃粉 / 淡紫 —— */ --wall-bg: #fdf4f5; /* 页面底：极浅樱粉 */ --wall-grad-a: #fbdce4; /* 渐变：樱粉 */ --wall-grad-b: #fde9dd; /* 渐变：蜜桃粉 */ --wall-grad-c: #eadff9; /* 渐变：淡紫 */ --wall-wave-1: rgba(246, 173, 193, .5); /* 波层：樱粉（最前） */ --wall-wave-2: rgba(250, 205, 182, .46); /* 波层：蜜桃粉 */ --wall-wave-3: rgba(196, 173, 233, .38); /* 波层：淡紫（最后） */ --wall-card: #fffdfb; /* 内容卡：乳白实色 */ --wall-ink: #6d3a4d; /* 主文字：深玫瑰灰 */ --wall-ink-2: #96687a; /* 次级文字 */ --wall-faint: #b78fa0; /* 三级（时间/计数） */ --wall-rose: #e05a85; /* 互动选中：玫瑰粉 */ --wall-rose-deep: #c2426b; /* 玫瑰粉深（选中文字） */ --wall-rose-soft: rgba(224, 90, 133, .11); /* 选中柔和底 */ --wall-track: rgba(109, 58, 77, .16); /* 匿名开关关闭态轨道 */ /* —— 人物志主题（页面级令牌）：晴空青 / 雾紫 / 暖杏 —— */ --pp-bg: #f0f4f8; /* 页面底：极浅青灰 */ --pp-grad-a: #d3e9f6; /* 渐变：晴空青 */ --pp-grad-b: #e2ddf8; /* 渐变：雾紫 */ --pp-grad-c: #fcefe1; /* 渐变：暖杏 */ --pp-card: rgba(255, 255, 255, .62); /* 轻玻璃卡（排行榜行/事迹卡） */ --pp-card-strong: rgba(255, 255, 255, .78); /* 较实玻璃卡（舞台/资料区） */ --pp-ink: #1d2835; /* 主文字：深青墨 */ --pp-ink-2: #556377; /* 次级文字 */ --pp-faint: #8b97a9; /* 三级（时间/计数） */ --pp-accent: #1e9ccf; /* 互动主色：晴空青 */ --pp-accent-deep: #12709e; /* 主色深（渐变端/选中文字） */ --pp-accent-soft: rgba(30, 156, 207, .12); /* 主色柔和底 */ --pp-gold: #e2a43e; /* 名次：金 */ --pp-silver: #93a7bc; /* 名次：银 */ --pp-bronze: #c48f63; /* 名次：铜 */ --pp-danger-soft: rgba(255, 59, 48, .1); /* 举报柔和底 */ /* 按钮玻璃：浅色保持既有观感（悬浮胶囊沿用全局玻璃，次级按钮透明底） */ --pp-fab-bg: var(--glass-float-bg); --pp-fab-border: var(--glass-border); --pp-fab-ink: var(--pp-accent-deep); --pp-ctrl-bg: none; --pp-ctrl-border: 1px solid transparent; --pp-ctrl-inset: none; --pp-ctrl-bg-active: rgba(24, 32, 48, .07); /* —— 布局 —— */ --dock-h: 74px; --dock-inset: 16px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --dock-bottom: calc(14px + var(--safe-bottom)); /* —— 动效：快速、自然、fluid —— */ --dur-fast: 140ms; --dur-normal: 220ms; --dur-slow: 300ms; --ease: cubic-bezier(.22, .9, .28, 1); /* 主曲线：快出缓停 */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* 入场 */ --ease-spring: cubic-bezier(.34, 1.45, .64, 1); /* 小幅弹性：点赞/按压 */ --scale-press: .96; --scale-press-deep: .9; } /* —— 深色模式：单独定义角色，不简单反相。 主题由 属性驱动（state/theme.js）：'dark' 强制深色、'light' 强制浅色、 'auto' 由 JS 依系统偏好实时同步该属性（index.html 早期脚本先行设置，避免首帧闪错主题）。 —— */ html[data-theme='dark'] { color-scheme: dark; --bg: #0e1116; --surface: #171b22; --surface-strong: #1a1f27; --ink-rgb: 236 240 248; --ink: rgb(var(--ink-rgb) / .94); --muted: rgb(var(--ink-rgb) / .62); --faint: rgb(var(--ink-rgb) / .40); --line: rgba(200, 212, 235, .1); --blue: #5a8dff; --blue-deep: #85b0ff; --accent: var(--blue); --accent-deep: #85b0ff; --accent-soft: rgba(90, 141, 255, .16); --mint: #3ad0a8; --danger: #ff453a; --danger-soft: rgba(255, 69, 58, .14); --peach-soft: rgba(255, 156, 120, .18); --mint-soft: rgba(58, 208, 168, .16); --report-btn-bg: rgba(240, 246, 255, .07); /* 深色：低透明玻璃 */ --report-btn-border: 1px solid rgba(240, 246, 255, .12); --glass-bg: linear-gradient(180deg, rgba(34, 39, 50, .78), rgba(24, 28, 36, .62)); --glass-border: 1px solid rgba(160, 180, 220, .14); --glass-shadow: 0 14px 38px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07); --glass-float-bg: linear-gradient(180deg, rgba(38, 44, 56, .86), rgba(26, 30, 40, .7)); --glass-float-shadow: 0 16px 40px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .08); --glass-surface-bg: linear-gradient(180deg, rgba(34, 39, 50, .95), rgba(24, 28, 36, .92)); --glass-surface-shadow: 0 24px 60px rgba(0, 0, 0, .55); --glass-selected-bg: linear-gradient(180deg, rgba(255,255,255,.07), rgba(90, 141, 255, .18)); --glass-selected-border: 1px solid rgba(160, 190, 255, .18); --banner-bg: linear-gradient(180deg, rgba(34, 39, 50, .97), rgba(24, 28, 36, .94)); --shadow-card: 0 10px 28px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2); --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, .4); --shadow-soft: 0 6px 18px rgba(0, 0, 0, .25); --wall-bg: #191216; --wall-grad-a: #45212e; --wall-grad-b: #422a22; --wall-grad-c: #2c2440; --wall-wave-1: rgba(196, 100, 132, .18); --wall-wave-2: rgba(212, 128, 100, .14); --wall-wave-3: rgba(142, 114, 198, .14); --wall-card: #251a20; --wall-ink: #f0dbe2; --wall-ink-2: #c49ba9; --wall-faint: #8e6a79; --wall-rose: #f0789d; --wall-rose-deep: #f191af; --wall-rose-soft: rgba(240, 120, 157, .16); --wall-track: rgba(240, 219, 226, .2); --pp-bg: #0d1216; --pp-grad-a: #14313f; --pp-grad-b: #252040; --pp-grad-c: #3b2b1e; --pp-card: rgba(30, 39, 50, .58); --pp-card-strong: rgba(34, 44, 56, .8); --pp-ink: #e9eef5; --pp-ink-2: #a0aabc; --pp-faint: #6c7787; --pp-accent: #45b4e0; --pp-accent-deep: #82cbec; --pp-accent-soft: rgba(69, 180, 224, .16); --pp-gold: #e9b65d; --pp-silver: #a2b5c8; --pp-bronze: #d09c72; --pp-danger-soft: rgba(255, 69, 58, .16); /* 按钮浅灰玻璃：亮灰半透明底+细亮边+顶部高光，把控制按钮从深色页底里隔离出来 */ --pp-fab-bg: linear-gradient(180deg, rgba(201, 211, 225, .38), rgba(170, 184, 204, .2)); --pp-fab-border: 1px solid rgba(218, 228, 241, .32); --pp-fab-ink: var(--pp-ink); --pp-ctrl-bg: linear-gradient(180deg, rgba(201, 211, 225, .24), rgba(170, 184, 204, .13)); --pp-ctrl-border: 1px solid rgba(218, 228, 241, .22); --pp-ctrl-inset: inset 0 1px 0 rgba(255, 255, 255, .12); --pp-ctrl-bg-active: linear-gradient(180deg, rgba(201, 211, 225, .34), rgba(170, 184, 204, .2)); } /* —— 高对比度：玻璃变实色 —— */ @media (prefers-contrast: more) { :root { --muted: #454c58; --faint: #565e6b; --line: rgba(18, 39, 70, .22); } .glass, .dock, .composer, .mini-topbar { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* —— 减少动画 —— */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* —— backdrop-filter 不支持时的降级 —— */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass, .dock, .composer, .mini-topbar { background: rgba(252, 253, 255, .97); } }