/* ========================================
   CSS 变量定义 - 世界杯竞猜 Mini App
   ======================================== */

:root {
  /* 主色 */
  --bg-primary: #0a0e17;
  --bg-secondary: #1a1f2e;
  --bg-tertiary: #242a3d;
  --accent-blue: #00d4ff;
  --accent-purple: #7b2fff;
  --gradient-primary: linear-gradient(135deg, #00d4ff, #7b2fff);
  --gradient-gold: linear-gradient(135deg, #f0c27f, #fc5c7d);

  /* 状态色 */
  --color-success: #00e676;
  --color-error: #ff5252;
  --color-warning: #ffc107;

  /* 文字色 */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.4);

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* 阴影 */
  --shadow-card: 0 4px 20px rgba(0, 212, 255, 0.1);
  --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
  --shadow-button: 0 4px 15px rgba(0, 212, 255, 0.25);

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 导航栏高度 */
  --nav-height: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}