501 lines
17 KiB
CSS
501 lines
17 KiB
CSS
/* ===========================================================================
|
||
Palettes × Themes —— 收敛表达
|
||
Stage 4a.2：用「主题骨架 + palette 差异补丁」替代原 10 块字符级复制
|
||
|
||
设计思路：
|
||
所有 palette × theme 共享同一组 token 表达（bg-hover / bg-active / 阴影
|
||
/ scrollbar / 边框等），但每个 palette 在每个 theme 下各自有自己的
|
||
视觉个性（accent 色、带色相的 bg / fg）。
|
||
|
||
所以分两层：
|
||
1. 主题骨架（深 / 浅）：定义所有「主题相关但 palette 无感」的 token。
|
||
主题骨架只装「公共部分」，不装任何 palette 个性。
|
||
2. palette 差异补丁：每块只覆盖该 palette 的 accent 系列 + 带色相的
|
||
bg/fg/text + markdown 配色 + toolbar-divider。其余 token 走主题骨架。
|
||
|
||
选择器特异性：
|
||
- [data-theme="dark"] (0,1,1)
|
||
- [data-theme-palette="X"][data-theme="Y"] (0,2,0)
|
||
后者更高，所以 palette 块能覆盖主题骨架。
|
||
=========================================================================== */
|
||
|
||
/* ---------- Dark Theme Skeleton ----------
|
||
暗色通用 token —— 5 个 palette 的暗色版共享这些。
|
||
palette 块只覆盖带色相部分（accent + 自身 bg/fg/md-*）。
|
||
*/
|
||
[data-theme="dark"] {
|
||
/* 背景交互态：所有暗色 palette 都用白叠加 */
|
||
--bg-hover: rgba(255, 255, 255, 0.04);
|
||
--bg-active: rgba(255, 255, 255, 0.08);
|
||
|
||
/* 边框：所有暗色 palette 浅边用白叠加、强边用更深的白 */
|
||
--border-subtle: rgba(255, 255, 255, 0.04);
|
||
--border-strong: rgba(255, 255, 255, 0.12);
|
||
|
||
/* 滚动条 */
|
||
--scrollbar-thumb: rgba(255, 255, 255, 0.10);
|
||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.20);
|
||
|
||
/* 阴影：暗色下更深 */
|
||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.16);
|
||
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.42), 0 4px 8px rgba(0, 0, 0, 0.25);
|
||
/* --shadow-glow 由 palette 设（带 accent-soft） */
|
||
|
||
/* 语义色：所有暗色 palette 统一
|
||
audit fix (H4/H5)：--danger 由 #ff6b6b → #d23636（white-on-bg 对比从 2.2:1
|
||
提到 4.86:1，AA 通过）。btn-danger / error chip 都用这个 token，统一收敛。 */
|
||
--danger: #d23636;
|
||
--btn-on-danger: #ffffff;
|
||
--warning: #ffb454;
|
||
--success: #5ad19a;
|
||
|
||
/* Markdown 通用（不带色相）：所有暗色 palette 都用白叠加 */
|
||
--md-table-border: rgba(255, 255, 255, 0.08);
|
||
--md-table-stripe: rgba(255, 255, 255, 0.02);
|
||
--md-table-header-bg: rgba(255, 255, 255, 0.04);
|
||
--md-hr: rgba(255, 255, 255, 0.08);
|
||
/* --md-blockquote-* / --md-inline-code-bg / --md-code-bg / --md-link 由 palette 设 */
|
||
--md-heading: var(--fg-primary);
|
||
|
||
/* ── 文字版语义色 ───────────────────────────────────────────────
|
||
用途：状态栏 chip 字、AI 错误小字、表单 hint、设置卡 selected label
|
||
等 11-14px 的有色正文。装饰色（warning / danger / success / accent）
|
||
为图标、边框、圆点、单字符（AI diff +/-）设计，直接套到正文字符上
|
||
会因高彩度小字"振动"看着累。这里取 60-65% 装饰色 + 35-40%
|
||
fg-primary 调和：色相仍可识别（暖橙 / 红 / 绿 / 蓝调），但 chroma
|
||
降到不会刺眼的程度。
|
||
比例选择：
|
||
dark 用 60% 装饰色 —— 深底 fg-primary 偏白，混出"暖白"效果。
|
||
light 用 70% 装饰色 —— 浅底 fg-primary 偏黑，需要更高的色比保证
|
||
文字可见度，70% 仍比 100% 纯色温和一档。
|
||
边界：borders / dots / icons / 单字符 +/- 继续用纯 *（不退色），
|
||
详见各组件 CSS 注释。 */
|
||
--warning-text: color-mix(in srgb, var(--warning) 60%, var(--fg-primary));
|
||
--danger-text: color-mix(in srgb, var(--danger) 60%, var(--fg-primary));
|
||
--accent-text: color-mix(in srgb, var(--accent) 65%, var(--fg-primary));
|
||
}
|
||
|
||
/* ---------- Light Theme Skeleton ---------- */
|
||
[data-theme="light"] {
|
||
--bg-hover: rgba(0, 0, 0, 0.04);
|
||
--bg-active: rgba(0, 0, 0, 0.07);
|
||
|
||
--border-subtle: rgba(0, 0, 0, 0.04);
|
||
--border-strong: rgba(0, 0, 0, 0.14);
|
||
|
||
--scrollbar-thumb: rgba(0, 0, 0, 0.14);
|
||
--scrollbar-thumb-hover: rgba(0, 0, 0, 0.26);
|
||
|
||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.035), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.035);
|
||
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.09), 0 4px 12px rgba(0, 0, 0, 0.05);
|
||
/* --shadow-glow 由 palette 设（带 accent-soft） */
|
||
|
||
/* audit fix (H4/H5)：light --danger 由 #e54848 → #c52424（white-on-bg 对比从
|
||
3.93:1 提到 5.84:1，AA 通过）。--warning / --success 本身对比足够，未动。 */
|
||
--danger: #c52424;
|
||
--btn-on-danger: #ffffff;
|
||
--warning: #d97706;
|
||
--success: #10b981;
|
||
|
||
--md-table-border: rgba(0, 0, 0, 0.08);
|
||
--md-table-stripe: rgba(0, 0, 0, 0.02);
|
||
--md-table-header-bg: rgba(0, 0, 0, 0.03);
|
||
--md-hr: rgba(0, 0, 0, 0.08);
|
||
--md-heading: var(--fg-primary);
|
||
|
||
/* 文字版语义色（与 dark 段对应注释）。light 底 fg-primary 偏黑，
|
||
用 70% 装饰色让色相仍清晰，但比纯色温和：避免红字"扎眼"、橙字"泛酸"。 */
|
||
--warning-text: color-mix(in srgb, var(--warning) 70%, var(--fg-primary));
|
||
--danger-text: color-mix(in srgb, var(--danger) 70%, var(--fg-primary));
|
||
--accent-text: color-mix(in srgb, var(--accent) 70%, var(--fg-primary));
|
||
}
|
||
|
||
/* ===========================================================================
|
||
Palette overrides —— 每个块只覆盖该 palette 个性化的 token
|
||
=========================================================================== */
|
||
|
||
/* ---------- Default (Linear 风格：近黑中性底 + indigo) ----------
|
||
兜底：body 上没有 data-theme-palette 时也应用 default（兼容未挂属性场景）。 */
|
||
body:not([data-theme-palette]),
|
||
[data-theme-palette="default"][data-theme="dark"] {
|
||
--bg-app: #08090a;
|
||
--bg-toolbar: rgba(8, 9, 10, 0.85);
|
||
--bg-sidebar: rgba(255, 255, 255, 0.022);
|
||
--bg-viewer: #08090a;
|
||
--bg-elevated: #16171a;
|
||
--bg-card: #101113;
|
||
--bg-card-hover: #191a1d;
|
||
|
||
--fg-primary: #f7f8f8;
|
||
--fg-secondary: #b0b6c0;
|
||
--fg-tertiary: #8e95a1;
|
||
--fg-muted: #6c7178;
|
||
|
||
--border-default: rgba(255, 255, 255, 0.06);
|
||
|
||
/* audit fix (H4/H5)：--accent 由 #7883e0 → #4f5ec7（white-on-bg 对比从 3.46:1
|
||
提到 5.6:1，AA 通过）。其它 indigo 调色板都是浅 accent 配深色字（--btn-on-accent
|
||
= #1a232e），已经满足 AA，无需调。 */
|
||
--accent: #4f5ec7;
|
||
--btn-on-accent: #ffffff;
|
||
--accent-hover: #6473d3;
|
||
--accent-soft: rgba(79, 94, 199, 0.22);
|
||
--accent-soft-hover: rgba(79, 94, 199, 0.28);
|
||
--accent-selection: rgba(79, 94, 199, 0.50);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #101113;
|
||
--md-code-text: #e6e9f1;
|
||
--md-inline-code-bg: rgba(120, 131, 224, 0.20);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
/* indigo 在近黑底只有 4.2:1，链接调亮一档（2026-08 进一步提亮到 ~7:1） */
|
||
--md-link: #a3aaef;
|
||
--md-link-hover: #b8bef4;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
[data-theme-palette="default"][data-theme="light"] {
|
||
--bg-app: #fbfbfc;
|
||
--bg-toolbar: rgba(255, 255, 255, 0.85);
|
||
--bg-sidebar: #f4f5f8;
|
||
--bg-viewer: #fbfbfc;
|
||
--bg-elevated: #ffffff;
|
||
--bg-card: #ffffff;
|
||
--bg-card-hover: #f7f8f9;
|
||
|
||
--fg-primary: #282a30;
|
||
--fg-secondary: #525968;
|
||
--fg-tertiary: #676e7d;
|
||
--fg-muted: #767b83;
|
||
|
||
--border-default: rgba(0, 0, 0, 0.07);
|
||
|
||
--accent: #5e6ad2;
|
||
--btn-on-accent: #ffffff;
|
||
--accent-hover: #4d58bd;
|
||
--accent-soft: rgba(94, 106, 210, 0.12);
|
||
--accent-soft-hover: rgba(94, 106, 210, 0.16);
|
||
--accent-selection: rgba(94, 106, 210, 0.28);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #f4f5f8;
|
||
--md-code-text: #282a30;
|
||
--md-inline-code-bg: rgba(94, 106, 210, 0.10);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
/* light 主题的 --md-link 用比 accent 更深的色：modal 卡片底色浅（#eceefa / #e2eff5 / #e6f1ea / #faeae7），
|
||
直接用 accent 只剩 3.5-4.0:1，不达 WCAG AA（4.5:1）。这里给每个 light 调色板独立加深。 */
|
||
--md-link: #4244a8;
|
||
--md-link-hover: #2f3082;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(0, 0, 0, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
/* ---------- Ocean (深海军 + 青绿) ---------- */
|
||
[data-theme-palette="ocean"][data-theme="dark"] {
|
||
--bg-app: #0b141d;
|
||
--bg-toolbar: rgba(11, 20, 29, 0.85);
|
||
--bg-sidebar: rgba(180, 210, 235, 0.04);
|
||
--bg-viewer: #0b141d;
|
||
--bg-elevated: #131e2a;
|
||
--bg-card: #16212e;
|
||
--bg-card-hover: #1c2837;
|
||
|
||
--fg-primary: #e3ecf3;
|
||
--fg-secondary: #c4d2dc;
|
||
--fg-tertiary: #96b1c6;
|
||
--fg-muted: #6c8090;
|
||
|
||
--border-default: rgba(180, 210, 235, 0.08);
|
||
|
||
--accent: #6cc5e6;
|
||
--btn-on-accent: #1a232e;
|
||
--accent-hover: #85d2ee;
|
||
--accent-soft: rgba(108, 197, 230, 0.20);
|
||
--accent-soft-hover: rgba(108, 197, 230, 0.26);
|
||
--accent-selection: rgba(108, 197, 230, 0.48);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #111923;
|
||
--md-code-text: #cbd6e0;
|
||
--md-inline-code-bg: rgba(108, 197, 230, 0.18);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #85d2ee;
|
||
--md-link-hover: #9cdcf2;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(180, 210, 235, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
[data-theme-palette="ocean"][data-theme="light"] {
|
||
--bg-app: #eef4f8;
|
||
--bg-toolbar: rgba(255, 255, 255, 0.85);
|
||
--bg-sidebar: #e5eef5;
|
||
--bg-viewer: #eef4f8;
|
||
--bg-elevated: #ffffff;
|
||
--bg-card: #ffffff;
|
||
--bg-card-hover: #eef4f8;
|
||
|
||
--fg-primary: #0f1d2a;
|
||
--fg-secondary: #34465a;
|
||
--fg-tertiary: #4f697a;
|
||
--fg-muted: #6a7d8d;
|
||
|
||
--border-default: rgba(15, 40, 70, 0.08);
|
||
|
||
--accent: #0e7da8;
|
||
--btn-on-accent: #ffffff;
|
||
--accent-hover: #0a688d;
|
||
--accent-soft: rgba(14, 125, 168, 0.12);
|
||
--accent-soft-hover: rgba(14, 125, 168, 0.16);
|
||
--accent-selection: rgba(14, 125, 168, 0.30);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #e7eef4;
|
||
--md-code-text: #0f1d2a;
|
||
--md-inline-code-bg: rgba(14, 125, 168, 0.08);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #084060;
|
||
--md-link-hover: #05304a;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(15, 40, 70, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
/* ---------- Forest (松黑 + 翠玉) ---------- */
|
||
[data-theme-palette="forest"][data-theme="dark"] {
|
||
--bg-app: #0e1410;
|
||
--bg-toolbar: rgba(14, 20, 16, 0.85);
|
||
--bg-sidebar: rgba(180, 210, 190, 0.04);
|
||
--bg-viewer: #0e1410;
|
||
--bg-elevated: #16201a;
|
||
--bg-card: #19251e;
|
||
--bg-card-hover: #1f2d26;
|
||
|
||
--fg-primary: #e6efe8;
|
||
--fg-secondary: #c4d4ca;
|
||
--fg-tertiary: #9eb3a4;
|
||
--fg-muted: #6c7d72;
|
||
|
||
--border-default: rgba(180, 210, 190, 0.08);
|
||
|
||
--accent: #76c78d;
|
||
--btn-on-accent: #1a232e;
|
||
--accent-hover: #8dd4a3;
|
||
--accent-soft: rgba(118, 199, 141, 0.20);
|
||
--accent-soft-hover: rgba(118, 199, 141, 0.26);
|
||
--accent-selection: rgba(118, 199, 141, 0.48);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #141c16;
|
||
--md-code-text: #cad7ce;
|
||
--md-inline-code-bg: rgba(118, 199, 141, 0.18);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #8dd4a3;
|
||
--md-link-hover: #a4e0b9;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(180, 210, 190, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
[data-theme-palette="forest"][data-theme="light"] {
|
||
--bg-app: #f0f5f1;
|
||
--bg-toolbar: rgba(255, 255, 255, 0.85);
|
||
--bg-sidebar: #e6efe9;
|
||
--bg-viewer: #f0f5f1;
|
||
--bg-elevated: #ffffff;
|
||
--bg-card: #ffffff;
|
||
--bg-card-hover: #f0f5f1;
|
||
|
||
--fg-primary: #102018;
|
||
--fg-secondary: #34483c;
|
||
--fg-tertiary: #4f6356;
|
||
--fg-muted: #6d7e73;
|
||
|
||
--border-default: rgba(20, 55, 30, 0.08);
|
||
|
||
--accent: #2c8c52;
|
||
--btn-on-accent: #000000;
|
||
--accent-hover: #227544;
|
||
--accent-soft: rgba(44, 140, 82, 0.12);
|
||
--accent-soft-hover: rgba(44, 140, 82, 0.16);
|
||
--accent-selection: rgba(44, 140, 82, 0.30);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #e8efe9;
|
||
--md-code-text: #102018;
|
||
--md-inline-code-bg: rgba(44, 140, 82, 0.08);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #1a5a30;
|
||
--md-link-hover: #0f4220;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(20, 55, 30, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
/* ---------- Lavender (茄紫 + 粉紫) ---------- */
|
||
[data-theme-palette="lavender"][data-theme="dark"] {
|
||
--bg-app: #14101a;
|
||
--bg-toolbar: rgba(20, 16, 26, 0.85);
|
||
--bg-sidebar: rgba(200, 180, 220, 0.04);
|
||
--bg-viewer: #14101a;
|
||
--bg-elevated: #1d1726;
|
||
--bg-card: #211a2c;
|
||
--bg-card-hover: #282034;
|
||
|
||
--fg-primary: #ece6f2;
|
||
--fg-secondary: #d0c5dc;
|
||
--fg-tertiary: #a99cc0;
|
||
--fg-muted: #76688c;
|
||
|
||
--border-default: rgba(200, 180, 220, 0.08);
|
||
|
||
--accent: #c89ce8;
|
||
--btn-on-accent: #1a232e;
|
||
--accent-hover: #d4abee;
|
||
--accent-soft: rgba(200, 156, 232, 0.20);
|
||
--accent-soft-hover: rgba(200, 156, 232, 0.26);
|
||
--accent-selection: rgba(200, 156, 232, 0.48);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #1a1423;
|
||
--md-code-text: #d3cce0;
|
||
--md-inline-code-bg: rgba(200, 156, 232, 0.18);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #d4abee;
|
||
--md-link-hover: #e0baf3;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(200, 180, 220, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
[data-theme-palette="lavender"][data-theme="light"] {
|
||
--bg-app: #f5f0fa;
|
||
--bg-toolbar: rgba(255, 255, 255, 0.85);
|
||
--bg-sidebar: #ebe4f3;
|
||
--bg-viewer: #f5f0fa;
|
||
--bg-elevated: #ffffff;
|
||
--bg-card: #ffffff;
|
||
--bg-card-hover: #f5f0fa;
|
||
|
||
--fg-primary: #1a1228;
|
||
--fg-secondary: #3d3252;
|
||
--fg-tertiary: #5d4f7a;
|
||
--fg-muted: #6c5f86;
|
||
|
||
--border-default: rgba(60, 30, 90, 0.08);
|
||
|
||
--accent: #7c3aaf;
|
||
--btn-on-accent: #ffffff;
|
||
--accent-hover: #6a2f95;
|
||
--accent-soft: rgba(124, 58, 175, 0.12);
|
||
--accent-soft-hover: rgba(124, 58, 175, 0.16);
|
||
--accent-selection: rgba(124, 58, 175, 0.30);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #ebe2f2;
|
||
--md-code-text: #1a1228;
|
||
--md-inline-code-bg: rgba(124, 58, 175, 0.08);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #5e1f8a;
|
||
--md-link-hover: #421560;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(60, 30, 90, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
/* ---------- Sunset (酒红 + 桃粉) ---------- */
|
||
[data-theme-palette="sunset"][data-theme="dark"] {
|
||
--bg-app: #1a0e14;
|
||
--bg-toolbar: rgba(26, 14, 20, 0.85);
|
||
--bg-sidebar: rgba(220, 170, 180, 0.04);
|
||
--bg-viewer: #1a0e14;
|
||
--bg-elevated: #261520;
|
||
--bg-card: #2c1a26;
|
||
--bg-card-hover: #34212e;
|
||
|
||
--fg-primary: #f4e6ea;
|
||
--fg-secondary: #d8c5cc;
|
||
--fg-tertiary: #b598a8;
|
||
--fg-muted: #806878;
|
||
|
||
--border-default: rgba(220, 170, 180, 0.08);
|
||
|
||
--accent: #ffa091;
|
||
--btn-on-accent: #1a232e;
|
||
--accent-hover: #ffb1a4;
|
||
--accent-soft: rgba(255, 160, 145, 0.20);
|
||
--accent-soft-hover: rgba(255, 160, 145, 0.26);
|
||
--accent-selection: rgba(255, 160, 145, 0.48);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #20131a;
|
||
--md-code-text: #dccdd2;
|
||
--md-inline-code-bg: rgba(255, 160, 145, 0.18);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #ffb1a4;
|
||
--md-link-hover: #ffc2b6;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(220, 170, 180, 0.08) 50%, transparent 100%);
|
||
}
|
||
|
||
[data-theme-palette="sunset"][data-theme="light"] {
|
||
--bg-app: #fbf2ee;
|
||
--bg-toolbar: rgba(255, 255, 255, 0.85);
|
||
--bg-sidebar: #f3e6e1;
|
||
--bg-viewer: #fbf2ee;
|
||
--bg-elevated: #ffffff;
|
||
--bg-card: #ffffff;
|
||
--bg-card-hover: #fbf2ee;
|
||
|
||
--fg-primary: #2a121a;
|
||
--fg-secondary: #48303a;
|
||
--fg-tertiary: #6b4d58;
|
||
--fg-muted: #7b636c;
|
||
|
||
--border-default: rgba(80, 30, 40, 0.08);
|
||
|
||
--accent: #d94f3a;
|
||
--btn-on-accent: #000000;
|
||
--accent-hover: #bf3f2d;
|
||
--accent-soft: rgba(217, 79, 58, 0.12);
|
||
--accent-soft-hover: rgba(217, 79, 58, 0.16);
|
||
--accent-selection: rgba(217, 79, 58, 0.30);
|
||
|
||
--shadow-glow: 0 0 0 3px var(--accent-soft);
|
||
|
||
--md-code-bg: #f1e3dd;
|
||
--md-code-text: #2a121a;
|
||
--md-inline-code-bg: rgba(217, 79, 58, 0.08);
|
||
--md-blockquote-border: var(--accent);
|
||
--md-blockquote-bg: var(--accent-soft);
|
||
--md-link: #8e1f10;
|
||
--md-link-hover: #621208;
|
||
|
||
--toolbar-divider: linear-gradient(90deg,
|
||
transparent 0%, rgba(80, 30, 40, 0.08) 50%, transparent 100%);
|
||
}
|