/*
 * Variables
 */

:root {
  --bg0: #15191e;
  --bg1: #1c1c24;
  --bg2: #262630;
  --bg3: #383847;
  --bg4: #3f3f4d;

  --accent0: #a374ba;
  --accent1: #b37fcc;
  --accent2: #c38ade;
}



/*
 * Tab
 */

:root {
  --lwt-accent-color: var(--bg0) !important;  /* unfocused background */
  --lwt-selected-tab-background-color: var(--bg3) !important;  /* focused background */
}
.tabbrowser-tab:not([pinned]) { min-width: 8rem !important; }



/*
 * Toolbar
 */

:root {
  --toolbar-bgimage: none !important;
  --tab-selected-bgcolor: var(--bg3) !important;
  --toolbar-bgcolor: var(--bg2) !important;

  --toolbarbutton-icon-fill-attention: var(--accent0) !important;

  --toolbarbutton-active-background: var(--bg4) !important;
  --toolbarbutton-hover-background: var(--bg3) !important;

  --chrome-content-separator-color: var(--bg0) !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
  background-color: var(--bg2) !important;
}
#tabbrowser-tabs, .toolbar-items { background-color: var(--bg0) !important; }
.browser-toolbar:not(.titlebar-color) { background-image: none !important; }



/*
 * URL bar
 */

#urlbar[focused="true"] > #urlbar-background { background-color: var(--bg3) !important }
:root {
  --toolbar-field-non-lwt-bgcolor: var(--bg0) !important;
  --toolbar-field-background-color: var(--bg0) !important;
  --lwt-toolbar-field-background-color: var(--bg0) !important;

  --toolbar-field-focus-non-lwt-bgcolor: var(--bg3) !important;
  --toolbar-field-focus-background-color: var(--bg3) !important;
  --lwt-toolbar-field-focus: var(--bg3) !important;

  --toolbar-field-focus-border-color: var(--accent0) !important;

  --autocomplete-popup-background: var(--bg2) !important;
  --autocomplete-popup-highlight-background: var(--bg2) !important;
  --urlbar-popup-url-color: var(--accent2) !important;
  --urlbar-popup-action-color: var(--accent2) !important;
}
#urlbar-background, #searchbar {
  border-color: var(--bg2) !important;
  box-shadow: none !important;
}



/*
 * Popups (like hamburger menu)
 */

:root {
  --arrowpanel-border-color: var(--bg3) !important;
  --arrowpanel-background: var(--bg3) !important;
  --button-hover-bgcolor: var(--bg2) !important;
  --button-active-bgcolor: var(--bg2) !important;

  --in-content-page-background: var(--bg3) !important;
}
#commonDialog {
  --in-content-button-background: var(--bg0) !important;
  --in-content-button-background-hover: var(--bg1) !important;
  --in-content-button-background-active: var(--bg2) !important;

  --in-content-primary-button-background: var(--accent0) !important;
  --in-content-primary-button-background-hover: var(--accent1) !important;
  --in-content-primary-button-background-active: var(--accent2) !important;
}



/*
 * Sidebar
 */

:-moz-any(#sidebar-box, #sidebar) {
  --sidebar-background-color: var(--bg2) !important;
}
:-moz-any(.sidebar-panel, body) {
  --lwt-sidebar-background-color: var(--bg2) !important;
}



/*
 * Letterbox
 */

.browserStack { background-color: var(--bg1) !important }
:root { --tabpanel-background-color: var(--bg1) !important; }