/* 全局样式 + CSS 变量 */

:root {
  /* 主色 */
  --color-primary: #5B9BD5;
  --color-primary-light: #A8D0F0;
  --color-primary-dark: #3A7BC0;

  /* 辅助色 */
  --color-accent: #F5C542;
  --color-accent-light: #F7D78C;

  /* 状态色 */
  --color-success: #66BB6A;
  --color-warn: #FFA726;
  --color-danger: #EF5350;
  --color-info: #42A5F5;

  /* 中性色 */
  --color-bg: #FAFBFC;
  --color-surface: #FFFFFF;
  --color-text: #2C3E50;
  --color-text-secondary: #7F8C8D;
  --color-border: #E8EDF0;

  /* 暗色主题 */
  --color-bg-dark: #1A1D21;
  --color-surface-dark: #242830;
  --color-text-dark: #E0E4E8;
  --color-text-secondary-dark: #8A919A;
  --color-border-dark: #363B44;

  /* 排版 */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", sans-serif;
  --font-size-base: 15px;
  --font-size-lg: 24px;
  --font-size-sm: 13px;
  --font-size-xs: 11px;
  --line-height: 1.6;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* 动画 */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗色主题 */
body.dark {
  --color-bg: var(--color-bg-dark);
  --color-surface: var(--color-surface-dark);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-secondary-dark);
  --color-border: var(--color-border-dark);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: var(--font-size-lg); }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

/* 居中布局 */
.view--center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5);
}

/* 加载动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in {
  animation: fadeIn 300ms var(--ease-out);
}