/* Early critical styles for CSP-safe boot */

/* Spinner keyframes */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Hide any SVG in the app until styles are loaded */
#app svg {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#app.styles-loaded svg {
  opacity: 1;
}

/* Loading overlay */
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f4; /* Light mode */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease;
}
#loading-overlay.fade-out {
  opacity: 0;
}

#loading-text {
  color: #44403c; /* Light mode text color */
}

/* Dark mode override using html.dark (set by boot-theme.js) */
html.dark #loading-overlay {
  background-color: #1c1917;
}
html.dark #loading-text {
  color: #e7e5e4;
}

/* Also support system dark preference as a fallback */
@media (prefers-color-scheme: dark) {
  #loading-overlay {
    background-color: #1c1917;
  }
  #loading-text {
    color: #e7e5e4;
  }
}

/* Utility classes (namespaced to avoid collisions) */
.app-init-hidden {
  visibility: hidden;
}
.stn-center {
  text-align: center;
}
.stn-spinner-box {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem auto;
}
.stn-overlay-spinner {
  animation: spin 1s linear infinite;
  color: #f97316;
}
.stn-loading-text {
  font-family: system-ui, sans-serif;
  font-size: 1.125rem;
}
.stn-spinner-circle {
  opacity: 0.25;
}
.stn-spinner-path {
  opacity: 0.75;
}