/* 颜色变量 */

:root {
  /* 主色调 */
  --main-color:#0C32EB;

  /* 行为相关颜色 */
  --color-primary: #0C32EB;
  --color-success: #4cd964;
  --color-warning: #f0ad4e;
  --color-error: #dd524d;

  /* 文字基本颜色 */
  --text-color: #ffffff; /* 基本色 */
  --text-color-inverse: #0C32EB; /* 反色 */
  --text-color-grey: #999; /* 辅助灰色，如加载更多的提示信息 */
  --text-color-placeholder: #808080;
  --text-color-disable: #c0c0c0;

  /* 背景颜色 */
  --bg-color: #ffffff;
  --bg-color-grey: #F1F1F1;
  --bg-color-hover: #f1f1f1; /* 点击状态颜色 */
  --bg-color-mask: rgba(0, 0, 0, 0.4); /* 遮罩颜色 */

  /* 边框颜色 */
  --border-color: #c8c7cc;

  /* 尺寸变量 */

  /* 文字尺寸 */
  --font-size-sm: 24px;
  --font-size-base: 28px;
  --font-size-lg: 32px;

  /* 图片尺寸 */
  --img-size-sm: 40px;
  --img-size-base: 52px;
  --img-size-lg: 80px;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-base: 6px;
  --border-radius-lg: 12px;
  --border-radius-circle: 50%;

  /* 水平间距 */
  --spacing-row-sm: 10px;
  --spacing-row-base: 20px;
  --spacing-row-lg: 30px;

  /* 垂直间距 */
  --spacing-col-sm: 8px;
  --spacing-col-base: 16px;
  --spacing-col-lg: 24px;

  /* 透明度 */
  --opacity-disabled: 0.3;

  /* 文章场景相关 */
  --color-title: #333333; /* 文章标题颜色 */
  --font-size-title: 24px;
  --color-subtitle: #555555; /* 二级标题颜色 */
  --font-size-subtitle: 20px;
  --color-paragraph: #3f536e; /* 文章段落颜色 */
  --font-size-paragraph: 16px;
}