/* Pre-React boot styles. Lives here, not inline in index.html, so the CSP can
   say style-src 'self' instead of 'unsafe-inline'. index.css restates these for
   the post-boot app; this copy only covers the first paint. */
body,
input,
button,
select,
textarea {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

::-webkit-scrollbar {
  display: none;
}

/* The first frame, before tokens.css has loaded: the canvas colour of whichever theme
   public/boot-theme.js has selected (it runs in <head>, ahead of this file). These two values
   are the only raw colours outside src/styles/tokens.css, and src/styles/tokens.test.js holds
   each equal to its block's --rf-surface-canvas. docs/specs/dls-v11.md tab 4 §8. */
:root {
  background: #070C1C;
  color-scheme: dark;
}

:root[data-theme="light"] {
  background: #F4F6FA;
  color-scheme: light;
}

/* F-106: the loading indicator inside #root (index.html), so the first frame is not a blank canvas
   while fonts, CSS and chunks load. React replaces it on mount. No raw colours — tokens.css has not
   loaded yet, so it draws in `currentColor`, which `color-scheme` above makes legible on each
   canvas. */
.boot-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.boot-loader__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  opacity: 0.7;
  animation: boot-loader-spin 0.9s linear infinite;
}

/* Visually hidden, still read by a screen reader. */
.boot-loader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes boot-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* A still ring rather than a spinning one; the ring alone still says "not ready yet". */
@media (prefers-reduced-motion: reduce) {
  .boot-loader__spinner {
    animation: none;
  }
}