@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-variable.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --boot-bg: #f3f7f5;
  --boot-logo-shadow:
    0 16px 42px -28px rgba(0, 0, 0, 0.72),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --boot-bg: #090c11;
    --boot-logo-shadow: 0 18px 36px rgba(0, 0, 0, 0.52);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --boot-bg: #f3f7f5;
  --boot-logo-shadow:
    0 16px 42px -28px rgba(0, 0, 0, 0.72),
    0 4px 16px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --boot-bg: #090c11;
  --boot-logo-shadow: 0 18px 36px rgba(0, 0, 0, 0.52);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--boot-bg);
}

#root {
  min-height: 100vh;
}

#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: boot-splash-fade-in 220ms ease 600ms forwards;
}

.boot-splash__logo {
  width: 120px;
  height: 120px;
  filter: drop-shadow(var(--boot-logo-shadow));
}

@keyframes boot-splash-fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}