/*
 * Kanagawa theme for SearXNG
 * https://github.com/rebelot/kanagawa.nvim
 *
 * Variants:
 *   Wave  — dark  (Theme style: Dark / Black, or Auto when system is dark)
 *   Lotus — light (Theme style: Light, or Auto when system is light)
 *
 * NOTE: SearXNG defines its color variables on `:root.theme-*` selectors
 * (specificity 0,2,0). Overrides MUST use the same `:root.theme-*` form,
 * otherwise `html.theme-*` (0,1,1) loses the cascade regardless of load order.
 */

/* ─────────────────────────────────────────────
   Kanagawa Lotus  (light)
   Applies to: Theme style = Light, and the :root baseline
   ───────────────────────────────────────────── */
:root,
:root.theme-light {
  --color-base-font:                         #545464;
  --color-base-font-rgb:                     84, 84, 100;
  --color-base-background:                   #f2ecbc;
  --color-base-background-mobile:            #dcd5ac;

  --color-url-font:                          #4d699b;
  --color-url-visited-font:                  #624c83;

  --color-header-background:                 #e7dba0;
  --color-header-border:                     #c9cbd1;

  --color-footer-background:                 #e7dba0;
  --color-footer-border:                     #c9cbd1;

  --color-sidebar-border:                    #c9cbd1;
  --color-sidebar-font:                      #545464;
  --color-sidebar-background:                #f2ecbc;

  --color-backtotop-font:                    #545464;
  --color-backtotop-border:                  #c9cbd1;
  --color-backtotop-background:              #e7dba0;

  --color-btn-background:                    #4d699b;
  --color-btn-font:                          #f2ecbc;
  --color-show-btn-background:               #dcd5ac;
  --color-show-btn-font:                     #545464;

  --color-search-border:                     #b5cbd2;
  --color-search-shadow:                     0 2px 8px rgba(77, 105, 155, 0.20);
  --color-search-background:                 #f2ecbc;
  --color-search-font:                       #545464;
  --color-search-background-hover:           #c7d7e0;

  --color-error:                             #c84053;
  --color-error-background:                  #fde8eb;
  --color-warning:                           #cc6d00;
  --color-warning-background:                #fdf3e3;
  --color-success:                           #6f894e;
  --color-success-background:                #eaf3e3;

  --color-toolkit-badge-font:                #f2ecbc;
  --color-toolkit-badge-background:          #4d699b;
  --color-toolkit-checkbox-onoff-background: #b5cbd2;

  --color-autocomplete-font:                 #545464;
  --color-autocomplete-border:               #b5cbd2;
  --color-autocomplete-shadow:               0 2px 8px rgba(77, 105, 155, 0.20);
  --color-autocomplete-background:           #f2ecbc;
  --color-autocomplete-background-hover:     #c7d7e0;

  --color-answer-font:                       #545464;
  --color-answer-background:                 #dcd5ac;
  --color-answer-border:                     #c9cbd1;

  --color-result-background:                 #f2ecbc;
  --color-result-border:                     #c9cbd1;
  --color-result-url-font:                   #6f894e;
  --color-result-vim-selected:               #dcd5ac;
  --color-result-vim-arrow:                  #4d699b;
  --color-result-description-highlight-font: #77713f;
  --color-result-link-font:                  #4d699b;
  --color-result-link-font-highlight:        #5d57a3;
  --color-result-link-visited-font:          #766b90;
  --color-result-publishdate-font:           #8a8980;
  --color-result-engines-font:               #8a8980;

  --color-result-keyvalue-background:        #e7dba0;

  --color-categories-font:                   #545464;
  --color-categories-item-border-selected:   #4d699b;
}


/* ─────────────────────────────────────────────
   Kanagawa Wave  (dark, explicit)
   Applies to: Theme style = Dark or Black
   ───────────────────────────────────────────── */
:root.theme-dark,
:root.theme-black {
  --color-base-font:                         #DCD7BA;
  --color-base-font-rgb:                     220, 215, 186;
  --color-base-background:                   #1F1F28;
  --color-base-background-mobile:            #16161D;

  --color-url-font:                          #7E9CD8;
  --color-url-visited-font:                  #957FB8;

  --color-header-background:                 #16161D;
  --color-header-border:                     #54546D;

  --color-footer-background:                 #16161D;
  --color-footer-border:                     #54546D;

  --color-sidebar-border:                    #54546D;
  --color-sidebar-font:                      #DCD7BA;
  --color-sidebar-background:                #2A2A37;

  --color-backtotop-font:                    #DCD7BA;
  --color-backtotop-border:                  #54546D;
  --color-backtotop-background:              #2A2A37;

  --color-btn-background:                    #7E9CD8;
  --color-btn-font:                          #16161D;
  --color-show-btn-background:               #363646;
  --color-show-btn-font:                     #DCD7BA;

  --color-search-border:                     #54546D;
  --color-search-shadow:                     0 2px 8px rgba(126, 156, 216, 0.15);
  --color-search-background:                 #2A2A37;
  --color-search-font:                       #DCD7BA;
  --color-search-background-hover:           #2D4F67;

  --color-error:                             #E82424;
  --color-error-background:                  #43242B;
  --color-warning:                           #FF9E3B;
  --color-warning-background:                #49443C;
  --color-success:                           #76946A;
  --color-success-background:                #2B3328;

  --color-toolkit-badge-font:                #16161D;
  --color-toolkit-badge-background:          #7E9CD8;
  --color-toolkit-checkbox-onoff-background: #363646;

  --color-autocomplete-font:                 #DCD7BA;
  --color-autocomplete-border:               #54546D;
  --color-autocomplete-shadow:               0 2px 8px rgba(126, 156, 216, 0.15);
  --color-autocomplete-background:           #2A2A37;
  --color-autocomplete-background-hover:     #223249;

  --color-answer-font:                       #DCD7BA;
  --color-answer-background:                 #2A2A37;
  --color-answer-border:                     #54546D;

  --color-result-background:                 #1F1F28;
  --color-result-border:                     #363646;
  --color-result-url-font:                   #98BB6C;
  --color-result-vim-selected:               #363646;
  --color-result-vim-arrow:                  #7E9CD8;
  --color-result-description-highlight-font: #E6C384;
  --color-result-link-font:                  #7E9CD8;
  --color-result-link-font-highlight:        #7FB4CA;
  --color-result-link-visited-font:          #957FB8;
  --color-result-publishdate-font:           #727169;
  --color-result-engines-font:               #727169;

  --color-result-keyvalue-background:        #2A2A37;

  --color-categories-font:                   #DCD7BA;
  --color-categories-item-border-selected:   #7E9CD8;
}


/* ─────────────────────────────────────────────
   Kanagawa Wave  (dark, auto — follows system)
   Applies to: Theme style = Auto + system dark mode
   ───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   QuinSearch logo
   Replaces the inline SearXNG magnifier SVG with the recolored
   family crest. The original <svg> is hidden and the
   <a id="search_logo"> link is given an image as a background.

     - search / results header → shield only (quinsearch-shield.png, ~0.80:1)
     - start page              → full lockup (quinsearch-logo.png,   ~2.30:1)
   ───────────────────────────────────────────── */
#search_logo > svg,
#search_logo > span {
  display: none !important;
}

/* default everywhere (incl. results header): shield only */
#search_logo {
  display: inline-block !important;
  background-image: url("/static/quinsearch-shield.png?v=3");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 2.25rem;
  height: 2.8rem;
}

/* start page: full logo (shield + QuinSearch wordmark) */
.index_endpoint #search_logo {
  background-image: url("/static/quinsearch-logo.png?v=3");
  width: 20rem;
  height: 8.7rem;
}


@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --color-base-font:                         #DCD7BA;
    --color-base-font-rgb:                     220, 215, 186;
    --color-base-background:                   #1F1F28;
    --color-base-background-mobile:            #16161D;

    --color-url-font:                          #7E9CD8;
    --color-url-visited-font:                  #957FB8;

    --color-header-background:                 #16161D;
    --color-header-border:                     #54546D;

    --color-footer-background:                 #16161D;
    --color-footer-border:                     #54546D;

    --color-sidebar-border:                    #54546D;
    --color-sidebar-font:                      #DCD7BA;
    --color-sidebar-background:                #2A2A37;

    --color-backtotop-font:                    #DCD7BA;
    --color-backtotop-border:                  #54546D;
    --color-backtotop-background:              #2A2A37;

    --color-btn-background:                    #7E9CD8;
    --color-btn-font:                          #16161D;
    --color-show-btn-background:               #363646;
    --color-show-btn-font:                     #DCD7BA;

    --color-search-border:                     #54546D;
    --color-search-shadow:                     0 2px 8px rgba(126, 156, 216, 0.15);
    --color-search-background:                 #2A2A37;
    --color-search-font:                       #DCD7BA;
    --color-search-background-hover:           #2D4F67;

    --color-error:                             #E82424;
    --color-error-background:                  #43242B;
    --color-warning:                           #FF9E3B;
    --color-warning-background:                #49443C;
    --color-success:                           #76946A;
    --color-success-background:                #2B3328;

    --color-toolkit-badge-font:                #16161D;
    --color-toolkit-badge-background:          #7E9CD8;
    --color-toolkit-checkbox-onoff-background: #363646;

    --color-autocomplete-font:                 #DCD7BA;
    --color-autocomplete-border:               #54546D;
    --color-autocomplete-shadow:               0 2px 8px rgba(126, 156, 216, 0.15);
    --color-autocomplete-background:           #2A2A37;
    --color-autocomplete-background-hover:     #223249;

    --color-answer-font:                       #DCD7BA;
    --color-answer-background:                 #2A2A37;
    --color-answer-border:                     #54546D;

    --color-result-background:                 #1F1F28;
    --color-result-border:                     #363646;
    --color-result-url-font:                   #98BB6C;
    --color-result-vim-selected:               #363646;
    --color-result-vim-arrow:                  #7E9CD8;
    --color-result-description-highlight-font: #E6C384;
    --color-result-link-font:                  #7E9CD8;
    --color-result-link-font-highlight:        #7FB4CA;
    --color-result-link-visited-font:          #957FB8;
    --color-result-publishdate-font:           #727169;
    --color-result-engines-font:               #727169;

    --color-result-keyvalue-background:        #2A2A37;

    --color-categories-font:                   #DCD7BA;
    --color-categories-item-border-selected:   #7E9CD8;
  }
}