/* ============================================================
   base.css — CSS 变量、全局重置样式、渐变背景
   MBTI 人格测评应用
   ============================================================ */

/* ── CSS 变量 ─────────────────────────────────────────────── */
:root {
  /* 颜色 */
  --color-bg-start:       #e8eaf6;   /* 渐变起点：浅紫蓝 */
  --color-bg-end:         #f3e5f5;   /* 渐变终点：浅紫粉 */
  --color-card-bg:        rgba(255, 255, 255, 0.65);
  --color-card-border:    rgba(255, 255, 255, 0.8);
  --color-primary:        #7c4dff;   /* 主题紫色 */
  --color-primary-light:  #ede7f6;
  --color-text-primary:   #1a1a2e;
  --color-text-secondary: #5c5c7a;
  --color-selected-bg:    rgba(124, 77, 255, 0.12);
  --color-selected-border:#7c4dff;

  /* 圆角 */
  --radius-card:   20px;
  --radius-option: 16px;
  --radius-button: 12px;

  /* 毛玻璃 */
  --blur-card:    blur(20px);
  --blur-overlay: blur(40px);

  /* 动画 */
  --transition-page:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-option: 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性 */
  --transition-fast:   150ms ease;
}

/* ── 全局重置 ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  min-height: 100vh;
  /* 渐变背景 */
  background: linear-gradient(
    135deg,
    var(--color-bg-start) 0%,
    var(--color-bg-end) 100%
  );
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 排版基础 ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
}

p {
  color: var(--color-text-secondary);
}

ul, ol {
  list-style: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

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

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

input {
  font-family: inherit;
  font-size: inherit;
}

/* ── 渐变背景装饰（光晕效果） ─────────────────────────────── */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: var(--blur-overlay);
  opacity: 0.5;
}

body::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 70%);
  top: -200px;
  right: -200px;
}

body::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(243, 229, 245, 0.6) 0%, transparent 70%);
  bottom: -150px;
  left: -150px;
}

/* ── 滚动条美化（Webkit） ─────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(124, 77, 255, 0.25);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 77, 255, 0.45);
}

/* ── 选中文字颜色 ─────────────────────────────────────────── */
::selection {
  background: var(--color-selected-bg);
  color: var(--color-primary);
}