html {
  var(font-ui): "Segoe UI";
  var(color-ui-text-primary): #e6ecf5;
  var(color-ui-text-muted): #8d9bb3;
  var(color-statusbar-background): #0a1222;
  var(color-statusbar-border): #1a2840;
  var(color-statusbar-hover-border): #2f80ff;
  var(color-pause-panel-background): #0b1422;
  var(color-main-background): #090f1a;
  var(color-titlebar-background): #0a1222;
  var(color-titlebar-background-inactive): #0a1222;
  var(color-titlebar-text): #e6ecf5;
  var(color-titlebar-icon): #c9d4e5;
  var(color-titlebar-icon-hover): #18263f;
  var(color-titlebar-icon-inactive): #5d6b82;
  var(color-menubar-background): #0a1222;
  var(color-menubar-background-hover): #18263f;
  var(color-menubar-background-active): #1e3050;
  var(color-menuitem-background): #16233a;
  var(color-menuitem-background-hover): #1a2a44;
  var(color-menu-popup-background): #0f1a2c;
  var(color-menu-popup-border): #22324d;
  var(color-menu-popup-shadow): rgba(0, 0, 0, 0.55);
  var(color-menu-shortcut-text): #8d9bb3;
  var(color-menu-separator): #1f2d45;
  var(color-context-menu-background): #0f1a2c;
  var(color-context-menu-border): #22324d;
  var(color-context-menu-hover): #1a2a44;
  var(color-context-menu-text): #e6ecf5;
  var(color-context-menu-muted): #8d9bb3;
  var(color-context-menu-separator): #1f2d45;
  var(color-context-menu-shadow): rgba(0, 0, 0, 0.6);
  var(color-window-border): #263856;
  var(color-titlebar-version): #7d8aa3;
  var(color-menubar-border): #1a2840;
  var(color-accent): #2f80ff;
  var(color-accent-soft): rgba(47, 128, 255, 0.16);
  var(color-card-background): #111c2e;
  var(color-card-border): #1b2a42;
  var(color-card-border-hover): #2c4166;

  border: 1px solid color(color-window-border);
  background-color: color(color-main-background);
  box-sizing: border-box;
}

html[window-state="maximized"]
{
  border: window-frame-width solid transparent;
}

html > header
{
  width: *;
  flow: horizontal;
  background-color: color(color-titlebar-background);
  height: window-caption-height;
  margin: 0;
  color: color(color-titlebar-text);
}

html[data-active="false"] > header
{
  background-color: color(color-titlebar-background-inactive);
}

html > header > window-caption
{
  display: block;
  line-height: window-caption-height;
  width: *;
  padding: 0 1em;
  font-family: var(font-ui), Arial, sans-serif;
  font-size: 0.95em;
  font-weight: 600;
}

html > header > window-caption span
{
  vertical-align: middle;
}

html > header > window-caption span.caption-version
{
  display: inline-block;
  margin-left: 0.9em;
  font-weight: 400;
  color: color(color-titlebar-version);
}

html > header > window-caption img
{
  vertical-align: middle;
  margin-right: 0.4em;
  width: 1.5em;
  height: 1.5em; 
}

html > header > window-buttons
{
  display: block;
  flow: horizontal;
  width: max-content;
  height: *;
}

html > header > window-buttons > window-button {
  behavior: clickable;
  display: block;
  height: *;
  width: window-button-width;
  foreground-size: 2em 1.5em;
  foreground-repeat: no-repeat;
  foreground-position: 50% 50%;
  stroke-width: 0;
  fill: color(color-titlebar-icon);
  transition: background-color linear 100ms;
  padding: 0.25em;
}

html[data-active="false"] > header > window-buttons > window-button
{
  fill: color(color-titlebar-icon-inactive);
}

html > header > window-buttons > window-button:hover
{
  background: color(color-titlebar-icon-hover);
}

html > header > window-buttons > window-button[role="window-close"]
{
  foreground-image: url(icon:window-close);
}

html > header > window-buttons > window-button[role="window-close"]:hover
{
  background: rgb(232,17,35);
  fill: #fff;
}

html > header > window-buttons > window-button[role="window-maximize"]
{
  foreground-image: url(icon:window-maximize);
}

html[window-state="maximized"]
{
  border-color: transparent;
}

html[window-state="maximized"] > header > window-buttons > window-button[role="window-maximize"]
{
  foreground-image: url(icon:window-restore);
}

html > header > window-buttons > window-button[role="window-minimize"]
{
  foreground-image: url(icon:window-minimize);
}

/* macOS uses the native AppKit title bar instead of Sciter window chrome. */
html[data-platform="macos"]
{
  border: none;
}

html[data-platform="macos"] > header
{
  display: none;
}

html[data-platform="macos"][window-state="maximized"]
{
  border: none;
}