/* The first paint, before the app's own stylesheet has arrived: the page's background and the splash in
   index.html, so the mark and the word are never seen unstyled. Colours repeat the canvas of each theme
   (packages/design-tokens); the app's stylesheet takes over, with the same look, when it loads. */
html {
  background: #f5f5f8;
  color: #454552;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    background: #131316;
    color: #aaaab5;
  }
}

html[data-theme='dark'] {
  background: #131316;
  color: #aaaab5;
}

html[data-theme='cream'] {
  background: #f3ecdd;
  color: #52493c;
}

body {
  margin: 0;
}

#root {
  min-height: 100vh;
}

.movl-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100vh;
}

.movl-splash__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: movl-first-pulse 1.6s ease-in-out infinite;
}

.movl-splash__logo {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: radial-gradient(circle, #ffffff 0 30%, #6246d1 31%);
}

html[data-theme='dark'] .movl-splash__logo {
  background: radial-gradient(circle, #131316 0 30%, #a78bfa 31%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .movl-splash__logo {
    background: radial-gradient(circle, #131316 0 30%, #a78bfa 31%);
  }
}

.movl-splash__mark {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.875rem;
}

@keyframes movl-first-pulse {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .movl-splash__brand {
    animation: none;
  }
}