/*
 * The first paint of the web client, before its own styles and script are there (a reload, an install launch, the
 * return from a sign-in): literal colours of Background/Page and Text and Icon/Primary of both themes; their equality
 * with the tokens is held by src/app/bootTokens.test.ts. `data-theme` on <html> means an explicit choice (boot.js);
 * without it the system scheme decides.
 *
 * не из Figma: the plain background and the waiting ring before the app. The design's Launch / Splash frame belongs to
 * onboarding (plan 05; gap FOUNDATIONS-11).
 */
:root {
  color-scheme: light;
  --boot-bg: #FDAB1B;
  --boot-fg: #1C1407;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --boot-bg: #121212;
  --boot-fg: #F2F1EE;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --boot-bg: #121212;
    --boot-fg: #F2F1EE;
  }
}
html,
body {
  margin: 0;
  background-color: var(--boot-bg);
  color: var(--boot-fg);
}
#root:empty {
  display: grid;
  place-items: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}
/* a ring that shows only if the wait lasts (a fast start shows the plain background) */
#root:empty::before {
  content: '';
  box-sizing: border-box;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  border: 3px solid rgb(128 128 128 / 0.3);
  border-block-start-color: var(--boot-fg);
  opacity: 0;
  animation:
    boot-in 0.2s ease 0.3s forwards,
    boot-spin 0.8s linear infinite;
}
@keyframes boot-in {
  to {
    opacity: 1;
  }
}
@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}
/* reduced motion: the ring appears after the same delay, without spinning or fading (spec §6.6) */
@media (prefers-reduced-motion: reduce) {
  #root:empty::before {
    animation: boot-in 0s linear 0.3s forwards;
  }
}