/* 公共样式库 */

:root {
    /* 主颜色 */
    --color-primary: #007bff;
    --color-black: #000000;
    --color-white: #FFFFFF;
  
    /* 字体可选颜色 */
    --color-text-primary: #000000;
    --color-text-secondary: #717071;
    --color-text-muted: #808080;
    --color-text-disabled: #AFAFAF;
  
    /* 页面颜色 */
    --color-page-background-light: #f7f7f7;
    --color-page-background-white: #FFFFFF;

    /* 按钮颜色 */
    --color-button-blue: #007bff;
    --color-button-green: #218838;
  }
  
  /* 字体可选效果 */

  .font-bold-20,
  .字体-加粗20 {
    font-weight: 700;
    font-size: 26px;
    color: var(--color-text-primary);
  }

  .font-bold-16,
  .字体-加粗16 {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-text-primary);
  }
  
  .font-bold-14,
  .字体-加粗14 {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-primary);
  }
  
  .font-regular-14,
  .字体-正文14 {
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-primary);
  }
  
  .font-regular-14-secondary,
  .字体-正文弱化14 {
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-secondary);
  }
  
  .font-regular-12-accent,
  .字体-强调12 {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-primary);
  }
  
  .font-regular-12,
  .字体-正文12 {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-primary);
  }
  
  .font-regular-12-secondary,
  .字体-正文弱化12 {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-secondary);
  }
  
  .font-regular-12-muted,
  .字体-提示12 {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-muted);
  }
  
  .font-regular-12-disabled,
  .字体-禁用12 {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-disabled);
  }
  
  .font-regular-10-accent,
  .字体-提示10 {
    font-weight: 400;
    font-size: 10px;
    color: var(--color-primary);
  }
  
  
  /* 灰色占位块（默认 80x56，可通过 CSS 变量覆写尺寸） */
  .灰色占位块,
  .gray-placeholder {
    display: inline-block;
    width: var(--placeholder-width, 80px);
    height: var(--placeholder-height, 56px);
    background: #E0E0E0;
    border-radius: 6px;
  }

  /* 按钮颜色样式 */
  .btn-blue {
    background-color: var(--color-button-blue);
    color: var(--color-white);
  }

  .btn-blue:hover,
  .btn-blue:focus {
    background-color: #0069d9;
    color: var(--color-white);
  }

  .btn-green {
    background-color: var(--color-button-green);
    color: var(--color-white);
  }

  .btn-green:hover,
  .btn-green:focus {
    background-color: #1e7b34;
    color: var(--color-white);
  }