// css 前缀
$biz-css-prefix: '.fd-layout-';
// 常用背景
$backgroundTypes: 'lining', 'surface', 'transparent';
// 最大支持列数： 24
$maxNumberOfColumns: 24;
// 列枚举
$columnNumEnum: 1, 2, 4, 8, 12, 16, 24;
// 尺寸
$sizes: 'small', 'medium', 'large';
// 字体类型
$fontTypes: h1, h2, h3, h4, h5, h6, body1, body2, caption, overline;

//  css var 主题中的变量
:root,
:host {
  /* 段落 & 字体 */
  --p-h1-font-size: var(--font-size-display-3);
  --p-h1-icon-size: var(--font-size-display-3);
  --p-h1-font-weight: var(--font-weight-3);
  --p-h1-line-height: var(--font-lineheight-2);

  --p-h2-font-size: var(--font-size-display-2);
  --p-h2-icon-size: var(--font-size-display-2);
  --p-h2-font-weight: var(--font-weight-3);
  --p-h2-line-height: var(--font-lineheight-2);

  --p-h3-font-size: var(--font-size-display-1);
  --p-h3-icon-size: var(--font-size-display-1);
  --p-h3-font-weight: var(--font-weight-3);
  --p-h3-line-height: var(--font-lineheight-2);

  --p-h4-font-size: var(--font-size-headline);
  --p-h4-icon-size: var(--font-size-headline);
  --p-h4-font-weight: var(--font-weight-semi-bold);
  --p-h4-line-height: var(--font-lineheight-1);

  --p-h5-font-size: var(--font-size-title);
  --p-h5-icon-size: var(--font-size-title);
  --p-h5-font-weight: var(--font-weight-medium);
  --p-h5-line-height: var(--font-lineheight-1);

  --p-h6-font-size: var(--font-size-subhead);
  --p-h6-icon-size: var(--font-size-subhead);
  --p-h6-font-weight: var(--font-weight-medium);
  --p-h6-line-height: var(--font-lineheight-1);

  --p-body1-font-size: var(--font-size-body-2);
  --p-body1-icon-size: var(--font-size-body-2);
  --p-body1-font-weight: var(--font-weight-2);
  --p-body1-line-height: var(--font-lineheight-1);

  --p-body2-font-size: var(--font-size-body-1);
  --p-body2-icon-size: var(--font-size-body-1);
  --p-body2-font-weight: var(--font-weight-2);
  --p-body2-line-height: var(--font-lineheight-1);

  --p-caption-font-size: var(--font-size-caption);
  --p-caption-icon-size: var(--font-size-caption);
  --p-caption-font-weight: var(--font-weight-light);
  --p-caption-line-height: var(--font-lineheight-1);

  --p-overline-font-size: var(--font-size-caption);
  --p-overline-icon-size: var(--font-size-caption);
  --p-overline-font-weight: var(--font-weight-thin);
  --p-overline-line-height: var(--font-lineheight-1);

  /*
    @desc color-surface
    @namespace style/common
    @semantic 前景色
   */
  --color-transparent: transparent;
  /*
    @desc color-surface
    @namespace style/common
    @semantic 前景色
   */
  --color-surface: #fff;
  /*
    @desc color-lining
    @namespace style/common
    @semantic 衬色
   */
  --color-lining: #f0f0f0;

  // =================== 大布局 ==============

  /* page */
  /*
    @desc padding-lr
    @namespace style/common
    @semantic 页面左右内边距
   */
  --page-padding-lr: var(--s-5);
  /*
    @desc padding-tb
    @namespace style/common
    @semantic 页面上下内边距
   */
  --page-padding-tb: var(--s-5);

  /*
    @desc header-padding-lr
    @namespace size/header
    @semantic header 左右内边距
   */
  --page-header-padding-lr: var(--page-padding-lr);
  /*
    @desc header-padding-tb
    @namespace size/header
    @semantic header 上下内边距
   */
  --page-header-padding-top: var(--page-padding-tb);
  /*
    @desc header-padding-tb
    @namespace size/header
    @semantic header 底部内边距
   */
  --page-header-padding-bottom: var(--page-block-padding-tb);

  /*
    @desc header-dividing-line-color
    @namespace style/header
    @semantic header 分割线颜色
   */
  --page-header-divider-color: var(--color-line1-2);

  /*
    @desc footer-padding-lr
    @namespace size/footer
    @semantic footer左右内边距
   */
  --page-footer-padding-lr: var(--page-padding-lr);
  /*
    @desc footer-padding-tb
    @namespace size/footer
    @semantic footer上下内边距
   */
  --page-footer-padding-bottom: var(--page-padding-tb);
  /*
    @desc footer-padding-top
    @namespace size/footer
    @semantic footer顶部内边距
   */
  --page-footer-padding-top: var(--page-block-padding-tb);

  /*
    @desc block-corner
    @namespace size/block
    @semantic 区块圆角尺寸
   */
  --page-block-corner: var(--corner-2);
  /*
    @desc block-padding-lr
    @namespace size/block
    @semantic 区块左右内边距
   */
  --page-block-padding-lr: var(--s-4);
  /*
    @desc block-padding-tb
    @namespace size/block
    @semantic 区块上下内边距
   */
  --page-block-padding-tb: var(--s-4);
  /**
    @desc block-padding-content
    @namespace size/block
    @semantic 区块标题与内容部分的间距
   */
  --page-block-padding-content: var(--page-block-padding-tb);

  /*
   @desc section-title-font-color
   @namespace style/section
   @semantic 章节标题颜色
  */
  --page-section-title-font-color: var(--color-text1-4);
  /*
    @desc section-extra-font-color
    @namespace style/section
    @semantic 章节附加内容文本颜色
   */
  --page-section-extra-font-color: var(--color-text1-2);

  /*
    @desc block-title-font-color
    @namespace style/block
    @semantic 区块标题颜色
   */
  --page-block-title-font-color: var(--color-text1-4);
  /*
    @desc block-extra-font-color
    @namespace style/block
    @semantic 区块附加内容文本颜色
   */
  --page-block-extra-font-color: var(--color-text1-2);

  /*
      @desc section-gap
      @namespace size/gap
      @semantic 章间隙
     */
  --page-section-gap: var(--s-5);
  /*
   @desc block-gap
   @namespace size/gap
   @semantic 区块间隙
  */
  --page-block-gap: var(--s-4);
  /*
   @desc block-border-width
   @namespace style/block
   @semantic 区块边框宽度
  */
  --page-block-border-width: var(--line-1);
  /*
   @desc block-border-color
   @namespace style/block
   @semantic 区块边框颜色
  */
  --page-block-border-color: var(--color-line1-2);

  //  =================== 小布局 ==============

  /*
    @desc grid-gap
    @namespace size/gap
    @semantic 小布局间隙
   */
  --page-grid-gap: var(--s-2);

  /*
   * 段落元素的左右间距
   */
  --page-p-small-spacing: var(--s-1);
  --page-p-medium-spacing: var(--s-2);
  --page-p-large-spacing: var(--s-4);
  /*
   * 段落元素的上下间距
   */
  --page-p-el-margin: var(--s-1);
  /*
    @desc p-font-color
    @namespace style/p
    @semantic 段落默认字体色
   */
  --page-p-font-color: var(--color-text1-4);

  /**
    预置字颜色
   */
  --page-h1-font-color: var(--color-text1-4);
  --page-h2-font-color: var(--color-text1-4);
  --page-h3-font-color: var(--color-text1-4);
  --page-h4-font-color: var(--color-text1-4);
  --page-h5-font-color: var(--color-text1-4);
  --page-h6-font-color: var(--color-text1-4);
  --page-body1-font-color: var(--color-text1-4);
  --page-body2-font-color: var(--color-text1-3);
  --page-caption-font-color: var(--color-text1-3);
  --page-overline-font-color: var(--color-text1-3);

  /*
    @desc small-space-size
    @namespace size/space
    @semantic 默认小号间距尺寸
  */
  --page-space-small-size: var(--s-2);
  /*
    @desc medium-space-size
    @namespace size/space
    @semantic 默认中号间距尺寸
  */
  --page-space-medium-size: var(--s-4);
  /*
    @desc large-space-size
    @namespace size/space
    @semantic 默认大号间距尺寸
  */
  --page-space-large-size: var(--s-6);
}