/* Boot stylesheet.
 *
 * Loaded synchronously from <head> (like /theme-init.js) so it is applied on
 * the very first paint — BEFORE the Vite CSS bundle, which is what used to
 * paint a blank white page while the app was loading. It also carries the
 * theme-aware brand-logo swap so both marks never show at once.
 *
 * Kept as an external file so the SPA shell keeps zero inline <style>/<script>
 * blocks and stays compatible with the strict CSP (`style-src 'self'`).
 */

:root {
  --boot-bg: #201c27; /* = --canvas (dark) */
  --boot-text: #9c94b0; /* = --muted (dark) */
  --boot-accent: #7b5ce5; /* = --accent */
  --boot-track: rgba(123, 92, 229, 0.22);
}

html[data-theme="light"] {
  --boot-bg: #f5f3fb; /* = --canvas (light) */
  --boot-text: #6b6580; /* = --muted (light) */
  --boot-accent: #6a4dd8; /* = --accent-hover (light) */
  --boot-track: rgba(123, 92, 229, 0.18);
}

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

/* ── Theme-aware brand wordmark ────────────────────────────────────────────
   /resources/logo.png       → white wordmark, shown on the dark canvas
   /resources/logo-white.png → black wordmark, shown on the light canvas     */

html:not([data-theme="light"]) .brand-logo--light {
  display: none;
}

html[data-theme="light"] .brand-logo--dark {
  display: none;
}

/* ── Boot loader ───────────────────────────────────────────────────────────
   Markup lives in index.html inside #root and is removed by main.tsx as soon
   as React has rendered its first frame.                                          */

#app-boot {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: boot-fade-in 0.3s ease-out 0.1s forwards;
}

#app-boot .boot-spinner {
  width: 2.1rem;
  height: 2.1rem;
  border: 3px solid var(--boot-track);
  border-top-color: var(--boot-accent);
  border-radius: 9999px;
  animation: boot-spin 0.8s linear infinite;
}

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

@keyframes boot-fade-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-boot {
    animation: none;
    opacity: 1;
  }

  #app-boot .boot-spinner {
    animation-duration: 2.5s;
  }
}