/* The boot screen until the app mounts (server Html, client BootLoader). Literal colours: the
   app's tokens are not loaded yet. Dark follows the stored choice (data-boot-theme on <html>),
   else the system's preference. */
.boot-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.boot-screen {
  background-color: #f4f4f6;
}

.boot-logo {
  width: 180px;
  fill: #e2032d;
}

.boot-label {
  margin: 0;
  /* The trailing letter spacing compensated, so the word stays centred. */
  padding-left: 0.35em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #adb5bd;
}

@media (min-width: 1200px) {
  .boot-logo {
    width: 260px;
  }

  .boot-label {
    font-size: 15px;
  }
}

html[data-boot-theme='dark'] .boot-screen {
  background-color: #141312;
}

html[data-boot-theme='dark'] .boot-label {
  color: #b1aeaa;
}

@media (prefers-color-scheme: dark) {
  html:not([data-boot-theme='light']) .boot-screen {
    background-color: #141312;
  }

  html:not([data-boot-theme='light']) .boot-label {
    color: #b1aeaa;
  }
}