/* ==================== 主题变量 - 圆润渐变风格 ==================== */

:root {
  /* 品牌色 - 深紫粉紫渐变 */
  --brand: #7c3aed;           /* 主色 紫色 */
  --brand-dark: #6d28d9;      /* 深色 深紫 */
  --brand-light: #a78bfa;     /* 中亮 浅紫 */
  --brand-soft: #c4b5fd;      /* 浅色 淡紫 */
  --brand-pale: #ede9fe;      /* 极浅 */

  /* 强调色 - 粉色系 */
  --accent: #ec4899;          /* 粉紫色 */
  --accent-dark: #db2777;     /* 深粉 */
  --accent-light: #f472b6;    /* 亮粉 */
  --accent-soft: #fbcfe8;     /* 浅粉 */

  /* 辅助色 - 天蓝 */
  --info: #0ea5e9;            /* 天蓝 */
  --info-light: #38bdf8;      /* 亮蓝 */

  /* 中性色 */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* 背景色 */
  --bg-base: #fafafa;         /* 页面基底 极浅灰 */
  --bg-soft: #f5f5f5;         /* 柔和背景 */
  --bg-card: #ffffff;         /* 卡片背景 纯白 */

  /* 渐变 */
  --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  --gradient-hero: linear-gradient(135deg, #a78bfa 0%, #f472b6 50%, #0ea5e9 100%);
  --gradient-accent: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);

  /* 圆角 - 超圆润 */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 50px;

  /* 阴影 - 强悬浮感 */
  --shadow-light: 0 2px 8px rgba(124, 58, 237, 0.08);
  --shadow-hover: 0 4px 16px rgba(124, 58, 237, 0.12);
  --shadow-card: 0 4px 20px rgba(124, 58, 237, 0.1), 0 2px 8px rgba(236, 72, 153, 0.06);
  --shadow-xl: 0 12px 32px rgba(124, 58, 237, 0.2);

  /* 语义色 */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;

  /* 字体 */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}