/* 星群 · 全站主题令牌（2026-10-20）
 *
 * 目标：日间/夜间只改这一层，组件里不再写死 #fff / #000 / #F8F6F1。
 * 加载顺序：space.css（或 community.css）之后加载；本文件用同名变量覆盖旧值。
 * 用法：<html data-theme="light|dark">，由 space/theme.js 在绘制前写入。
 */

:root{
  /* 日间：白底 + 墨色字 + 中性灰线 */
  --bg:#FFFFFF;
  --band:#F6F6F4;
  --panel:#FFFFFF;
  --panel-2:#F1F1EE;
  --line:#E5E5E2;
  --line2:#D6D6D1;
  --ink:#0B0B0C;
  --ink2:#4E4E53;
  --ink3:#74747A;
  --accent:#111113;
  --accent-soft:#F0F0ED;
  --accent-line:#DCDCD7;
  --on-accent:#FFFFFF;
  /* 启明星 / 认证专用暖金：只做小面积身份标识，不做大面积主色 */
  --gold:#8A5A2B;
  --gold-soft:#F3E7D8;
  --gold-line:#E2CDB0;
  /* 星图 / 首屏夜空（两种主题都保持深色，作为“宇宙窗口”） */
  --star-bg:#08080D;
  --star-fg:#F2F0EA;
  --nav-bg:rgba(255,255,255,.92);
  --hero-fade:#FFFFFF;
  --danger:#B3261E;
  --success:#1B6B45;
  --shadow:0 12px 32px rgba(20,18,16,.08);
  /* 兼容旧变量 */
  --dim:var(--ink2);
  --faint:var(--ink3);
  --panel-r:26px;
  --dur-fast:150ms;
  --dur:300ms;
  --dur-slow:520ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

html[data-theme="dark"]{
  --bg:#09090B;
  --band:#101013;
  --panel:#141416;
  --panel-2:#18181B;
  --line:#2A2A2F;
  --line2:#3A3A40;
  --ink:#F4F4F2;
  --ink2:#B8B4AC;
  --ink3:#8F8A82;
  --accent:#F4F4F2;
  --accent-soft:rgba(244,244,242,.08);
  --accent-line:#3A3A40;
  --on-accent:#09090B;
  --gold:#D8B26A;
  --gold-soft:rgba(216,178,106,.14);
  --gold-line:rgba(216,178,106,.38);
  --star-bg:#050507;
  --star-fg:#F2F0EA;
  --nav-bg:rgba(9,9,11,.90);
  --hero-fade:#09090B;
  --danger:#FF8A80;
  --success:#7BD8A8;
  --shadow:0 12px 32px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* 没有 JS / 还没写入 data-theme 时，跟随系统 */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#09090B;
    --band:#101013;
    --panel:#141416;
    --panel-2:#18181B;
    --line:#2A2A2F;
    --line2:#3A3A40;
    --ink:#F4F4F2;
    --ink2:#B8B4AC;
    --ink3:#8F8A82;
    --accent:#F4F4F2;
    --accent-soft:rgba(244,244,242,.08);
    --accent-line:#3A3A40;
    --on-accent:#09090B;
    --gold:#D8B26A;
    --gold-soft:rgba(216,178,106,.14);
    --gold-line:rgba(216,178,106,.38);
    --star-bg:#050507;
    --nav-bg:rgba(9,9,11,.90);
    --hero-fade:#09090B;
    --danger:#FF8A80;
    --success:#7BD8A8;
    --shadow:0 12px 32px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

html,body{background:var(--bg);color:var(--ink)}
body{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
[hidden]{display:none!important}

/* ---------- 主题切换按钮（由 theme.js 注入到导航右侧） ---------- */
.theme-toggle{
  width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border:1px solid var(--line2);border-radius:999px;
  background:var(--panel);color:var(--ink);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)
}
.theme-toggle:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-toggle svg{width:17px;height:17px;display:block}
@media (max-width:820px){.theme-toggle{width:36px;height:36px}}

/* ---------- 暗色兜底：space.css / community.css 里写死白色的组件 ---------- */
html[data-theme="dark"] .nav{
  background:var(--nav-bg);border-bottom-color:var(--line)
}
html[data-theme="dark"] .nav a{color:var(--ink2)}
html[data-theme="dark"] .nav a:hover{color:var(--ink)}
html[data-theme="dark"] .brand{color:var(--ink)!important}
html[data-theme="dark"] .brand .cn{color:var(--ink3)}
html[data-theme="dark"] .pill{
  background:var(--panel);border-color:var(--line2);color:var(--ink)!important
}
html[data-theme="dark"] .pill:hover{background:var(--accent-soft);border-color:var(--accent-line)}
html[data-theme="dark"] .pill.solid{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent)!important
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .c-card,
html[data-theme="dark"] .gcard,
html[data-theme="dark"] .c-empty,
html[data-theme="dark"] .mailcard{
  background:var(--panel);border-color:var(--line);color:var(--ink)
}
html[data-theme="dark"] .feedtab,
html[data-theme="dark"] .feedsearch input,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .c-link--src,
html[data-theme="dark"] .creator-links a,
html[data-theme="dark"] .template,
html[data-theme="dark"] .steps li::before{
  background:var(--panel);color:var(--ink);border-color:var(--line2)
}
html[data-theme="dark"] .feedsearch input::placeholder{color:var(--ink3)}
html[data-theme="dark"] .feedtab.is-on{
  background:var(--ink);color:var(--bg);border-color:var(--ink)
}
html[data-theme="dark"] .feedtab.is-on .n{color:var(--ink2)}
html[data-theme="dark"] .chip.is-on{
  background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)
}
html[data-theme="dark"] .c-status{
  background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)
}
html[data-theme="dark"] .c-link--go{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent)
}
html[data-theme="dark"] .c-link--go:hover{
  background:var(--ink2);border-color:var(--ink2)
}
html[data-theme="dark"] .sw-footer{
  background:var(--band);border-top-color:var(--line);color:var(--ink2)
}
html[data-theme="dark"] .sw-footer a{color:var(--ink2)}
html[data-theme="dark"] .sw-footer a:hover{color:var(--ink)}
html[data-theme="dark"] .star-panel{border-color:var(--line)}
html[data-theme="dark"] .chat{
  background:var(--panel);color:var(--ink);border-color:var(--line2)
}

/* 表单（登录 / 个人中心 / 投稿）在暗色下的兜底 */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:var(--panel);color:var(--ink);border-color:var(--line2)
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--ink3)}

/* 按钮：space.css 的 .btn--primary 写死了 color:#fff，暗色下白底白字 */
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--ink2);border-color:var(--ink2);color:var(--on-accent)}
.btn--ghost{background:var(--panel);border-color:var(--line2);color:var(--ink)}
.btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent-line)}
html[data-theme="dark"] .skinFab,
html[data-theme="dark"] .skinfab{
  background:var(--panel);border-color:var(--line2);color:var(--ink)
}
html[data-theme="dark"] .mailcard p,
html[data-theme="dark"] .note{color:var(--ink2)}

@media (prefers-reduced-motion:reduce){
  body,.theme-toggle{transition:none}
}