:root {
  /* Height of the sticky top header bar. */
  --scalar-header-height: 60px;
  /* Top offset of the content top row (breadcrumb, Copy Page, "On This Page"),
     measured from the bottom of the header. */
  --scalar-content-top-spacing: 60px;
  /* Width of the left navigation sidebar column. */
  --scalar-sidebar-width: 250px;
  /* Max width of the main content (reading) column. */
  --scalar-container-width: 680px;
  /* Horizontal padding on each side of the content column (12px on mobile). */
  --scalar-container-gutter: 50px;

  /* Size of a card's small title/inline icon. */
  --scalar-card-icon-size: 20px;
  /* Size of a card's large leading/above icon. */
  --scalar-card-icon-size-xl: 32px;
  /* Inner padding of a card. */
  --scalar-card-padding: 16px;
  /* Gap between a card's icon, title, and text. */
  --scalar-card-inter-element-gap: 6px;
  /* Unit spacing for ToC indentation. */
  --scalar-toc-indent-unit: 16px;

  /* Gap between columns (and between stacked rows) in a row/grid block. */
  --scalar-row-gap: 16px;

  /* Extra-bold font weight (e.g. step markers). */
  --scalar-extra-bold: 700;

  /** Spacing between headings */
  --scalar-heading-spacing: 44px;

  /** Spacing between text nodes */
  --scalar-block-spacing: 12px;

  /* Largest step of the font-size scale (large UI text / headings). */
  --scalar-font-size-1: 24px;
  /* Width of the right "On This Page" table-of-contents column. */
  --scalar-toc-width: 280px;
}

@media (max-width: 1000px) {
  :root {
    --scalar-content-top-spacing: 24px;
    --scalar-container-gutter: 12px;
  }
}

/* basic theme */
.light-mode {
  --scalar-background-1: #fff;
  --scalar-background-2: #f5f6f8;
  --scalar-background-3: #eceef1;

  --scalar-color-1: #1b1b1b;
  --scalar-color-2: #757575;
  --scalar-color-3: #8e8e8e;

  --scalar-color-accent: #5469d4;
  --scalar-background-accent: #5469d41f;

  --scalar-border-color: rgba(215, 215, 206, 0.68);
}
.dark-mode {
  --scalar-background-1: #0c0f1a;
  --scalar-background-2: #15192b;
  --scalar-background-3: #0d1c33;

  --scalar-color-1: #fafafa;
  --scalar-color-2: #c9ced8;
  --scalar-color-3: #8c99ad;

  --scalar-color-accent: #5469d4;
  --scalar-background-accent: #5469d41f;

  --scalar-border-color: #252d44;
}
/* Document Sidebar */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-border-color: var(--scalar-border-color);

  --scalar-sidebar-item-hover-color: currentColor;
  --scalar-sidebar-item-hover-background: var(--scalar-background-3);

  --scalar-sidebar-item-active-background: var(--scalar-background-accent);
  --scalar-sidebar-color-active: var(--scalar-color-accent);

  --scalar-sidebar-search-background: var(--scalar-background-1);
  --scalar-sidebar-search-color: var(--scalar-color-3);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
}

/* advanced */
.light-mode {
  --scalar-color-green: #17803d;
  --scalar-color-red: #e10909;
  --scalar-color-yellow: #edbe20;
  --scalar-color-blue: #1763a6;
  --scalar-color-orange: #e25b09;
  --scalar-color-purple: #5c3993;

  --scalar-button-1: rgba(0, 0, 0, 1);
  --scalar-button-1-hover: rgba(0, 0, 0, 0.8);
  --scalar-button-1-color: #fff;
}
.dark-mode {
  --scalar-color-green: #30a159;
  --scalar-color-red: #dc1b19;
  --scalar-color-yellow: #eec644;
  --scalar-color-blue: #2b7abf;
  --scalar-color-orange: #f07528;
  --scalar-color-purple: #7a59b1;

  --scalar-button-1: rgba(255, 255, 255, 1);
  --scalar-button-1-hover: rgba(255, 255, 255, 0.9);
  --scalar-button-1-color: black;
}
.light-mode *::selection {
  background-color: color-mix(in srgb, var(--scalar-color-accent), transparent 70%);
}
.dark-mode *::selection {
  background-color: color-mix(in srgb, var(--scalar-color-accent), transparent 50%);
}

/* document header */
.light-mode .t-doc__header,
.dark-mode .t-doc__header {
  --scalar-header-background-1: var(--scalar-background-1);
  --scalar-header-border-color: var(--scalar-border-color);
  --scalar-header-color-1: var(--scalar-color-1);
  --scalar-header-color-2: var(--scalar-color-2);
  --scalar-header-call-to-action-color: var(--scalar-button-1);
}