/* ============================================
   VideoSystem 统一CSS变量定义
   所有模块共享的变量，避免硬编码和冲突
   ============================================ */

:root {
  /* ========== 颜色系统 ========== */
  
  /* 主色调 - 暖色系（淡粉红/淡桔红） */
  --vs-color-primary: #ff9f9f;
  --vs-color-primary-hover: #ffb3b3;
  --vs-color-primary-light: #ffe8e8;
  --vs-color-primary-lighter: #fff5f5;
  
  /* 视频模块主色调（更淡） */
  --vs-video-color-primary: #ffcccc;
  --vs-video-color-primary-hover: #ffd6d6;
  
  /* 功能色 */
  --vs-color-success: #52c41a;
  --vs-color-success-bg: #f6ffed;
  --vs-color-success-border: #b7eb8f;
  --vs-color-error: #ff4d4f;
  --vs-color-error-hover: #ff7875;
  --vs-color-error-bg: #fff2f0;
  --vs-color-error-border: #ffccc7;
  --vs-color-warning: #fa8c16;
  --vs-color-warning-bg: #fff7e6;
  
  /* 文本颜色 - 统一为白色 */
  --vs-color-text-primary: #ffffff;
  --vs-color-text-secondary: #e0e0e0;
  --vs-color-text-tertiary: #b0b0b0;
  
  /* 背景色 - 统一为黑灰色 */
  --vs-color-bg-body: #2a2a2a; /* 主背景色：黑灰色 */
  --vs-color-bg-white: #2a2a2a; /* 白色背景改为黑灰色，统一整站背景 */
  --vs-color-bg-light: #333333; /* 浅色背景改为深灰色 */
  --vs-color-bg-lighter: #3a3a3a; /* 更浅背景改为稍浅的灰色 */
  --vs-color-bg-hover: #3a3a3a; /* 悬停背景改为灰色 */
  
  /* 边框颜色 - 调整为适合深色背景 */
  --vs-color-border: #404040;
  --vs-color-border-light: #505050;
  --vs-color-border-lighter: #454545;
  
  /* 遮罩层颜色 */
  --vs-color-overlay: rgba(0, 0, 0, 0.5);
  
  /* 悬停背景色 */
  --vs-color-hover-bg: #3a3a3a;
  
  /* ========== 间距系统 ========== */
  --vs-spacing-xs: 5px;
  --vs-spacing-sm: 10px;
  --vs-spacing-md: 15px;
  --vs-spacing-lg: 20px;
  --vs-spacing-xl: 30px;
  --vs-spacing-xxl: 40px;
  
  /* ========== 圆角系统 ========== */
  --vs-radius-sm: 4px;
  --vs-radius-md: 8px;
  --vs-radius-lg: 12px;
  --vs-radius-circle: 50%;
  --vs-radius-input: 20px;
  
  /* ========== 字体系统 ========== */
  --vs-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, 'Microsoft YaHei', sans-serif;
  --vs-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  --vs-font-size-xs: 12px;
  --vs-font-size-sm: 14px;
  --vs-font-size-md: 16px;
  --vs-font-size-lg: 18px;
  --vs-font-size-xl: 20px;
  --vs-font-size-xxl: 24px;
  
  --vs-font-weight-normal: 400;
  --vs-font-weight-medium: 500;
  --vs-font-weight-bold: 600;
  
  /* ========== 阴影系统 ========== */
  --vs-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --vs-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --vs-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --vs-shadow-nav: 0 -2px 8px rgba(0, 0, 0, 0.05);
  --vs-shadow-focus: 0 0 0 2px rgba(255, 159, 159, 0.1);
  
  /* ========== 过渡时间 ========== */
  --vs-transition-fast: 0.2s;
  --vs-transition-normal: 0.3s;
  --vs-transition-slow: 0.6s;
  
  /* ========== 布局系统 ========== */
  --vs-container-max-width: 1200px;
  --vs-top-bar-height: 64px; /* 从48px增加到64px，更高更舒适 */
  --vs-bottom-nav-height: 26px;
  --vs-search-max-width: 500px;
  --vs-z-index-top-bar: 99;
  --vs-z-index-nav-sticky: 98;
  --vs-z-index-bottom-nav: 100;
  --vs-z-index-overlay: 1000;
  
  /* ========== 图标尺寸 ========== */
  --vs-icon-size-sm: 24px;
  --vs-icon-size-md: 28px;
  --vs-icon-size-lg: 36px;
  
  /* ========== 视频模块特定 ========== */
  --vs-video-item-border-radius: 8px;
  --vs-video-cover-height: 280px;
  --vs-video-list-gap: 20px;
  --vs-video-list-min-width: 200px;
  
  /* ========== 用户模块特定 ========== */
  --vs-user-form-max-width: 400px;
  --vs-user-page-max-width: 1200px;
}