/* Styles for the initial page loader and base body styles. */

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
}

/* 
  Styles the root div ONLY when it's empty (before React mounts).
  This ensures the loader is centered on the page. Once React renders,
  this rule no longer applies, preventing style conflicts.
*/
#root:empty {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.initial-loader .spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 8px solid #fed7aa; /* Tailwind orange-200 */
  border-top: 8px solid #f97316; /* Tailwind orange-500 */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}