/**
 * JoyHub Games 主题配色文件
 * 基于配色方案.md实现
 */

:root {
  /* 主色系 */
  --primary-50: #E3F7FD;
  --primary-100: #B3E5FC;
  --primary-300: #4FC3F7; 
  --primary-500: #29B6F6; /* 主品牌色 */
  --primary-700: #0288D1;
  
  /* 辅助色系 */
  --secondary-400: #FFCA28; 
  --secondary-600: #FFB300;
  
  /* 中性色 */
  --surface-50: #FAFAFA;
  --surface-100: #F5F5F5;
  --surface-500: #E0E0E0;
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.54);
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* 卡片相关 */
  --card-radius: 8px;
  --card-gap: 20px;
  
  /* 文字大小 */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  
  /* 动效参数 */
  --animation-hover: 300ms cubic-bezier(0, 0, 0.2, 1);
  --animation-modal: 420ms cubic-bezier(0.2, 0, 0, 1);
  --animation-loading: 1000ms linear;
  
  /* 新增动效曲线 */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* 标准缓动 */
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1); /* 减速 */
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);   /* 加速 */
  
  /* 不同场景使用的动效 */
  --animation-entrance: 300ms var(--ease-decelerate);  /* 元素入场 */
  --animation-exit: 250ms var(--ease-accelerate);      /* 元素退场 */
  --animation-expand: 300ms var(--ease-standard);      /* 展开效果 */
  --animation-bounce: 600ms cubic-bezier(0.25, 0.1, 0.25, 1.25); /* 弹跳效果 */
  --animation-emphasis: 300ms cubic-bezier(0.2, 0, 0, 1.5);    /* 强调效果 */
}

/* 深色模式支持 */
.dark-theme:root, :root {
  /* 主色系 - 深色模式 */
  --primary-50: #0A2F43;
  --primary-100: #144D6E;
  --primary-300: #0288D1; 
  --primary-500: #29B6F6;
  --primary-700: #4FC3F7;
  
  /* 表面色 - 深色模式 */
  --surface-50: #121212;
  --surface-100: #1E1E1E;
  --surface-200: #2A2A2A;
  --surface-300: #3A3A3A;
  --surface-500: #505050;
  
  /* 文字颜色 - 深色模式 */
  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.6);
  
  /* 卡片阴影 - 深色模式 */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 浅色模式支持 */
.light-theme:root {
  /* 主色系 */
  --primary-50: #E3F7FD;
  --primary-100: #B3E5FC;
  --primary-300: #4FC3F7; 
  --primary-500: #29B6F6; /* 主品牌色 */
  --primary-700: #0288D1;
  
  /* 中性色 */
  --surface-50: #FAFAFA;
  --surface-100: #F5F5F5;
  --surface-200: #EEEEEE;
  --surface-300: #E0E0E0;
  --surface-500: #9E9E9E;
  
  /* 文字颜色 */
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.54);
  
  /* 卡片阴影 */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}