:root {
  --scalar-header-height: 50px;
  --scalar-sidebar-width: 280px;
  --scalar-container-width: 720px;
  --scalar-toc-width: 240px;
  --scalar-card-icon-width: 40px;
  --scalar-card-icon-height: 40px;
  --scalar-card-icon-diameter: 20px;
  --scalar-card-padding: 16px;
  --scalar-card-inter-element-gap: 4px;
  --scalar-toc-indent-unit: 16px;
  --scalar-row-gap: 16px;
  --scalar-extra-bold: 700;
  --scalar-heading-spacing: 44px;
  --scalar-block-spacing: 12px;
  --scalar-font-size-1: 26px;
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
  --scalar-radius-xl: 16px;
}

:root {
  --scalar-text-decoration: none;
  --scalar-text-decoration-hover: underline;
}

.light-mode {
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f7f9fc;
  --scalar-background-3: #edf1f7;
  --scalar-background-4: rgba(0, 0, 0, 0.06);
  --scalar-color-1: #1a1f36;
  --scalar-color-2: #4a5568;
  --scalar-color-3: #718096;
  --scalar-color-accent: #3b5bdb;
  --scalar-color-accent-2: #364fc7;
  --scalar-border-color: #e2e8f0;
  --scalar-button-1: #3b5bdb;
  --scalar-button-1-color: #ffffff;
  --scalar-button-1-hover: #364fc7;
  --scalar-scrollbar-color: rgba(0, 0, 0, 0.12);
  --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.2);
  --scalar-sidebar-background-1: #f7f9fc;
  --scalar-sidebar-color-1: #1a1f36;
  --scalar-sidebar-color-2: #4a5568;
  --scalar-sidebar-color-active: #3b5bdb;
  --scalar-sidebar-border-color: #e2e8f0;
  --scalar-sidebar-search-background: #ffffff;
  --scalar-sidebar-search-border-color: #e2e8f0;
  --scalar-sidebar-search-color: #1a1f36;
  --scalar-header-background-1: #ffffff;
  --scalar-header-border-color: #e2e8f0;
  --scalar-header-color-1: #1a1f36;
  --scalar-header-color-2: #4a5568;
  --scalar-header-color-active: #3b5bdb;
  --scalar-code-language-color-supersede: #3b5bdb;
  --scalar-code-language-background-supersede: #edf2ff;
}

.dark-mode {
  --scalar-background-1: #0f1117;
  --scalar-background-2: #161925;
  --scalar-background-3: #1e2235;
  --scalar-background-4: rgba(255, 255, 255, 0.06);
  --scalar-color-1: #e8ecf4;
  --scalar-color-2: #a0aec0;
  --scalar-color-3: #718096;
  --scalar-color-accent: #748ffc;
  --scalar-color-accent-2: #91a7ff;
  --scalar-border-color: #2d3748;
  --scalar-button-1: #748ffc;
  --scalar-button-1-color: #0f1117;
  --scalar-button-1-hover: #91a7ff;
  --scalar-scrollbar-color: rgba(255, 255, 255, 0.12);
  --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.2);
  --scalar-sidebar-background-1: #0f1117;
  --scalar-sidebar-color-1: #e8ecf4;
  --scalar-sidebar-color-2: #a0aec0;
  --scalar-sidebar-color-active: #748ffc;
  --scalar-sidebar-border-color: #2d3748;
  --scalar-sidebar-search-background: #161925;
  --scalar-sidebar-search-border-color: #2d3748;
  --scalar-sidebar-search-color: #e8ecf4;
  --scalar-header-background-1: #0f1117;
  --scalar-header-border-color: #2d3748;
  --scalar-header-color-1: #e8ecf4;
  --scalar-header-color-2: #a0aec0;
  --scalar-header-color-active: #748ffc;
  --scalar-code-language-color-supersede: #748ffc;
  --scalar-code-language-background-supersede: #1e2235;
}