/* ============================================================
   《我们的宇宙》设计令牌 · Design Tokens
   阶段二视觉原型 — 与设计文档 §9 一致
   ============================================================ */

:root {
  color-scheme: light;

  /* 底色与纸面 */
  --bg: #FBF8F4;
  --bg-elev: #FFFFFF;
  --bg-subtle: #F4EEE7;
  --bg-paper: #FFFDF9;
  --seg-active-bg: #FFFFFF;

  /* 文字 */
  --text: #262132;
  --text-2: #6E6577;
  --text-3: #9C93A3;

  /* 线与边 */
  --border: #EAE1D8;
  --border-strong: #DDD1C5;

  /* 柔粉（涵涵） */
  --rose-100: #FBE9E6;
  --rose-300: #F3C6C0;
  --rose-500: #D98C86;
  --rose-600: #B85C55;

  /* 雾紫（艺卓） */
  --purple-100: #EFEBF8;
  --purple-300: #C9BEE4;
  --purple-500: #9B8AC4;
  --purple-600: #7A69A6;

  /* 点缀 */
  --gold: #B98E4E;
  --gold-soft: #E3CFA4;

  /* 状态 */
  --success: #4E8B6A;
  --warning: #C58A3A;
  --danger: #B44A44;

  /* 遮罩 */
  --overlay: rgba(24, 18, 28, .52);
  --overlay-strong: rgba(10, 9, 14, .92);

  /* 圆角 */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  /* 阴影 */
  --shadow-card: 0 1px 2px rgba(38, 27, 45, .04), 0 14px 34px -22px rgba(38, 27, 45, .28);
  --shadow-float: 0 28px 70px -28px rgba(38, 27, 45, .42);

  /* 字体 */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;

  /* 动效 */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-press: .12s;
  --dur-ui: .22s;
  --dur-page: .3s;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #101119;
  --bg-elev: #191B26;
  --bg-subtle: #1E2130;
  --bg-paper: #1D1B23;
  --seg-active-bg: #272B3D;

  --text: #F2EDE6;
  --text-2: #ADA6BA;
  --text-3: #7D7690;

  --border: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);

  --rose-100: #342528;
  --rose-300: #F0B3AC;
  --rose-500: #E0A29B;
  --rose-600: #C77F78;

  --purple-100: #242135;
  --purple-300: #C0B2E8;
  --purple-500: #B3A4DD;
  --purple-600: #9C8CCB;

  --gold: #D9BE8C;
  --gold-soft: #6E5A36;

  --overlay: rgba(0, 0, 0, .62);
  --overlay-strong: rgba(4, 4, 8, .94);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 44px -26px #000;
  --shadow-float: 0 34px 80px -34px #000;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rose-500);
  outline-offset: 2px;
  border-radius: 12px;
}

img {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}