/* 网站皮肤（配色）。默认（site.css 里的 :root）是墨蓝青绿；<html data-skin="…"> 换成下面任一套。
   用哪套由 site_content/content.py 的 SITE["skin"] 决定，改了重新构建发布即可；build.py --skins 的预览版左下角能当场切换。
   2026-10-31：用户先比较了参考 gather.top / 币安 / 抹茶的三套和之前的浅色，又加了我设计的五套，选定 sand（暖砂）。
   只换颜色，不换版式；仍然不用渐变、阴影、发光。新加皮肤：在这里加一段，再在 static/js/skins.js 的列表里加一项。 */

/* 浅色：2026-10-29 上线时的样子，白底墨蓝细线，青绿只做点缀 */
[data-skin="light"] {
  --hero-bg: var(--white); --hero-fg: var(--ink); --hero-sub: var(--slate); --hero-eyebrow: var(--accent-text); --hero-grid: transparent;
  --hero-b1-bg: var(--ink); --hero-b1-fg: var(--white); --hero-b1-hover: var(--ink-2); --hero-b2-line: var(--ink);
  --art-l: var(--ink); --art-f: #FFFFFF; --art-m: #EDF1F4; --art-k: #D9E1E8; --art-g: var(--line);
  --art-a2: #D3EEEA; --art-lf: #FFFFFF; --art-lf-line: var(--ink); --art-t: var(--ink);
  --c-teal: var(--accent); --c-blue: var(--ink);
}
[data-skin="light"] .hero-ink { border-bottom: 1px solid var(--line); }
[data-skin="light"] .hero-fx { display: none; }
[data-skin="light"] .art .a2 { fill: #D3EEEA; }
[data-skin="light"] .art .lf { fill: #FFFFFF; stroke: var(--ink); }
[data-skin="light"] .art .t { stroke: var(--ink); stroke-opacity: .45; }

/* 荧光绿（参考 gather.top）：深海军蓝底 + 荧光绿，副色紫 */
[data-skin="neon"] {
  --ink: #0A1A2A; --ink-2: #13283D; --ink-3: #1D3650;
  --accent: #0A9E57; --accent-text: #08773F; --accent-ink: #00FD82;
  --c-teal: #00FD82; --c-blue: #7B5CFF;
  --hero-b1-bg: #00FD82; --hero-b1-fg: #0A1A2A; --hero-b1-hover: #4BFF91;
  --art-f: #16324C; --art-m: #10263B; --art-k: #0C1E2F;
}
[data-skin="neon"] .art .a2 { fill: #C4FADC; }
[data-skin="neon"] .art .lf { fill: #E6E0FF; stroke: #7B5CFF; }
[data-skin="neon"] .art .t { stroke: #7B5CFF; }

/* 金黄（参考币安）：炭黑底 + 金黄，副色冷灰 */
[data-skin="gold"] {
  --ink: #181A20; --ink-2: #2B3139; --ink-3: #3A424E; --slate-ink: #B7BDC6;
  --accent: #C99400; --accent-text: #8C6A00; --accent-ink: #F0B90B;
  --c-teal: #F0B90B; --c-blue: #B7BDC6;
  --hero-b1-bg: #FCD535; --hero-b1-fg: #181A20; --hero-b1-hover: #F0B90B;
  --art-f: #2B3139; --art-m: #1E2329; --art-k: #15181D; --art-l: rgba(255,255,255,.45);
}
[data-skin="gold"] .art .a2 { fill: #FCEBB6; }
[data-skin="gold"] .art .lf { fill: #F5F5F5; stroke: #848E9C; }
[data-skin="gold"] .art .t { stroke: #848E9C; }

/* 抹茶绿（参考 MEXC）：近黑底 + 抹茶绿，副色蓝 */
[data-skin="matcha"] {
  --ink: #0B0D10; --ink-2: #16191E; --ink-3: #22262D; --slate-ink: #A4ABB6;
  --accent: #0BBA74; --accent-text: #07834F; --accent-ink: #0BBA74;
  --c-teal: #0BBA74; --c-blue: #1463FF;
  --hero-b1-bg: #0BBA74; --hero-b1-fg: #0B0D10; --hero-b1-hover: #2FD08E;
  --art-f: #1C2027; --art-m: #14171C; --art-k: #0F1114;
}
[data-skin="matcha"] .art .a2 { fill: #C6F0DF; }
[data-skin="matcha"] .art .lf { fill: #DCE6FF; stroke: #1463FF; }
[data-skin="matcha"] .art .t { stroke: #1463FF; }

/* 左下角的切换条（内部预览才有） */
.skin-bar { position: fixed; left: 16px; bottom: 16px; z-index: 200; display: flex; gap: 4px; padding: 6px; background: #fff;
  border: 1px solid var(--line); font: 600 13px/1 var(--font); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.skin-bar button { border: 1px solid transparent; background: none; padding: 8px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.skin-bar button[aria-pressed="true"] { border-color: var(--ink); }
.skin-bar i { width: 12px; height: 12px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }

/* ===== 第二批（2026-10-31，我自己设计的）===== */

/* 午夜香槟：深海军蓝 + 香槟金，副色钢蓝。稳重、贵气，像控股集团 / 私人银行 */
[data-skin="champagne"] {
  --ink: #0C1526; --ink-2: #17233B; --ink-3: #22314D; --slate-ink: #AEB8C8;
  --accent: #9A7B3F; --accent-text: #7A5F2C; --accent-ink: #D4B483;
  --c-teal: #D4B483; --c-blue: #8FA8C8;
  --hero-b1-bg: #D4B483; --hero-b1-fg: #0C1526; --hero-b1-hover: #E3C99C;
  --art-f: #1B2A45; --art-m: #132038; --art-k: #0E182B; --art-l: rgba(255,255,255,.5);
}
[data-skin="champagne"] .art .a2 { fill: #F1E6D0; }
[data-skin="champagne"] .art .lf { fill: #E3EAF3; stroke: #6E8AAE; }
[data-skin="champagne"] .art .t { stroke: #6E8AAE; }

/* 极光：近黑的靛蓝 + 薄荷绿，副色淡紫。夜空里的极光，科技感最强 */
[data-skin="aurora"] {
  --ink: #0E0B1F; --ink-2: #1A1633; --ink-3: #262046; --slate-ink: #B3AECB;
  --accent: #0F9D74; --accent-text: #0B7A5A; --accent-ink: #7CF5C8;
  --c-teal: #7CF5C8; --c-blue: #A78BFA;
  --hero-b1-bg: #7CF5C8; --hero-b1-fg: #0E0B1F; --hero-b1-hover: #A5F9DA;
  --art-f: #241E44; --art-m: #1B1636; --art-k: #14102A; --art-l: rgba(255,255,255,.5);
}
[data-skin="aurora"] .art .a2 { fill: #CFFAEA; }
[data-skin="aurora"] .art .lf { fill: #EDE7FF; stroke: #8B6CF0; }
[data-skin="aurora"] .art .t { stroke: #8B6CF0; }

/* 信号橙：石墨黑 + 信号橙，副色冷灰。机房里的警示色、工业感 */
[data-skin="signal"] {
  --ink: #121417; --ink-2: #1E2125; --ink-3: #2A2E33; --slate-ink: #ADB4BE;
  --accent: #E55A0C; --accent-text: #B5470A; --accent-ink: #FF7A2F;
  --c-teal: #FF7A2F; --c-blue: #9AA4B2;
  --hero-b1-bg: #FF7A2F; --hero-b1-fg: #121417; --hero-b1-hover: #FF9455;
  --art-f: #272B31; --art-m: #1E2125; --art-k: #17191C; --art-l: rgba(255,255,255,.45);
}
[data-skin="signal"] .art .a2 { fill: #FFD9C2; }
[data-skin="signal"] .art .lf { fill: #EEF0F3; stroke: #7C8694; }
[data-skin="signal"] .art .t { stroke: #7C8694; }

/* 暖砂（浅色）：米白首屏 + 赤陶橙，副色深青。像杂志、建筑事务所，温和高级 */
[data-skin="sand"] {
  --ink: #22201C; --ink-2: #35322C; --ink-3: #4A463E; --slate: #6B6358; --slate-ink: #C9C1B4;
  --mist: #F3EEE5; --line: #E5DED2;
  --accent: #B4532A; --accent-text: #9A4420; --accent-ink: #E8875A;
  --c-teal: #D96B3B; --c-blue: #2F6F68;
  --hero-bg: #F6F1E8; --hero-fg: var(--ink); --hero-sub: #6B6358; --hero-eyebrow: var(--accent-text); --hero-grid: rgba(34,32,28,.035);
  --hero-b1-bg: var(--ink); --hero-b1-fg: #FFFFFF; --hero-b1-hover: var(--ink-2); --hero-b2-line: var(--ink);
  --art-l: #22201C; --art-f: #FFFDF8; --art-m: #EFE7DA; --art-k: #E2D6C3; --art-g: rgba(34,32,28,.08);
  --art-a2: #F2C4A8; --art-lf: #2F6F68; --art-lf-line: #2F6F68; --art-t: #2F6F68;
}
[data-skin="sand"] body { background: #FFFDF9; }
[data-skin="sand"] .topbar { background: rgba(255,253,249,.97); }
[data-skin="sand"] .hero-ink { border-bottom: 1px solid var(--line); }
[data-skin="sand"] .art .a2 { fill: #F2C4A8; }
[data-skin="sand"] .art .lf { fill: #D5E8E5; stroke: #2F6F68; }
[data-skin="sand"] .art .t { stroke: #2F6F68; }

/* 冰川（浅色）：冰蓝首屏 + 电光蓝，副色青。干净、明亮，像 SaaS 和开发者平台 */
[data-skin="glacier"] {
  --ink: #0B1B33; --ink-2: #15294A; --ink-3: #213A61;
  --mist: #EEF4FB; --line: #DCE5F0;
  --accent: #1D5BD8; --accent-text: #1A4FBF; --accent-ink: #6EA2FF;
  --c-teal: #2563EB; --c-blue: #14B8A6;
  --hero-bg: #EEF4FB; --hero-fg: var(--ink); --hero-sub: #4D5B70; --hero-eyebrow: var(--accent-text); --hero-grid: rgba(11,27,51,.045);
  --hero-b1-bg: #1D5BD8; --hero-b1-fg: #FFFFFF; --hero-b1-hover: #1A4FBF; --hero-b2-line: var(--ink);
  --art-l: #0B1B33; --art-f: #FFFFFF; --art-m: #E3ECF7; --art-k: #CFDDEE; --art-g: rgba(11,27,51,.08);
  --art-a2: #BFD5FF; --art-lf: #14B8A6; --art-lf-line: #14B8A6; --art-t: #2563EB;
}
[data-skin="glacier"] .hero-ink { border-bottom: 1px solid var(--line); }
[data-skin="glacier"] .art .a2 { fill: #CFE0FF; }
[data-skin="glacier"] .art .lf { fill: #CCF3EE; stroke: #14B8A6; }
[data-skin="glacier"] .art .t { stroke: #2563EB; }
.skin-bar { flex-wrap: wrap; max-width: calc(100vw - 32px); }