/* Wallpaper-based colors substituted by stylix */

/* Override Zen's JS-applied gradient backgrounds directly on elements */
#zen-browser-background,
#zen-browser-background::after,
#zen-browser-background::before {
  background: {{colors.surface.default.hex}} !important;
  opacity: 1 !important;
}

#zen-toolbar-background::after,
#zen-toolbar-background::before {
  background: {{colors.surface_container_low.default.hex}} !important;
  opacity: 1 !important;
}

/* Sidebar and tab strip */
#navigator-toolbox {
  background-color: {{colors.surface_container_low.default.hex}} !important;
  border: none !important;
  outline: none !important;
}

#TabsToolbar, #tabbrowser-tabs {
  background-color: transparent !important;
}

.tab-background:is([selected], [multiselected]) {
  background-color: {{colors.surface_container_high.default.hex}} !important;
}

/* URL bar */
#urlbar .urlbar-background,
#urlbar-background {
  background-color: {{colors.surface_container.default.hex}} !important;
}

#urlbar[focused="true"] .urlbar-background {
  background-color: {{colors.surface_container_high.default.hex}} !important;
}

#urlbar-input {
  color: {{colors.on_surface.default.hex}} !important;
}

/* Nav bar and toolbar */
#nav-bar {
  background-color: transparent !important;
}

/* Sidebar text and icons */
#sidebar-box, #sidebar {
  background-color: {{colors.surface_container_low.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

/* Popup panels (menus, extensions etc). Not the middle-click autoscroll
   popup: it is a panel too, but only its round content part is drawn — a
   background on the panel itself shows up as a square behind the circle. */
.panel-arrowcontent, panel:not(.autoscroller), #appMenu-popup {
  background-color: {{colors.surface_container.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

/* Said outright as well, so it also beats the old `panel` rule in a
   userChrome.css parsed before this change. Gecko picks the popup's widget
   transparency from this background when the popup is first shown and the
   autoscroller is reused for the session, so a stale one needs a Zen restart. */
#autoscroller {
  background: transparent !important;
}

/* Content area containers */
#browser, #appcontent, #tabbrowser-tabbox,
#tabbrowser-tabpanels, #zen-appcontent-wrapper,
#appcontent-tabpanels, #zen-tabbox-wrapper {
  background-color: {{colors.surface_container_low.default.hex}} !important;
}

/* Sidebar splitter — blend with sidebar, show accent on hover */
#zen-sidebar-splitter {
  background: {{colors.surface_container_low.default.hex}} !important;
  opacity: 1 !important;
}

#zen-sidebar-splitter:hover {
  background: {{colors.primary.default.hex}} !important;
}

/* Titlebar / window controls */
#titlebar, #zen-titlebar, .titlebar-buttonbox-container,
#zen-appcontent-navbar-container, .browser-toolbar,
#PersonalToolbar {
  background-color: {{colors.surface_container_low.default.hex}} !important;
}

#main-window, #main-window[tabsintitlebar] {
  background-color: {{colors.surface_container_low.default.hex}} !important;
  -moz-appearance: none !important;
  border: none !important;
  outline: none !important;
}

/* CSS variables */
:root {
  --zen-themed-toolbar-bg: {{colors.surface_container_low.default.hex}} !important;
  --zen-main-browser-background: {{colors.surface.default.hex}} !important;
  --zen-appcontent-navbar-container-bg: {{colors.surface_container_low.default.hex}} !important;
  --zen-appcontent-separator-color: {{colors.surface_container_low.default.hex}} !important;
  --zen-dialog-background: {{colors.surface_container.default.hex}} !important;
  --newtab-background-color: {{colors.surface.default.hex}} !important;
  --lwt-sidebar-background-color: {{colors.surface_container_low.default.hex}} !important;
  --lwt-sidebar-text-color: {{colors.on_surface.default.hex}} !important;
  --toolbar-bgcolor: {{colors.surface_container.default.hex}} !important;
  --lwt-accent-color: {{colors.surface_container.default.hex}} !important;
  --lwt-text-color: {{colors.on_surface.default.hex}} !important;
  --arrowpanel-background: {{colors.surface_container.default.hex}} !important;
  --arrowpanel-color: {{colors.on_surface.default.hex}} !important;
  --zen-primary-color: {{colors.primary.default.hex}} !important;
  --zen-colors-primary: {{colors.primary_container.default.hex}} !important;
  --zen-colors-secondary: {{colors.secondary_container.default.hex}} !important;
  --zen-colors-tertiary: {{colors.tertiary_container.default.hex}} !important;
  --zen-colors-border: {{colors.outline_variant.default.hex}} !important;
  --toolbox-textcolor: {{colors.on_surface.default.hex}} !important;
}

/* Zen's whole palette is built out of light-dark(), which picks its branch
   from the computed `color-scheme` — not from the colours we set below. So
   the vars we override here are only half the input: everything Zen derives
   from them takes the LIGHT branch unless a scheme is declared. Worst case
   is the menu foreground,

     --zen-colors-primary-foreground: light-dark(
       var(--zen-branding-bg-reverse),                              // near-black
       color-mix(in srgb, var(--zen-primary-color) 80%, white 20%)) // light tint

   whose light branch is dark text, landing on the dark backgrounds forced
   above — invisible until hover swaps in a highlight background. It still
   tracks the wallpaper (the derived backgrounds move with our accent), which
   is why switching themes changes how readable it is without ever fixing it.
   The palette generator only ever runs `dark` (settings/theming.nix), so the
   scheme is not conditional. */
:root, menupopup, panel {
  color-scheme: dark !important;
}