pc_nuxt/app/assets/css/main.css

/* 奇想宇宙 AIonline - PC 端全局样式 */

/* @nuxt/ui v4 内置 TailwindCSS v4，需在入口显式导入 */
@import "tailwindcss";

/* 主题色令牌（亮色 / 暗色两套取值，由 scripts/gen-theme.mjs 生成） */
@import "./theme.css";

/* 亮暗两色不变的固定色（避免被语义令牌误映射） */
:root,
html.dark {
  /* 深色实底：证件照页选中态等「深底 + 白字」的组件用它，暗色下同样成立 */
  --c-ink: #172033;
}

/* 全局字体与基础样式 */
body {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--c-f3f7fb);
  color: var(--c-172033);
}

/* 页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-cbd5e1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-94a3b8);
}

/**
 * 暗色下的卡片边缘。
 *
 * 亮色里「白底 + 浅灰蓝投影」是靠投影撑出层次的，投影在深色底上几乎不可见，
 * 所以给这类「有投影的白底卡片」补一条内描边（outline 不占布局、跟随圆角）。
 * 已经写了 border 的卡片描边同色，视觉上会合并，不会出现双线。
 */
html.dark [class*="bg-[var(--c-ffffff)]"][class*="shadow-["] {
  outline: 1px solid var(--c-e8eef7);
  outline-offset: -1px;
}