/* Dracula for SearXNG — default theme since 2026-10-07 (Catppuccin is the alternative).
   Served by NPMplus; browsers without the sx_theme cookie get it (map default in http_top.conf),
   /theme/catppuccin and /theme/dracula switch per browser. Dracula when dark, Alucard (Dracula's official light
   variant) when light, Dracula "Background Darker" for SearXNG's black style. Accent purple, links cyan,
   visited links pink. Palette: https://draculatheme.com/spec — the --ctp-* slot names are shared with
   catppuccin.css so both files use the identical SearXNG variable mapping below. */

/* ---- palettes ---------------------------------------------------------------------------- */

:root.theme-light,
:root.theme-auto {
  color-scheme: light;
  --ctp-rosewater: #a3144d;
  --ctp-flamingo: #a3144d;
  --ctp-pink: #a3144d;
  --ctp-mauve: #644ac9;
  --ctp-red: #cb3a2a;
  --ctp-maroon: #cb3a2a;
  --ctp-peach: #a34d14;
  --ctp-yellow: #846e15;
  --ctp-green: #14710a;
  --ctp-teal: #036a96;
  --ctp-sky: #036a96;
  --ctp-sapphire: #036a96;
  --ctp-blue: #036a96;
  --ctp-lavender: #a3144d;
  --ctp-text: #1f1f1f;
  --ctp-subtext1: #3b3a33;
  --ctp-subtext0: #6c664b;
  --ctp-overlay2: #6c664b;
  --ctp-overlay1: #6c664b;
  --ctp-overlay0: #6c664b;
  --ctp-surface2: #bcbab3;
  --ctp-surface1: #ceccc0;
  --ctp-surface0: #dedccf;
  --ctp-base: #fffbeb;
  --ctp-mantle: #ece9df;
  --ctp-crust: #dedccf;
  --ctp-text-rgb: 31, 31, 31;
}

:root.theme-dark,
:root.theme-black {
  color-scheme: dark;
  --ctp-rosewater: #ff79c6;
  --ctp-flamingo: #ff79c6;
  --ctp-pink: #ff79c6;
  --ctp-mauve: #bd93f9;
  --ctp-red: #ff5555;
  --ctp-maroon: #ff5555;
  --ctp-peach: #ffb86c;
  --ctp-yellow: #f1fa8c;
  --ctp-green: #50fa7b;
  --ctp-teal: #8be9fd;
  --ctp-sky: #8be9fd;
  --ctp-sapphire: #8be9fd;
  --ctp-blue: #8be9fd;
  --ctp-lavender: #ff79c6;
  --ctp-text: #f8f8f2;
  --ctp-subtext1: #e0e0da;
  --ctp-subtext0: #b0b6cf;
  --ctp-overlay2: #6272a4;
  --ctp-overlay1: #6272a4;
  --ctp-overlay0: #6272a4;
  --ctp-surface2: #44475a;
  --ctp-surface1: #424450;
  --ctp-surface0: #343746;
  --ctp-base: #282a36;
  --ctp-mantle: #21222c;
  --ctp-crust: #191a21;
  --ctp-text-rgb: 248, 248, 242;
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    color-scheme: dark;
    --ctp-rosewater: #ff79c6;
    --ctp-flamingo: #ff79c6;
    --ctp-pink: #ff79c6;
    --ctp-mauve: #bd93f9;
    --ctp-red: #ff5555;
    --ctp-maroon: #ff5555;
    --ctp-peach: #ffb86c;
    --ctp-yellow: #f1fa8c;
    --ctp-green: #50fa7b;
    --ctp-teal: #8be9fd;
    --ctp-sky: #8be9fd;
    --ctp-sapphire: #8be9fd;
    --ctp-blue: #8be9fd;
    --ctp-lavender: #ff79c6;
    --ctp-text: #f8f8f2;
    --ctp-subtext1: #e0e0da;
    --ctp-subtext0: #b0b6cf;
    --ctp-overlay2: #6272a4;
    --ctp-overlay1: #6272a4;
    --ctp-overlay0: #6272a4;
    --ctp-surface2: #44475a;
    --ctp-surface1: #424450;
    --ctp-surface0: #343746;
    --ctp-base: #282a36;
    --ctp-mantle: #21222c;
    --ctp-crust: #191a21;
    --ctp-text-rgb: 248, 248, 242;
  }
}

/* "black" = Dracula Background Darker as the page */
:root.theme-black {
  --ctp-base: #191a21;
  --ctp-mantle: #1e1f28;
  --ctp-crust: #111218;
}

/* ---- SearXNG variables -------------------------------------------------------------------- */

:root.theme-light,
:root.theme-dark,
:root.theme-black,
:root.theme-auto {
  --ctp-accent: var(--ctp-mauve);

  --color-base-font: var(--ctp-text);
  --color-base-font-rgb: var(--ctp-text-rgb);
  --color-base-background: var(--ctp-base);
  --color-base-background-mobile: var(--ctp-base);
  --color-url-font: var(--ctp-blue);
  --color-url-visited-font: var(--ctp-lavender);
  --color-header-background: var(--ctp-mantle);
  --color-header-border: var(--ctp-mantle);
  --color-footer-background: var(--ctp-mantle);
  --color-footer-border: var(--ctp-mantle);
  --color-sidebar-border: var(--ctp-base);
  --color-sidebar-font: var(--ctp-text);
  --color-sidebar-background: var(--ctp-base);
  --color-backtotop-font: var(--ctp-subtext1);
  --color-backtotop-border: var(--ctp-surface0);
  --color-backtotop-background: var(--ctp-surface0);
  --color-btn-background: var(--ctp-accent);
  --color-btn-font: var(--ctp-base);
  --color-show-btn-background: var(--ctp-accent);
  --color-show-btn-font: var(--ctp-base);
  --color-search-border: var(--ctp-surface0);
  --color-search-shadow: 0 2px 8px var(--ctp-crust);
  --color-search-background: var(--ctp-surface0);
  --color-search-font: var(--ctp-text);
  --color-search-background-hover: var(--ctp-accent);
  --color-error: var(--ctp-red);
  --color-error-background: var(--ctp-surface0);
  --color-warning: var(--ctp-yellow);
  --color-warning-background: var(--ctp-surface0);
  --color-success: var(--ctp-green);
  --color-success-background: var(--ctp-surface0);
  --color-categories-item-selected-font: var(--ctp-text);
  --color-categories-item-border-selected: var(--ctp-accent);
  --color-autocomplete-font: var(--ctp-subtext1);
  --color-autocomplete-border: var(--ctp-surface0);
  --color-autocomplete-shadow: 0 2px 8px var(--ctp-crust);
  --color-autocomplete-background: var(--ctp-surface0);
  --color-autocomplete-background-hover: var(--ctp-surface1);
  --color-answer-font: var(--ctp-text);
  --color-answer-background: var(--ctp-mantle);
  --color-result-background: var(--ctp-mantle);
  --color-result-border: var(--ctp-base);
  --color-result-url-font: var(--ctp-subtext1);
  --color-result-vim-selected: var(--ctp-surface0);
  --color-result-vim-arrow: var(--ctp-accent);
  --color-result-description-highlight-font: var(--ctp-text);
  --color-result-link-font: var(--ctp-blue);
  --color-result-link-font-highlight: var(--ctp-blue);
  --color-result-link-visited-font: var(--ctp-lavender);
  --color-result-publishdate-font: var(--ctp-overlay1);
  --color-result-engines-font: var(--ctp-overlay1);
  --color-result-search-url-border: var(--ctp-surface2);
  --color-result-search-url-font: var(--ctp-text);
  --color-result-detail-font: var(--ctp-text);
  --color-result-detail-label-font: var(--ctp-subtext0);
  --color-result-detail-background: var(--ctp-base);
  --color-result-detail-hr: var(--ctp-base);
  --color-result-detail-link: var(--ctp-blue);
  --color-result-detail-loader-border: color-mix(in srgb, var(--ctp-text) 20%, transparent);
  --color-result-detail-loader-borderleft: var(--ctp-crust);
  --color-result-image-span-font: var(--ctp-text);
  --color-result-image-span-font-selected: var(--ctp-base);
  --color-result-image-background: var(--ctp-mantle);
  --color-result-keyvalue-table: var(--ctp-mantle);
  --color-result-keyvalue-col-table: var(--ctp-mantle);
  --color-result-keyvalue-odd: var(--ctp-mantle);
  --color-result-keyvalue-even: var(--ctp-surface0);
  --color-image-resolution-background: color-mix(in srgb, var(--ctp-crust) 75%, transparent);
  --color-image-resolution-font: var(--ctp-text);
  --color-favicon-background-color: var(--ctp-surface0);
  --color-favicon-border-color: var(--ctp-surface1);
  --color-line-number: var(--ctp-overlay0);
  --color-loading-indicator: color-mix(in srgb, var(--ctp-accent) 25%, transparent);
  --color-loading-indicator-gap: var(--ctp-base);
  --color-bar-chart-primary: var(--ctp-sapphire);
  --color-bar-chart-secondary: var(--ctp-peach);
  --color-settings-tr-hover: var(--ctp-surface0);
  --color-settings-engine-description-font: var(--ctp-text);
  --color-settings-engine-group-background: var(--ctp-surface0);
  --color-settings-table-group-background: var(--ctp-surface0);
  --color-settings-return-font: var(--ctp-base);
  --color-toolkit-badge-font: var(--ctp-text);
  --color-toolkit-badge-background: var(--ctp-surface0);
  --color-toolkit-kbd-font: var(--ctp-text);
  --color-toolkit-kbd-background: var(--ctp-mantle);
  --color-toolkit-dialog-border: var(--ctp-mantle);
  --color-toolkit-dialog-background: var(--ctp-mantle);
  --color-toolkit-tabs-label-border: var(--ctp-base);
  --color-toolkit-tabs-section-border: var(--ctp-base);
  --color-toolkit-select-background: var(--ctp-surface0);
  --color-toolkit-select-border: var(--ctp-surface0);
  --color-toolkit-select-background-hover: var(--ctp-surface1);
  --color-toolkit-input-text-font: var(--ctp-text);
  --color-toolkit-checkbox-onoff-off-background: var(--ctp-surface0);
  --color-toolkit-checkbox-onoff-on-background: var(--ctp-surface0);
  --color-toolkit-checkbox-onoff-on-mark-background: var(--ctp-green);
  --color-toolkit-checkbox-onoff-on-mark-color: var(--ctp-mantle);
  --color-toolkit-checkbox-onoff-off-mark-background: var(--ctp-red);
  --color-toolkit-checkbox-onoff-off-mark-color: var(--ctp-mantle);
  --color-toolkit-checkbox-label-background: var(--ctp-base);
  --color-toolkit-checkbox-label-border: var(--ctp-mantle);
  --color-toolkit-checkbox-input-border: var(--ctp-accent);
  --color-toolkit-engine-tooltip-border: var(--ctp-surface0);
  --color-toolkit-engine-tooltip-background: var(--ctp-surface0);
  --color-toolkit-loader-border: color-mix(in srgb, var(--ctp-text) 20%, transparent);
  --color-toolkit-loader-borderleft: var(--ctp-crust);
  --color-doc-code: var(--ctp-rosewater);
  --color-doc-code-background: var(--ctp-mantle);
}

/* ---- non-variable bits --------------------------------------------------------------------- */

::selection {
  background-color: color-mix(in srgb, var(--ctp-accent) 30%, transparent);
}

input::placeholder,
textarea::placeholder {
  color: var(--ctp-subtext0) !important;
}

html {
  accent-color: var(--ctp-accent);
  scrollbar-color: var(--ctp-surface1) var(--ctp-base);
}

/* small SearXNG logo in the results header */
#search_logo svg :not([fill="none"]) {
  fill: var(--ctp-accent);
}
#search_logo svg :not([stroke="none"]) {
  stroke: var(--ctp-accent);
}

/* SearXNG gives only the dark style a light dropdown arrow; black would get the dark one */
:root.theme-black select {
  background-image:url(data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E);
}