/* Wallpaper-based colors generated by matugen */

/* 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) */
.panel-arrowcontent, panel, #appMenu-popup {
  background-color: {{colors.surface_container.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !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;
}