/* ============================================================
   tokens.css — 设计变量。两套主题共用同一批变量名，靠 body[data-theme] 换肤。
   改颜色只改这里，组件代码一行都不用动。
   ============================================================ */

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

:root {
  /* 通用尺度 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 44px;
  --tap: 44px;                 /* 最小点击区 */
  --page-max: 560px;           /* 手机优先，桌面居中 */

  --ease-outer: cubic-bezier(.34, 1.56, .64, 1);
  --ease-inner: cubic-bezier(.22, 1, .36, 1);

  /* 字体：全部走系统字体栈，不引外链，断网也可用 */
  --font-round: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
                -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun",
                Georgia, "Times New Roman", serif;
  --font-ui: "PingFang SC", "Microsoft YaHei UI", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ---------------- 外层 · 可爱层 ---------------- */
body[data-theme="outer"] {
  color-scheme: light;

  --bg:            #FFF7F3;
  --bg-2:          #FFE9EF;
  --bg-glow-a:     #FFD9E4;
  --bg-glow-b:     #FFF2E4;
  --surface:       #FFFFFF;
  --surface-2:     #FFF4F6;
  --line:          #F6DCE4;
  --line-strong:   #EFC6D3;

  --text:          #5C4A50;
  --text-soft:     #96818A;
  --text-faint:    #BCA9B0;

  --primary:       #F2A0B5;
  --primary-deep:  #E87C9B;
  --accent:        #FF7FA3;
  --accent-soft:   #FFD5E1;
  --butter:        #FFD9A0;
  --mint:          #A8DCC6;
  --gold:          #C9A063;

  --shadow-1: 0 2px 8px rgba(232, 124, 155, .10);
  --shadow-2: 0 10px 30px rgba(232, 124, 155, .16), 0 2px 8px rgba(232, 124, 155, .08);
  --shadow-in: none;

  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px;
  --ease: var(--ease-outer);
  --card-border: none;
  --letter-sp: 0;
}

/* ---------------- 内层 · 主仆层 ---------------- */
body[data-theme="inner"] {
  color-scheme: dark;

  --bg:            #120A18;
  --bg-2:          #1E0F22;
  --bg-glow-a:     #3A1230;
  --bg-glow-b:     #1A0C24;
  --surface:       #24102A;
  --surface-2:     #2E1435;
  --line:          #47213F;
  --line-strong:   #6B2E4C;

  --text:          #F0E4EA;
  --text-soft:     #B79BB0;
  --text-faint:    #7E6478;

  --primary:       #7B2D4E;
  --primary-deep:  #5E1F3A;
  --accent:        #C9385C;
  --accent-soft:   #4A1830;
  --gold:          #D4AF6A;
  --gold-soft:     #8A7040;
  --mint:          #6FA98E;

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .5);
  --shadow-2: 0 14px 40px rgba(0, 0, 0, .6);
  --shadow-in: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -18px 30px rgba(0, 0, 0, .35);

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-pill: 3px;
  --ease: var(--ease-inner);
  --card-border: 1px solid var(--line);
  --letter-sp: .02em;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  letter-spacing: var(--letter-sp);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .7s var(--ease), color .7s var(--ease);
}

/* 背景光晕：外层是暖暖的粉黄，内层是暗紫红光 */
body::before {
  content: "";
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 90vh;
  background:
    radial-gradient(46% 42% at 22% 14%, var(--bg-glow-a) 0%, transparent 68%),
    radial-gradient(44% 40% at 82% 6%, var(--bg-glow-b) 0%, transparent 66%);
  opacity: .85;
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  transition: opacity .7s var(--ease);
}

body[data-theme="outer"]::before { opacity: .9; }
body[data-theme="inner"]::before { opacity: .55; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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