body {
  margin: 0;
  padding: 0;
}

/* This file is loaded as a raw <link> outside the Vite/token pipeline, so it
   cannot be themed by colors.css alone: the var() fallbacks below carry the
   canvas during the pre-boot frame (tokens not loaded yet), then the token
   takes over. The fallbacks mirror --color-background exactly: graytrue-100
   in light, graytrue-950 in dark. */
.App {
  background-color: var(--color-background, #f5f5f5);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

.App .app-loading {
  max-width: 1200px;
  width: 40vw;
  min-width: 200px;
}

html.dark .App {
  background-color: var(--color-background, #0f0f0f);
}

/* The boot logo is a black-ink asset; inverted it stays legible on the dark
   canvas. The anti-FOUC script in index.html sets the class before first
   paint, so the boot frame never flashes. */
html.dark .App .app-loading {
  filter: invert(1);
}