/* ============================================ tokens.css — 吃饼人的好好生活手记 · 设计 token ⚠️ 全站唯一允许出现色值/字值常量定义的地方 新增组件一律引用变量，禁止在组件样式里写 hex/rgba ============================================ */ :root { /* ---------- 背景层 ---------- */ --app-bg: #eef4fb; --app-bg-soft: #e3ecf7; --app-panel: rgba(255, 255, 255, 0.78); --app-panel-solid: #ffffff; --app-panel-deep: rgba(255, 255, 255, 0.55); /* ---------- 品牌色 ---------- */ --app-cyan: #0891b2; --app-cyan-bright: #06b6d4; --app-cyan-deep: #0e7490; --app-purple: #6366f1; --app-amber: #d97706; --app-amber-ink: #92400e; /* amber-800：徽标文字（tint 上 6.6:1） */ --app-danger: #c0392b; /* ---------- 文字 ---------- */ --app-text: #0f172a; --app-text-dim: #475569; --app-text-faint: #64748b; /* slate-500：任何 tint 背景上 ≥4.3，白底 4.56 */ --app-on-primary: #ffffff; /* 文字场景专用深色（tint 背景上 ≥6:1）：kicker / 链接 hover / 强调 */ --app-cyan-ink: #155e75; /* cyan-800 */ --app-purple-ink: #4338ca; /* indigo-700：tag 文字 */ --app-purple-deep: #4f46e5; /* indigo-600：按钮渐变端，白字 6.29:1 */ /* ---------- 首页统计条（暖色玻璃药丸，呼应暖金「饼」元素，按参考设计） ---------- */ --stat-ink: #2e2620; /* 数字主色：深暖棕 */ --stat-muted: #6b5d50; /* 标签：够深以保证小字 ≥4.5:1 */ --stat-accent: #b85a2e; /* 单位（件/篇/%）：暖橘，已压深保证对比度 */ --stat-glass: rgba(255, 255, 255, 0.55); --stat-glass-border: rgba(255, 255, 255, 0.65); --stat-line: rgba(90, 70, 55, 0.16); --stat-shadow: 0 16px 36px -24px rgba(70, 45, 25, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9); --stat-icon-bg: rgba(217, 117, 68, 0.16); /* 图标圆牌底：暖橘微染 */ --stat-icon-ring: rgba(184, 90, 46, 0.40); /* 图标圆牌描边：暖橘 */ --stat-icon-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -8px rgba(70, 45, 25, 0.5); /* ---------- 边框与阴影 ---------- */ --app-border: rgba(8, 145, 178, 0.18); --app-border-hover: rgba(8, 145, 178, 0.45); --app-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 20px rgba(15, 23, 42, 0.06); --app-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(8, 145, 178, 0.16); --app-shadow-primary: 0 6px 18px rgba(8, 145, 178, 0.28); --app-shadow-primary-hover: 0 10px 26px rgba(8, 145, 178, 0.38); --app-glow: 0 0 0 1px rgba(8, 145, 178, 0.12), 0 4px 16px rgba(8, 145, 178, 0.1); --app-art-shadow: rgba(15, 23, 42, 0.18); /* 首页大饼底图的落影（filter: drop-shadow 用色） */ /* 大饼底图的中心柔化遮罩（mask-image 用，按 alpha 生效）： 手绘描边是近黑色，整图半透明到能看清插画时，压在正文下必然跌破 4.5:1； 故中心只留 12% 强度（正文落在上面约 4.9:1），向外渐强到 100%， 让饼边与彩色配料在四周完整显现 —— 视觉上就是「打了一束光」 */ --app-art-mask: radial-gradient( ellipse 52% 50% at 50% 50%, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 72%, #000 96% ); /* ---------- 背景装饰 ---------- */ --app-grid-line: rgba(8, 145, 178, 0.07); --app-glow-cyan: rgba(6, 182, 212, 0.12); --app-glow-purple: rgba(99, 102, 241, 0.1); --app-selection: rgba(6, 182, 212, 0.25); --app-header-bg: rgba(238, 244, 251, 0.85); --app-footer-bg: rgba(255, 255, 255, 0.55); --app-hairline: linear-gradient(90deg, transparent, var(--app-border-hover), transparent); /* ---------- 浅色色纸（hover / 徽标 / 标签底） ---------- */ --app-tint-cyan: rgba(8, 145, 178, 0.06); --app-tint-cyan-soft: rgba(8, 145, 178, 0.08); --app-tint-cyan-strong: rgba(8, 145, 178, 0.1); --app-tint-cyan-bright: rgba(6, 182, 212, 0.14); --app-tint-purple: rgba(99, 102, 241, 0.1); --app-tint-purple-strong: rgba(99, 102, 241, 0.25); --app-tint-amber: rgba(217, 119, 6, 0.08); --app-tint-amber-strong: rgba(217, 119, 6, 0.35); --app-icon-grad-a: rgba(6, 182, 212, 0.14); --app-icon-grad-b: rgba(99, 102, 241, 0.1); /* ---------- 遮罩 ---------- */ --app-mask-solid: #000; /* ---------- 卡通眼睛（主按钮鼠标跟随） ---------- */ --app-eye-ball: #ffffff; /* 眼白 */ --app-eye-ink: #12263f; /* 瞳孔 */ --app-eye-ring: rgba(18, 38, 63, 0.22); /* 眼白描边 */ --app-eye-shine: rgba(255, 255, 255, 0.92); /* 眼角高光 */ /* ---------- 卡片绶带（右上角斜向，全站一种样式） ---------- 深琥珀渐变，与暖金色「饼」元素同族；白字在其上 5.0:1 ~ 7.1:1， 满足小字（12px）4.5:1 的门槛，故不可改浅到 amber-600（会掉到 3.2:1） */ --app-ribbon-a: #c81e1e; /* 红：绶带主色（白字 5.5:1） */ --app-ribbon-b: #9b1414; /* 红：绶带深一档（渐变立体） */ --app-ribbon-ink: #ffffff; --app-ribbon-shadow: 0 2px 10px rgba(15, 23, 42, 0.24); /* ---------- 字体 ---------- 全站卡通字体：站酷快乐体 ZCOOL KuaiLe（SIL OFL 1.1，免费商用 + 可网页嵌入） @font-face 声明见 assets/fonts.css，字体文件 assets/fonts/zcool-kuaile.woff2 后方为系统兜底：字体未加载完成时先以圆体/黑体渲染，不出现方框与留白 */ --font-cartoon: "ZCOOL KuaiLe", "站酷快乐体", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; /* 原「等宽」角色同样收敛到卡通字体：全站统一一种气质 */ --font-sans: var(--font-cartoon); --font-mono: var(--font-cartoon); /* ---------- 字号 ---------- */ --fs-xs: 0.75rem; --fs-sm: 0.85rem; --fs-base: 0.95rem; --fs-md: 1.05rem; --fs-lg: 1.2rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-display: clamp(2.2rem, 5.5vw, 3.8rem); /* ---------- 间距（4px 基数） ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* ---------- 圆角 ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px; /* ---------- 动效 ---------- */ --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 280ms; --dur-reveal: 480ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ---------- 布局 ---------- */ --container-max: 1120px; --header-h: 68px; --z-header: 50; --prose-measure: 68ch; /* ---------- 工具专属：表面 / 轨道 / 投影 ---------- */ --app-surface-mute: #f4f6f9; /* 配置侧栏等实色弱面 */ --app-line-soft: #eef2f7; /* 卡片内分隔线 / 月历标题底 */ --app-track: #dfe3e8; /* 滑块轨道 */ --app-shadow-paper: 0 2px 14px rgba(15, 23, 42, 0.22); /* A4 纸面投影 */ --app-shadow-thumb: 0 1px 3px rgba(15, 23, 42, 0.3); /* 滑块拇指投影 */ /* ---------- 倒数日历纸面（打印输出，改值直接影响打印效果） ---------- */ --app-paper-ink: #111; /* 日期数字 / 倒数 */ --app-paper-ink-soft: #444; /* 星期表头 */ --app-paper-ink-faint: #555; /* 农历小字 */ --app-paper-navy: #1a3a5c; /* 纸面标题文字 */ --app-paper-line: #b5b5b5; /* 月历块外框 */ --app-paper-line-soft: #e0e0e0; /* 星期行分隔 */ --app-paper-dash: #ccc; /* 日期格虚线 */ --app-paper-wm: #0a3d62; /* 水印文字 */ /* 满高型工具（左侧配置 + 右侧预览）的视口扣除量： 页面内边距 36 + 面包屑 55 + app-root 边框 2 + app-bar 72 ≈ 165，取 168 留余量 */ --app-split-offset: 168px; }