/* ============================================================ 暖砂 Warm Sand · 设计令牌 v1.2 工作室官网设计系统 —— 温暖亲和方向（主页 / 博客 / 论坛） ------------------------------------------------------------ 架构：两层令牌 1) 原始层 Primitives（--clay-* / --stone-* / --sage-* ...） 色板刻度，不要在业务样式中直接使用 2) 语义层 Semantic（--bg / --text-2 / --action / --border ...） 按「角色」取用，页面样式只允许引用这一层 ------------------------------------------------------------ 每个原始色先写 Hex 回退，再写 OKLCH； 浏览器不支持 OKLCH 时会自动回退到 Hex。 夜间主题「暮砂 Dusk Sand」见文件末尾：接入 。 ============================================================ */ :root { /* ---------------------------------------------------------- 1 · 原始色板 PRIMITIVES ---------------------------------------------------------- */ /* 黏土 Clay —— 品牌主色（陶土橘），CTA / 链接 / 强调 */ --clay-50: #FEF1E6; --clay-50: oklch(96.5% 0.020 60); --clay-100: #FEE2CF; --clay-100: oklch(93.0% 0.040 55); --clay-200: #FDCCAC; --clay-200: oklch(88.0% 0.070 55); --clay-300: #F2AB83; --clay-300: oklch(80.0% 0.100 50); --clay-400: #E3814A; --clay-400: oklch(70.0% 0.140 48); --clay-500: #D56326; --clay-500: oklch(63.0% 0.160 45); --clay-600: #BC4D1A; --clay-600: oklch(56.0% 0.155 42); --clay-700: #9A3B1B; --clay-700: oklch(48.0% 0.135 38); --clay-800: #772C1A; --clay-800: oklch(40.0% 0.110 35); --clay-900: #592117; --clay-900: oklch(33.0% 0.085 32); /* 暖砂 Stone —— 暖调中性色，文字 / 背景 / 边框 */ --stone-50: #FAF8F5; --stone-50: oklch(98.0% 0.005 80); --stone-100: #F5F1EC; --stone-100: oklch(96.0% 0.008 78); --stone-200: #E7E2DC; --stone-200: oklch(91.5% 0.010 75); --stone-300: #D6D0C9; --stone-300: oklch(86.0% 0.012 72); --stone-400: #A39D97; --stone-400: oklch(70.0% 0.012 70); --stone-500: #7F7974; --stone-500: oklch(58.0% 0.011 68); --stone-600: #68625C; --stone-600: oklch(50.0% 0.012 65); --stone-700: #504943; --stone-700: oklch(41.0% 0.013 62); --stone-800: #332C27; --stone-800: oklch(30.0% 0.013 60); --stone-900: #211C17; --stone-900: oklch(23.0% 0.012 58); --stone-950: #130E0B; --stone-950: oklch(17.0% 0.010 55); /* 鼠尾草 Sage —— 辅助强调（标签 / 状态「正常」/ 成功） */ --sage-100: #D8EFDC; --sage-100: oklch(93.0% 0.035 150); --sage-300: #9BCCA1; --sage-300: oklch(80.0% 0.080 148); --sage-500: #59985B; --sage-500: oklch(62.0% 0.110 145); --sage-600: #437E4B; --sage-600: oklch(54.0% 0.100 147); --sage-700: #2E623B; --sage-700: oklch(45.0% 0.085 150); /* 琥珀 Sun —— 警示 / 置顶精选 */ --sun-100: #F8EAC6; --sun-100: oklch(94.0% 0.050 90); --sun-400: #E1AF4A; --sun-400: oklch(78.0% 0.130 82); --sun-500: #D69718; --sun-500: oklch(72.0% 0.145 78); --sun-600: #B17000; --sun-600: oklch(60.0% 0.130 70); --sun-700: #854F06; --sun-700: oklch(48.0% 0.105 65); /* 莓红 Berry —— 危险 / 错误 */ --berry-100: #FCE0E0; --berry-100: oklch(93.0% 0.030 20); --berry-400: #E45E51; --berry-400: oklch(65.0% 0.170 28); --berry-500: #CF4238; --berry-500: oklch(58.0% 0.180 28); --berry-600: #B32F28; --berry-600: oklch(51.0% 0.170 28); --berry-700: #8E221D; --berry-700: oklch(43.0% 0.145 28); /* 天青 Sky —— 信息提示（低频使用） */ --sky-100: #DDEEFB; --sky-100: oklch(94.0% 0.025 240); --sky-400: #419BD4; --sky-400: oklch(66.0% 0.120 240); --sky-500: #3080BC; --sky-500: oklch(58.0% 0.120 245); --sky-600: #26679E; --sky-600: oklch(50.0% 0.110 248); --sky-700: #214F7C; --sky-700: oklch(42.0% 0.090 250); /* ---------------------------------------------------------- 2 · 语义层 SEMANTIC（页面样式从这里取值） ---------------------------------------------------------- */ /* 表面：页面底 → 卡片 → 强调表面，三级暖色抬升 */ --bg: var(--stone-100); --surface: var(--stone-50); --surface-raised: #FFFFFF; --surface-sunken: var(--stone-200); --surface-hover: var(--clay-50); --overlay: rgb(33 28 23 / 0.45); /* 文字：1 标题 → 2 正文 → 3 元信息 → 4 禁用/装饰 */ --text-1: var(--stone-900); --text-2: var(--stone-700); --text-3: var(--stone-600); --text-4: var(--stone-500); --text-brand: var(--clay-700); --text-inverse: var(--stone-50); /* 边框 */ --border: var(--stone-200); --border-strong: var(--stone-300); --border-brand: var(--clay-300); /* 动作色（按钮/主操作）。clay-600 上白字 4.98:1，AA 达标 */ --action: var(--clay-600); --action-hover: var(--clay-700); --action-active: var(--clay-800); --action-text: #FFFFFF; --action-soft: var(--clay-100); --action-soft-hover: var(--clay-200); --action-soft-text: var(--clay-800); /* 链接 */ --link: var(--clay-700); --link-hover: var(--clay-600); /* 状态语义 */ --success: var(--sage-600); --success-soft: var(--sage-100); --success-text: var(--sage-700); --warning: var(--sun-600); --warning-soft: var(--sun-100); --warning-text: var(--sun-700); --error: var(--berry-600); --error-soft: var(--berry-100); --error-text: var(--berry-700); --info: var(--sky-600); --info-soft: var(--sky-100); --info-text: var(--sky-700); /* 聚焦与选区 */ --focus-color: var(--clay-500); --selection-bg: var(--clay-100); /* ---------------------------------------------------------- 3 · 字体 标题用 Latin 网络字体 + 中文系统栈；正文全系统栈（零加载成本） ---------------------------------------------------------- */ --font-display: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; /* 字号：固定 rem 刻度（正文与产品界面不随视口缩放） */ --text-xs: 0.75rem; /* 12px 辅助说明 */ --text-sm: 0.875rem; /* 14px 按钮/表单/元信息 */ --text-base: 1rem; /* 16px 正文（中文最小可读字号） */ --text-lg: 1.125rem; /* 18px 导语/卡片标题 */ --text-xl: 1.375rem; /* 22px 小节标题 */ --text-2xl: 1.75rem; /* 28px 区块标题 */ --text-3xl: 2.25rem; /* 36px 页面标题 */ --text-display: clamp(2.5rem, 1.2rem + 4.5vw, 4.25rem); /* 首页 Hero 专用 */ /* 行高：中文正文 1.75 保证呼吸感；暗底文字加到 1.85 */ --leading-none: 1.1; --leading-heading: 1.25; --leading-body: 1.75; --leading-loose: 1.85; /* 字重 */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* 字距 */ --tracking-tight: -0.02em; /* 大标题 */ --tracking-heading: -0.01em; /* 中小标题 */ --tracking-wide: 0.08em; /* eyebrow 小标签 */ /* ---------------------------------------------------------- 4 · 间距（4pt 基准） ---------------------------------------------------------- */ --space-3xs: 0.25rem; /* 4px 图标内距 */ --space-2xs: 0.5rem; /* 8px 紧凑间隙 */ --space-xs: 0.75rem; /* 12px 组件内部 */ --space-sm: 1rem; /* 16px 相关元素间 */ --space-md: 1.5rem; /* 24px 卡片内距 */ --space-lg: 2rem; /* 32px 组间 */ --space-xl: 3rem; /* 48px 区块间 */ --space-2xl: 4rem; /* 64px 页面区块 */ --space-3xl: 6rem; /* 96px 首页大区块 */ /* ---------------------------------------------------------- 5 · 圆角（温暖亲和 = 偏大圆角） ---------------------------------------------------------- */ --radius-sm: 0.375rem; /* 6px 代码/小元素 */ --radius-md: 0.625rem; /* 10px 输入框 */ --radius-lg: 1rem; /* 16px 卡片 */ --radius-xl: 1.5rem; /* 24px 大卡片/Hero */ --radius-full: 999px; /* 胶囊按钮/标签 */ /* ---------------------------------------------------------- 6 · 阴影（暖棕色投影视，避免冷灰） “能明显看出来的阴影，几乎一定调重了” ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgb(89 33 23 / 0.05); --shadow-sm: 0 1px 2px rgb(89 33 23 / 0.04), 0 2px 6px rgb(89 33 23 / 0.05); --shadow-md: 0 2px 4px rgb(89 33 23 / 0.04), 0 8px 20px rgb(89 33 23 / 0.08); --shadow-lg: 0 4px 10px rgb(89 33 23 / 0.06), 0 20px 44px rgb(89 33 23 / 0.12); /* ---------------------------------------------------------- 7 · 动效（100/300/500 节奏） ---------------------------------------------------------- */ --duration-instant: 120ms; /* 按压/色彩反馈 */ --duration-fast: 200ms; /* 悬停/菜单 */ --duration-base: 300ms; /* 弹层/抽屉 */ --duration-slow: 500ms; /* 页面到达 */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* 轻微回弹：勾选/点选类反馈专用 */ /* 通用 UI 过渡：只过渡低成本属性 */ --transition-ui: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); /* ---------------------------------------------------------- 8 · 布局 ---------------------------------------------------------- */ --container: 72rem; /* 1152px 主容器 */ --container-wide: 84rem; /* 1344px 宽容器（作品墙） */ --measure: 40em; /* 中文正文舒适行宽 ≈ 40 字/行 */ --nav-height: 4rem; /* 层级阶梯 */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ------------------------------------------------------------ 夜间主题「暮砂 Dusk Sand」v1.2 ------------------------------------------------------------ 接入方式：，只重新赋值语义层，原始色板不动。 意象：炉火熄后的工作室——烬火余温的陶土做主色，鼠尾草与天青 化作天边一线极光，再加一点星尘微光。奇幻，但不刺眼。 全部文字/背景配对仍按 WCAG AA（≥ 4.5:1）校验。 ------------------------------------------------------------ */ :root[data-theme="dark"] { color-scheme: dark; /* 夜色基色（hex 回退 + OKLCH）：由深到浅四级暖夜 */ --dusk-void: #0D0A08; --dusk-void: oklch(13% 0.010 55); /* 深渊：凹陷表面 / 星空缝 */ --dusk-bg: #130E0B; --dusk-bg: oklch(17% 0.010 55); /* 夜空：页面底色 */ --dusk-raised: #2A241E; --dusk-raised: oklch(26% 0.014 58); /* 浮起的表面：卡片 / 输入框 */ --dusk-hover: #352419; --dusk-hover: oklch(30% 0.032 50); /* 悬停：被炉火熏染的陶 */ /* 表面：四级暖夜抬升 */ --bg: var(--dusk-bg); --surface: var(--stone-900); --surface-raised: var(--dusk-raised); --surface-sunken: var(--dusk-void); --surface-hover: var(--dusk-hover); --overlay: rgb(0 0 0 / 0.65); /* 文字：暗底提字阶，正文用 stone-300 保证 11:1 */ --text-1: var(--stone-100); --text-2: var(--stone-300); --text-3: var(--stone-400); --text-4: var(--stone-500); --text-brand: var(--clay-300); --text-inverse: var(--stone-950); /* 边框 */ --border: var(--stone-800); --border-strong: var(--stone-700); --border-brand: var(--clay-500); /* 动作色：暗底提亮降饱和 —— 烬火余温。clay-400 上深字 ≈ 6.9:1 */ --action: var(--clay-400); --action-hover: var(--clay-300); --action-active: var(--clay-500); --action-text: var(--stone-950); --action-soft: var(--clay-900); --action-soft-hover: var(--clay-800); --action-soft-text: var(--clay-200); /* 链接 */ --link: var(--clay-300); --link-hover: var(--clay-200); /* 状态语义：软底为夜色晕染，文字提亮到 300/400 阶 */ --success: var(--sage-300); --success-soft: #1B2B21; --success-soft: oklch(26% 0.030 150); --success-text: var(--sage-300); --warning: var(--sun-400); --warning-soft: #2B2413; --warning-soft: oklch(25% 0.030 90); --warning-text: var(--sun-400); --error: var(--berry-400); --error-soft: #2E1516; --error-soft: oklch(22% 0.040 25); --error-text: var(--berry-400); --info: var(--sky-400); --info-soft: #14222E; --info-soft: oklch(24% 0.030 245); --info-text: var(--sky-400); /* 聚焦与选区 */ --focus-color: var(--clay-300); --selection-bg: var(--clay-800); /* 阴影：夜色更沉，几乎全黑投影 */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.35); --shadow-md: 0 2px 4px rgb(0 0 0 / 0.40), 0 8px 24px rgb(0 0 0 / 0.45); --shadow-lg: 0 4px 12px rgb(0 0 0 / 0.50), 0 24px 48px rgb(0 0 0 / 0.55); /* 奇幻点缀：极光渐变与烬火微光（只在强调处少量使用） */ --gradient-aurora: linear-gradient(115deg, var(--clay-400), var(--sage-300) 55%, var(--sky-400)); --glow-ember: 0 0 20px rgb(227 129 74 / 0.30); /* 主按钮悬停余温 */ --glow-ember-sm: 0 0 10px rgb(227 129 74 / 0.35); /* 勾选/点选确认 */ --glow-aurora: 0 0 28px rgb(155 204 161 / 0.18); /* 卡片悬浮极光 */ }