/* 主题。每套只改这一组变量，其余样式一律走变量，不硬编码颜色。
切换方式：给 打 data-theme="xxx"；不打就跟随系统。 */
:root,
[data-theme="dark"] {
color-scheme: dark;
--bg: #0b0e14; /* 页面底 */
--bg-2: #11151f; /* 导航栏 */
--surface: #141926; /* 卡片 */
--surface-2: #1a2030; /* 卡片内的次级块 */
--hover: #1e2536;
--line: #232b3d;
--line-2: #2e3850;
--ink: #e8edf7;
--ink-2: #98a4bd;
--ink-3: #6b768f;
--brand: #3b82f6;
--brand-2: #8b5cf6;
--accent: #14b8c4;
--ok: #22c55e;
--warn: #eab308;
--bad: #ef4444;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}
[data-theme="light"] {
color-scheme: light;
--bg: #f6f8fc;
--bg-2: #ffffff;
--surface: #ffffff;
--surface-2: #f3f6fb;
--hover: #eaeff7;
--line: #e3e8f0;
--line-2: #d3dae6;
--ink: #0f172a;
--ink-2: #55637d;
--ink-3: #8792a8;
--brand: #2563eb;
--brand-2: #7c3aed;
--accent: #0891b2;
--ok: #16a34a;
--warn: #ca8a04;
--bad: #dc2626;
--shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07);
}
/* 石墨：中性灰，长时间盯着最不累 */
[data-theme="graphite"] {
color-scheme: dark;
--bg: #131313;
--bg-2: #191919;
--surface: #1d1d1d;
--surface-2: #242424;
--hover: #2b2b2b;
--line: #2e2e2e;
--line-2: #3d3d3d;
--ink: #ededed;
--ink-2: #a1a1a1;
--ink-3: #757575;
--brand: #e5e5e5;
--brand-2: #a3a3a3;
--accent: #d4d4d4;
--ok: #4ade80;
--warn: #facc15;
--bad: #f87171;
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
}
/* 暖纸：浅色但不刺眼，像纸 */
[data-theme="paper"] {
color-scheme: light;
--bg: #faf7f2;
--bg-2: #fffdfa;
--surface: #fffdfa;
--surface-2: #f4efe7;
--hover: #ede6db;
--line: #e6ded1;
--line-2: #d6cab7;
--ink: #1f1b16;
--ink-2: #6b6154;
--ink-3: #998e7e;
--brand: #b45309;
--brand-2: #9a3412;
--accent: #0f766e;
--ok: #15803d;
--warn: #a16207;
--bad: #b91c1c;
--shadow: 0 1px 2px rgba(70,54,35,.06), 0 8px 24px rgba(70,54,35,.08);
}
/* 午夜蓝：深蓝底，医美/美业这类偏冷的品牌观感 */
[data-theme="midnight"] {
color-scheme: dark;
--bg: #070d1c;
--bg-2: #0b142a;
--surface: #0e1a35;
--surface-2: #132144;
--hover: #182a55;
--line: #1c2c52;
--line-2: #27396a;
--ink: #e3ecff;
--ink-2: #93a6cc;
--ink-3: #63769c;
--brand: #38bdf8;
--brand-2: #6366f1;
--accent: #22d3ee;
--ok: #34d399;
--warn: #fbbf24;
--bad: #fb7185;
--shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(3,10,30,.5);
}
/* 不选主题时跟随系统：深色沿用 :root，浅色套用 light 的值 */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
color-scheme: light;
--bg: #f6f8fc;
--bg-2: #ffffff;
--surface: #ffffff;
--surface-2: #f3f6fb;
--hover: #eaeff7;
--line: #e3e8f0;
--line-2: #d3dae6;
--ink: #0f172a;
--ink-2: #55637d;
--ink-3: #8792a8;
--brand: #2563eb;
--brand-2: #7c3aed;
--accent: #0891b2;
--ok: #16a34a;
--warn: #ca8a04;
--bad: #dc2626;
--shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.07);
}
}