/**
 * ============================================================================
 * CatuxXS CSS变量 - Design Tokens
 * ============================================================================
 * 
 * 文件名：variables.css
 * 描述：全局CSS变量定义，包含颜色、阴影、过渡等设计令牌
 * 依赖：无（需最先加载）
 * 创建日期：2026-04-08
 * 
 * ============================================================================
 */

/* ========================================
   1. CSS变量定义（Design Tokens）
   ======================================== */

/**
 * CSS变量系统
 * 包含颜色、阴影、过渡等设计令牌
 */
:root {
  /* ==================== 颜色系统 ==================== */
  
  /* 主色调（科技蓝）*/
  --primary-50: #EFF6FF;    /* 浅蓝背景 */
  --primary-100: #DBEAFE;   /* 蓝色边框 */
  --primary-200: #BFDBFE;   /* 浅蓝边框 */
  --primary-400: #60A5FA;   /* 悬停状态 */
  --primary-500: #3B82F6;  /* 主色 */
  --primary-600: #2563EB;  /* 悬停状态 */
  --primary-900: #1E3A8A;  /* 深蓝文字 */

  /* 辅助色 */
  --accent-green: #10B981;   /* 节能/成功 */
  --accent-orange: #F59E0B;  /* 收益/警告 */
  --accent-red: #EF4444;      /* 错误/警示 */

  /* 中性色 */
  --gray-50: #F9FAFB;    /* 页面背景 */
  --gray-100: #F3F4F6;   /* 卡片背景 */
  --gray-200: #E5E7EB;   /* 边框 */
  --gray-300: #D1D5DB;   /* 分割线 */
  --gray-400: #9CA3AF;   /* 禁用状态 */
  --gray-500: #6B7280;   /* 次要文字 */
  --gray-600: #4B5563;   /* 辅助文字 */
  --gray-700: #374151;   /* 正文文字 */
  --gray-800: #1F2937;   /* 深色文字 */
  --gray-900: #111827;   /* 主要文字 */

  /* ==================== 阴影系统 ==================== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);                          /* 小阴影 */
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);  /* 中等阴影 */
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* 大阴影 */
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* 超大阴影 */

  /* ==================== 过渡效果 ==================== */
  --transition-fast: 150ms ease;     /* 快速过渡（按钮、链接） */
  --transition-normal: 300ms ease;    /* 正常过渡（卡片、面板） */
}