/* 幻想乡 / Eutopia — 颜色。浅色为默认，深色写在 [data-theme="dark"] */
:root {
  /* 墨色（文字） */
  --ink: #0e2238;
  --ink-2: #3b5571;
  --ink-3: #587089;
  --accent: #0b78c8;
  --accent-hover: #075a98;

  /* 玻璃面板（透明度由 panelOpacity 调节，默认 .8） */
  --panel: rgba(255,255,255,.8);
  --panel-strong: rgba(255,255,255,.93);
  --gloss: rgba(255,255,255,.55);
  --edge: rgba(255,255,255,.95);
  --line: rgba(20,60,110,.12);
  --outline: rgba(10,40,80,.2);
  --shadow: rgba(0,30,70,.3);
  --hover: rgba(11,120,200,.09);

  /* 占位图 */
  --ph: #e4edf6;
  --stripe: rgba(20,60,110,.07);

  /* 水晶胶囊（选中态 / 次级按钮） */
  --chip-bg: linear-gradient(180deg,#ffffff 0,#f2f8fd 45%,#e2effa 55%,#eef6fd 100%);
  --chip-line: #a9c4de;
  --chip-ink: #10243b;

  /* 凹陷（按下 / 已激活） */
  --sunken-bg: linear-gradient(180deg, rgba(0,25,60,.12), rgba(0,25,60,.04));
  --sunken-shadow: inset 0 2px 4px rgba(0,20,50,.28), 0 1px 0 var(--edge);

  /* 页面底色（背景图加载前） */
  --page-bg: #06142a;
  --scrim: rgba(0,12,34,.5);

  /* 胶质渐变（Gel） */
  --gel-aqua: linear-gradient(180deg,#5cc0f5,#1677c9);
  --gel-aqua-line: rgba(0,40,100,.45);
  --gel-green: linear-gradient(180deg,#7fe05a,#1fa83a);
  --gel-green-line: rgba(0,70,20,.45);
  --gel-lime-tag: linear-gradient(180deg,#9cf26c 0,#06b025 50%,#058a1d 52%,#06b025 100%);
  --gel-red: linear-gradient(180deg,#ff8b78,#e0391f);
  --gel-close-hover: linear-gradient(180deg,#ffc9bd 0,#f0603f 48%,#d93412 52%,#ff9a6e 100%);
  --gem: radial-gradient(circle at 50% 120%, #9ff2ff 0, #0b6fd0 58%, #063d7a 100%);
  --avatar-me: linear-gradient(180deg, oklch(0.8 0.12 200), oklch(0.6 0.14 230));

  /* 语义色 */
  --heart: #e8434f;
  --star: #e6a100;
  --online: #2fd25a;
  --online-ink: #1fa83a;
  --unread-dot: #2aa3f0;
  --hot: #e8701e;

  /* 通知类型徽章 */
  --badge-reply: linear-gradient(180deg,#7fd4ff,#1279d6);
  --badge-mention: linear-gradient(180deg,#c9b8ff,#7a5ce6);
  --badge-like: linear-gradient(180deg,#ff9a8e,#e0394a);
  --badge-save: linear-gradient(180deg,#ffd76a,#e09400);
  --badge-follow: linear-gradient(180deg,#9cf26c,#1fa83a);
  --badge-system: linear-gradient(180deg,#ffd27a,#e08a00);

  /* 媒体深色区（详情页图/视频） */
  --media-bg: #13243c;
  --media-ink: #a9c4df;
  --progress: linear-gradient(180deg,#9ff2ff,#2aa3f0);

  /* 语义别名 */
  --text-body: var(--ink);
  --text-muted: var(--ink-2);
  --text-meta: var(--ink-3);
  --text-link: var(--accent);
  --surface-card: var(--panel-strong);
  --surface-bar: var(--panel);
  --surface-hover: var(--hover);
  --border-card: var(--outline);
  --border-divider: var(--line);
}

[data-theme="dark"] {
  --ink: #e8f2fc;
  --ink-2: #a9c4df;
  --ink-3: #88a4c0;
  --accent: #5ccfff;
  --accent-hover: #9ae2ff;
  --panel: rgba(8,22,44,.74);
  --panel-strong: rgba(12,28,52,.92);
  --gloss: rgba(130,200,255,.07);
  --edge: rgba(130,200,255,.16);
  --line: rgba(160,210,255,.12);
  --outline: rgba(0,0,0,.55);
  --shadow: rgba(0,0,0,.6);
  --hover: rgba(92,207,255,.1);
  --ph: #13253f;
  --stripe: rgba(160,210,255,.06);
  --chip-bg: linear-gradient(180deg,#1f3a5e 0,#152b4c 48%,#0f2242 52%,#172d4f 100%);
  --chip-line: rgba(130,200,255,.28);
  --chip-ink: #dcecff;
}