:root {
  /* ============================================
     wordit.art 游戏设计系统 - CSS变量规范
     版本: v2.5
     更新: 2026-04-08
     ============================================ */

  /* 主色调 - 活力蓝系 */
  --primary-50: #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBF7;
  --primary-300: #93C5FD;
  --primary-400: #60A5FA;
  --primary-500: #4A90D9;    /* 主色 */
  --primary-600: #3B7ABF;
  --primary-700: #2E5A8C;    /* 深色 */
  --primary-800: #1E3A5F;
  --primary-900: #0F1D2F;

  /* 辅助色 - 温暖系 */
  --orange-300: #FDBA74;
  --orange-400: #FB923C;
  --orange-500: #FFB347;     /* 橙色 */
  --orange-600: #EA580C;
  
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #77DD77;      /* 绿色 */
  --green-600: #16A34A;
  
  --pink-300: #FDA4AF;
  --pink-400: #FB7185;
  --pink-500: #FF6B9D;       /* 粉色 */
  --pink-600: #E11D48;

  /* 强调色 - 金黄奖励 */
  --gold-300: #FDE047;
  --gold-400: #FACC15;
  --gold-500: #FFD700;       /* 金币/奖励 */
  --gold-600: #CA8A04;
  --gold-glow: rgba(255, 215, 0, 0.4);

  /* 功能色 */
  --success: #22C55E;
  --success-light: #86EFAC;
  --error: #EF4444;
  --error-light: #FCA5A5;
  --warning: #F59E0B;
  --warning-light: #FCD34D;

  /* 中性色 - 背景/文字 */
  --bg-primary: #F8FAFC;      /* 页面背景 */
  --bg-secondary: #F1F5F9;    /* 次级背景 */
  --bg-card: #FFFFFF;         /* 卡片背景 */
  --bg-dark: #1E293B;         /* 深色模式背景 */
  
  --text-primary: #2D3748;    /* 主文字 */
  --text-secondary: #718096;  /* 次级文字 */
  --text-muted: #A0AEC0;      /* 弱化文字 */
  --text-inverse: #FFFFFF;    /* 反白文字 */

  /* 边框/分隔线 */
  --border-light: #E2E8F0;
  --border-medium: #CBD5E0;
  --border-dark: #A0AEC0;

  /* 阴影层级 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px var(--gold-glow);

  /* 圆角系统 - 8px基准 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* 间距系统 - 8px网格 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 游戏专用变量 */
  --btn-min-size: 80px;       /* 最小触控尺寸 */
  --card-min-height: 120px;   /* 卡片最小高度 */
  --particle-count: 12;       /* 粒子数量 */
  --game-max-width: 480px;    /* 游戏容器最大宽度 */
}

/* ============================================
   字体系统 - 儿童友好型
   ============================================ */

/* 
  字体加载方式：Google Fonts CDN
  在HTML head中添加：
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Fredoka+One&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
*/

:root {
  /* 标题字体 - 卡通活泼 */
  --font-display: 'ZCOOL KuaiLe', 'Fredoka One', 'Nunito', cursive;
  
  /* 正文字体 - 圆润友好 */
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* 数字/得分 - 醒目 */
  --font-number: 'Fredoka One', 'Nunito', sans-serif;
  
  /* 系统备用 */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* 字体大小系统 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;
  
  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* 字间距 */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
}

/* ============================================
   动画时序规范
   ============================================ */

:root {
  /* 缓动函数 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* 动画时长 */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-enter: 400ms;
  --duration-exit: 200ms;
}

/* ============================================
   工具类（与Tailwind配合使用）
   ============================================ */

/* 字体工具类 */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-number { font-family: var(--font-number); }

/* 文字渐变 */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-500), var(--pink-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-gold {
  background: linear-gradient(135deg, var(--gold-400), var(--orange-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 卡片基础样式 */
.card-base {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* 玻璃拟态效果 */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 禁止用户选择（游戏元素） */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 硬件加速 */
.gpu {
  transform: translateZ(0);
  will-change: transform;
}

/* 隐藏滚动条但保留功能 */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}