html {
  // header
  --header-bg-color: #394664;
  --header-bg-hover-color: #273352;
  --header-active-menu-bg-color: #273352;

  // sider
  --sider-dark-bg-color: #273352;
  --sider-dark-darken-bg-color: #273352;
  --sider-dark-lighten-bg-color: #273352;
}

@font-size-base: 14;

@white: #fff;

@black: #000;

@content-bg: #f4f7f9;

@text-color: var(--text-color);

@component-background: #fff;

@component-background-dark: fade(@black, 75%);

@layout-body-background: #f0f2f5;

@modal-mask-bg: fade(@black, 45%);

@disabled-color: fade(#000, 25%);

@background-color-light: hsv(0, 0, 98%);

@item-hover-bg: #f5f5f5;

// :export {
//   name: "less";
//   mainColor: @mainColor;
//   fontSize: @fontSize;
// }
@iconify-bg-color: #5551;

// =================================
// ==============Header=============
// =================================

@header-dark-bg-color: var(--header-bg-color);
@header-dark-bg-hover-color: var(--header-bg-hover-color);
@header-light-bg-hover-color: #f6f6f6;
@header-light-desc-color: #7c8087;
@header-light-bottom-border-color: #eee;
// top-menu
@top-menu-active-bg-color: var(--header-active-menu-bg-color);

// =================================
// ==============Menu============
// =================================

// let -menu
@sider-dark-bg-color: var(--sider-dark-bg-color);
@sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
@sider-dark-lighten-bg-color: var(--sider-dark-lighten-bg-color);

// trigger
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);