/* YunQing Blog 设计令牌 — 共享于博客与后台 */ /* ---------- 深黑主题（默认） ---------- */ :root { --bg: #1a1a1a; --bg-soft: #161616; --bg-elevated: #222222; --bg-card: #0e0e0e; --bg-card-2: #131313; --surface: rgba(14, 14, 14, 0.72); --ink: #f5f5f7; --ink-2: #e4e4e7; --ink-3: #a1a1a6; /* 5.34:1（原 #6e6e73 仅 3.43:1）— 元信息/时间戳可达 WCAG AA */ --ink-4: #8e8e93; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); /* 主色改为中性：黑白灰承担全部结构，色彩只在"点睛"处出现 */ --accent: #f5f5f7; --accent-hover: #ffffff; --accent-soft: rgba(255, 255, 255, 0.10); /* 文本强调色（在 --bg 上 ≥4.5:1） */ --accent-ink: #f5f5f7; /* 强调色底上的文字：暗色主题下强调底是浅色，必须配深字 */ --on-accent: #141416; /* 梦幻点缀色板 —— 仅用于渐变点睛（进度条 / 巨型字 / 404 光带 / 命中高亮）， 不做大面积铺色，保持黑白灰的主体克制 */ --dream-1: #a5b4fc; /* 淡靛 */ --dream-2: #c4b5fd; /* 淡紫 */ --dream-3: #f0abfc; /* 淡粉 */ --dream-4: #93c5fd; /* 淡蓝 */ --grad-dream: linear-gradient(100deg, #93c5fd 0%, #a5b4fc 28%, #c4b5fd 54%, #f0abfc 100%); --dream-glow: rgba(196, 181, 253, 0.30); --dream-soft: rgba(165, 180, 252, 0.16); /* 氛围层浓度：暗底上颗粒要看得见，雾可以稍浓 */ --grain-op: 0.055; --fog-op: 0.15; /* 代码块：两种主题下都保持"暗室"，避免浅色模式代码块发灰 */ --code-bg: #0f1115; --code-ink: #e6edf3; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.35); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.3), 0 32px 96px rgba(0, 0, 0, 0.4); --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 20px rgba(255, 255, 255, 0.02); --edge-light-strong: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 30px rgba(255, 255, 255, 0.04); --glass-bg: rgba(17, 17, 19, 0.66); --glass-bg-scrolled: rgba(22, 22, 24, 0.85); --glass-bg-strong: rgba(20, 20, 22, 0.86); /* 导航滑动胶囊指示器（中性色，不用强调色） */ --nav-pill-bg: rgba(255, 255, 255, 0.075); --nav-pill-border: rgba(255, 255, 255, 0.09); --nav-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); --card-grad: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 108%, #ffffff 4%) 0%, var(--bg-card-2) 100%); --card-grad-soft: linear-gradient(180deg, #0c0c0c 0%, #101010 100%); --hover-bg: rgba(255, 255, 255, 0.06); --hover-bg-strong: rgba(255, 255, 255, 0.1); --tag-bg: rgba(45, 45, 45, 0.85); --btn-invert-bg: #f5f5f7; --btn-invert-fg: #1c1c1e; --accent-line: #f5f5f7; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px; /* ---------- 字阶 type scale ---------- 由既有 25 种裸 px 归并而来（合并差值 ≤1px 的邻近值，视觉无感）。 新增样式只能取这些档位，不要再写裸 px 字号。 */ --fs-11: 11px; /* 角标、极小注 */ --fs-12: 12px; /* 元信息、时间戳 */ --fs-13: 13px; /* 卡片正文、列表 */ --fs-14: 14px; /* 正文基准 */ --fs-15: 15px; /* 导语、摘要 */ --fs-16: 16px; /* 小标题 */ --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; /* 区块标题 */ --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-28: 28px; /* 页面大标题 */ --fs-32: 32px; --fs-52: 52px; /* Hero / 页脚巨型字 */ /* ---------- 行高 scale（0.1 步进） ---------- */ --lh-09: 0.9; /* 巨型标题紧排 */ --lh-1: 1; --lh-11: 1.1; --lh-12: 1.2; --lh-13: 1.3; --lh-14: 1.4; --lh-15: 1.5; --lh-16: 1.6; /* 正文基准 */ --lh-17: 1.7; --lh-18: 1.8; /* 长文阅读 */ --lh-19: 1.9; /* ---------- 间距 scale（4pt 网格，供新增样式使用） ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-30: 120px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 回弹曲线：原先只在 style.css 里以 fallback 形式出现，未定义会导致 var() 依赖兜底 */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 硬编码 8 次未入令牌的曲线，统一收敛 */ --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.42s; --dur-fast: 0.22s; --dur-slow: 0.62s; --maxw: 1120px; --gutter: clamp(20px, 5vw, 56px); color-scheme: dark; } /* ---------- 浅色主题 ---------- */ [data-theme="light"] { --bg: #f5f5f7; --bg-soft: #ececef; --bg-elevated: #ffffff; /* 卡片提亮为纯白（原 #e8e8eb）：层次改由边框+阴影承担，同时让正文灰阶达到 AA */ --bg-card: #ffffff; --bg-card-2: #fafafc; --surface: rgba(255, 255, 255, 0.72); --ink: #1d1d1f; --ink-2: #424245; /* 7.30:1（原 4.15:1） */ --ink-3: #56565b; /* 5.30:1（原 2.96:1） */ --ink-4: #6b6b70; --line: rgba(0, 0, 0, 0.10); --line-strong: rgba(0, 0, 0, 0.16); --accent: #1d1d1f; --accent-hover: #3a3a3d; --accent-soft: rgba(0, 0, 0, 0.07); /* 浅色下 --accent 本身即达标（16:1 以上），文本直接用它 */ --accent-ink: #1d1d1f; /* 强调色底为近黑，文字用白 */ --on-accent: #ffffff; /* 白底上梦幻色需加深才看得见 */ --dream-1: #7c8cf5; --dream-2: #9b7ff0; --dream-3: #d978e8; --dream-4: #6aa8f0; --grad-dream: linear-gradient(100deg, #6aa8f0 0%, #7c8cf5 28%, #9b7ff0 54%, #d978e8 100%); --dream-glow: rgba(155, 127, 240, 0.22); --dream-soft: rgba(124, 140, 245, 0.14); /* 白底上颗粒与雾都要更淡，否则显脏 */ --grain-op: 0.042; --fog-op: 0.085; /* 代码块同样保持暗底，与暗色主题一致 */ --code-bg: #15181d; --code-ink: #e6edf3; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.05), 0 24px 64px rgba(0, 0, 0, 0.04); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.06), 0 32px 96px rgba(0, 0, 0, 0.05); --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.15); --edge-light-strong: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 0 30px rgba(255, 255, 255, 0.25); --glass-bg: rgba(250, 250, 252, 0.66); --glass-bg-scrolled: rgba(255, 255, 255, 0.85); --glass-bg-strong: rgba(250, 250, 252, 0.86); /* 导航滑动胶囊指示器（中性色，不用强调色） */ --nav-pill-bg: rgba(0, 0, 0, 0.055); --nav-pill-border: rgba(0, 0, 0, 0.06); --nav-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7); --card-grad: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%); --card-grad-soft: linear-gradient(180deg, #ffffff 0%, #f7f7fa 100%); --hover-bg: rgba(0, 0, 0, 0.045); --hover-bg-strong: rgba(0, 0, 0, 0.07); /* 白卡片上需要可见的浅灰底（原 rgba(255,255,255,.85) 会隐形） */ --tag-bg: rgba(0, 0, 0, 0.05); --btn-invert-bg: #1d1d1f; --btn-invert-fg: #ffffff; --accent-line: var(--accent); color-scheme: light; } /* ---------- 电脑宽屏：容器宽度阶梯（克制放宽，1360 封顶） ---------- */ @media (min-width: 1440px) { :root { --maxw: 1240px; } } @media (min-width: 1680px) { :root { --maxw: 1300px; } } @media (min-width: 1920px) { :root { --maxw: 1360px; } }