:root {
  --ef-bg: #f3ebe0;
  --ef-bg1: #e5ddd0;
  --ef-bg2: #ede5da;
  --ef-border: #d8cfc4;
  --ef-bg-dark: #ddd5ca;
  --ef-fg: #5c6a72;
  --ef-fg-rgb: 92, 106, 114;
  --ef-fg-dim: #7a8a82;
  --ef-fg-muted: #a6b0a0;
  --ef-green: #8da101;
  --ef-blue: #3a94c5;
  --ef-aqua: #35a77c;
  --ef-purple: #8b5f7a;
  --ef-red: #f85552;
  --ef-yellow: #7a6128;
  --ef-orange: #c45d26;
  --ef-on-accent: #f3ebe0;
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --ef-bg: #323d43;
    --ef-bg1: #3c474d;
    --ef-bg2: #3a444a;
    --ef-border: #49555b;
    --ef-bg-dark: #2b353a;
    --ef-fg: #d3c6aa;
    --ef-fg-rgb: 211, 198, 170;
    --ef-fg-dim: #bfb59c;
    --ef-fg-muted: #859289;
    --ef-green: #a7c080;
    --ef-blue: #7fbbb3;
    --ef-aqua: #83c092;
    --ef-purple: #d699b6;
    --ef-red: #e67e80;
    --ef-yellow: #dbbc7f;
    --ef-orange: #e69875;
    --ef-on-accent: #2b353a;
  }
}

:root.theme-dark,
:root.theme-black {
  --ef-bg: #323d43;
  --ef-bg1: #3c474d;
  --ef-bg2: #3a444a;
  --ef-border: #49555b;
  --ef-bg-dark: #2b353a;
  --ef-fg: #d3c6aa;
  --ef-fg-rgb: 211, 198, 170;
  --ef-fg-dim: #bfb59c;
  --ef-fg-muted: #859289;
  --ef-green: #a7c080;
  --ef-blue: #7fbbb3;
  --ef-aqua: #83c092;
  --ef-purple: #d699b6;
  --ef-red: #e67e80;
  --ef-yellow: #dbbc7f;
  --ef-orange: #e69875;
  --ef-on-accent: #2b353a;
}

:root.theme-black {
  --ef-bg: #2b353a;
  --ef-bg-dark: #232a2e;
}

:root,
:root.theme-auto,
:root.theme-dark,
:root.theme-black {
  --color-base-font: var(--ef-fg);
  --color-base-font-rgb: var(--ef-fg-rgb);
  --color-base-background: var(--ef-bg);
  --color-base-background-mobile: var(--ef-bg);
  --color-url-font: var(--ef-blue);
  --color-url-visited-font: var(--ef-purple);
  --color-header-background: var(--ef-bg-dark);
  --color-header-border: var(--ef-border);
  --color-footer-background: var(--ef-bg2);
  --color-footer-border: var(--ef-border);
  --color-sidebar-border: var(--ef-border);
  --color-sidebar-font: var(--ef-fg);
  --color-sidebar-background: var(--ef-bg2);
  --color-backtotop-font: var(--ef-fg);
  --color-backtotop-border: var(--ef-border);
  --color-backtotop-background: var(--ef-bg1);
  --color-btn-background: var(--ef-green);
  --color-btn-font: var(--ef-on-accent);
  --color-show-btn-background: var(--ef-bg1);
  --color-show-btn-font: var(--ef-fg);
  --color-search-border: var(--ef-border);
  --color-search-shadow: none;
  --color-search-background: var(--ef-bg1);
  --color-search-font: var(--ef-fg);
  --color-search-background-hover: var(--ef-green);
  --color-error: var(--ef-red);
  --color-error-background: var(--ef-bg1);
  --color-warning: var(--ef-yellow);
  --color-warning-background: var(--ef-bg1);
  --color-success: var(--ef-green);
  --color-success-background: var(--ef-bg1);
  --color-categories-item-selected-font: var(--ef-green);
  --color-categories-item-border-selected: var(--ef-green);
  --color-autocomplete-font: var(--ef-fg);
  --color-autocomplete-border: var(--ef-border);
  --color-autocomplete-shadow: none;
  --color-autocomplete-background: var(--ef-bg1);
  --color-autocomplete-background-hover: var(--ef-bg-dark);
  --color-answer-font: var(--ef-fg);
  --color-answer-background: var(--ef-bg2);
  --color-result-keyvalue-col-table: var(--ef-bg1);
  --color-result-keyvalue-odd: var(--ef-bg1);
  --color-result-keyvalue-even: var(--ef-bg2);
  --color-result-background: var(--ef-bg);
  --color-result-border: var(--ef-border);
  --color-result-url-font: var(--ef-fg-dim);
  --color-result-vim-selected: var(--ef-bg1);
  --color-result-vim-arrow: var(--ef-green);
  --color-result-description-highlight-font: var(--ef-orange);
  --color-result-link-font: var(--ef-green);
  --color-result-link-font-highlight: var(--ef-green);
  --color-result-link-visited-font: var(--ef-purple);
  --color-result-publishdate-font: var(--ef-fg-muted);
  --color-result-engines-font: var(--ef-fg-muted);
  --color-result-search-url-border: var(--ef-border);
  --color-result-search-url-font: var(--ef-fg);
  --color-result-image-span-font: var(--ef-fg);
  --color-result-image-span-font-selected: var(--ef-on-accent);
  --color-result-image-background: var(--ef-bg1);
  --color-result-detail-background: var(--ef-bg-dark);
  --color-result-detail-link: var(--ef-blue);
  --color-settings-tr-hover: var(--ef-bg1);
  --color-settings-engine-description-font: var(--ef-fg-dim);
  --color-settings-table-group-background: var(--ef-bg2);
  --color-toolkit-badge-font: var(--ef-fg);
  --color-toolkit-badge-background: var(--ef-bg1);
  --color-toolkit-kbd-font: var(--ef-bg);
  --color-toolkit-kbd-background: var(--ef-fg);
  --color-toolkit-dialog-border: var(--ef-border);
  --color-toolkit-dialog-background: var(--ef-bg2);
  --color-toolkit-tabs-label-border: var(--ef-bg);
  --color-toolkit-tabs-section-border: var(--ef-border);
  --color-toolkit-select-background: var(--ef-bg1);
  --color-toolkit-select-border: var(--ef-border);
  --color-toolkit-select-background-hover: var(--ef-bg-dark);
  --color-toolkit-input-text-font: var(--ef-fg);
  --color-toolkit-checkbox-onoff-off-background: var(--ef-bg1);
  --color-toolkit-checkbox-onoff-on-background: var(--ef-bg1);
  --color-toolkit-checkbox-onoff-on-mark-background: var(--ef-green);
  --color-toolkit-checkbox-onoff-on-mark-color: var(--ef-on-accent);
  --color-toolkit-checkbox-onoff-off-mark-background: var(--ef-fg-muted);
  --color-toolkit-checkbox-onoff-off-mark-color: var(--ef-bg);
  --color-toolkit-checkbox-label-background: var(--ef-bg1);
  --color-toolkit-checkbox-label-border: var(--ef-border);
  --color-toolkit-checkbox-input-border: var(--ef-green);
  --color-toolkit-engine-tooltip-border: var(--ef-border);
  --color-toolkit-engine-tooltip-background: var(--ef-bg2);
  --color-doc-code: var(--ef-fg);
  --color-doc-code-background: var(--ef-bg1);
  --color-bar-chart-primary: var(--ef-green);
  --color-bar-chart-secondary: var(--ef-yellow);
  --color-loading-indicator-gap: var(--ef-bg);
  --color-line-number: var(--ef-fg-muted);
  --color-favicon-background-color: var(--ef-bg1);
  --color-favicon-border-color: var(--ef-border);
}

::selection {
  background: var(--ef-green);
  color: var(--ef-on-accent);
}

#search_logo svg,
#search_logo img,
.index .title {
  filter: hue-rotate(250deg) saturate(0.5);
}

#search-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#search-progress.active {
  opacity: 1;
}

#search-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--ef-green);
  border-radius: 0 2px 2px 0;
  animation: search-progress 1.1s ease-in-out infinite;
}

@keyframes search-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #search-progress::before {
    width: 100%;
    animation: none;
  }
}