// css variables
:root {
  --text-color: var(--el-text-color-primary);
  --text-color-light: var(--el-text-color-regular);
  --text-color-lighter: var(--el-text-color-secondary);

  --brand-color: var(--el-color-primary);
  --brand-color-light: var(--el-color-primary-light-1);
  --bg-brand-color: var(--el-color-primary-light-9);
  --bg-color: var(--el-color-white);
  --bg-color-soft: #fafafa;
  --bg-color-mute: #f2f2f2;
  --border-color: var(--el-border-color-base);
  --border-color-light: var(--el-border-color-lighter);

  --font-family: Inter, Roboto, Oxygen, Fira Sans, Helvetica Neue, sans-serif;

  --font-family-mono: 'JetBrains Mono', source-code-pro, Menlo, Monaco, Consolas,
    'Courier New', monospace;

  // info
  --success-color: var(--el-color-success);
  --warning-color: var(--el-color-warning);
  --danger-color: var(--el-color-danger);

  // header vars
  --header-height: 55px;
  --nav-height: 55px; // alias of --header-height
  --sidebar-width-md: 18rem;
  --sidebar-width-sm: 16rem;
  --sidebar-width-xs: 20rem;
  --content-min-width: 16rem;
  --content-max-width: 48rem;

  --nav-z-index: 20;
  --sub-nav-z-index: 10;
  --sidebar-z-index: 40;
  --overlay-z-index: 30;
  // --dropdown-z-index: 22;

  // code block vars

  --code-bg-color: var(--el-background-color-base);
  --code-text-color: var(--text-color);
  --code-font-family: var(--font-family-mono);

  // doc search vars
  --docsearch-primary-color: var(--brand-color);
  --docsearch-searchbox-background: var(--el-background-color-base);
}

:root {
  --app-max-width: 1376px;
}

.dark {
  --text-color: #e0e0e0;
  --text-color-light: #a0a0a0;
  --text-color-lighter: #6c6c6c;

  --border-color: #434343;
  --border-color-light: #979797;

  --bg-color: #121212;
  --bg-color-soft: #383838;
  --bg-color-mute: #2c2c2c;
}

// SCSS variables
// breakpoints
$breakpoint-xxl: 1440px !default;
$breakpoint-xlg: 1280px !default;
$breakpoint-lg: 960px !default;
$breakpoint-md: 768px !default;
$breakpoint-sm: 480px !default;