/* variables.css - 设计系统与全局变量定义 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Noto+Sans+SC:wght@300;400;600;800&display=swap');

:root {
  /* 樱花粉色系配色 */
  --bg-primary: #FFF0F2;            /* 极其温润的淡樱粉底色 */
  --bg-secondary: #FFF8F9;          /* 更亮一点的浮雕表面色 */
  --bg-container: #FFE5E9;          /* 凹陷容器或更深的粉色底 */
  
  /* 拟物化双阴影系统 (Soft UI Double Shadow) */
  --shadow-dark: #E5C2C8;           /* 软暖粉色阴影 */
  --shadow-light: #FFFFFF;          /* 纯白高光 */
  
  /* 拟物化阴影状态组合 */
  --shadow-flat: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
  --shadow-hover: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
  --shadow-active: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
  
  /* 按钮/图标等的柔和下凹样式 */
  --shadow-sunken: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
  /* 极轻的边界线，用于精致描边 */
  --neumorphic-border: 1px solid rgba(255, 255, 255, 0.8);
  --neumorphic-border-dark: 1px solid rgba(229, 194, 200, 0.4);

  /* 主题与强调色 */
  --accent-pink: #FF8BA4;           /* 经典樱花中粉色 */
  --accent-pink-hover: #FFA3B7;     /* 悬停时的亮樱粉 */
  --accent-pink-dark: #E06F89;      /* 樱粉暗色（用于对比文字） */
  --accent-gold: #FFD25A;           /* 樱花花蕊金黄点缀 */
  
  /* 极具质感的樱木深色文字，比纯黑更有质感且温和 */
  --text-primary: #5A484C;          
  --text-secondary: #8B7277;
  --text-tertiary: #AFA0A4;
  --text-on-accent: #FFFFFF;

  /* Q弹回弹曲线 */
  --transition-bouncy: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-smooth: all 0.3s ease-in-out;
  
  /* 字体族 */
  --font-sans: 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  /* 网站最大宽度与内边距 */
  --max-width: 1200px;
  --header-height: 80px;
}

/* 基础重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none; /* 防止频繁点击导致选中文字破坏视觉 */
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
  min-height: 100vh;
}

/* 隐藏原生滚动条并创建定制的拟物化滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-pink);
  border-radius: 10px;
  border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-pink-hover);
}

/* 常用拟物化公用类 */
.neo-flat {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-flat);
  border: var(--neumorphic-border);
  border-radius: 24px;
  transition: var(--transition-bouncy);
}

.neo-sunken {
  background: var(--bg-primary);
  box-shadow: var(--shadow-sunken);
  border: var(--neumorphic-border-dark);
  border-radius: 24px;
}

.neo-btn {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-flat);
  border: var(--neumorphic-border);
  border-radius: 16px;
  cursor: pointer;
  outline: none;
  transition: var(--transition-bouncy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-weight: 600;
}

.neo-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.neo-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-active);
}