/*
 * File: public/css/index-critical.css
 * Contains critical, above-the-fold CSS for index.html.
 * Externalized from inline <style> for CSP compliance.
 */

:root {
  --clr-bg-light: #F4F5FF;
  --clr-bg-dark:  #121418;
  --clr-text-light: #1a1a1a;
  --clr-text-dark:  #e0e0e0;
  --clr-primary:  #3498db; /* Consider aligning this with Xbfluent primary color #006699 */
  --fs-xxl: clamp(2rem, 6vw, 4rem);
  --fs-md:  clamp(1rem, 2.5vw, 1.25rem);
  --spacing: 1rem;
  --spin-size: 64px;
}
/* Theme */
@media (prefers-color-scheme: dark) {
  :root { background-color: var(--clr-bg-dark); color: var(--clr-text-dark); }
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
  :root { background-color: var(--clr-bg-light); color: var(--clr-text-light); }
}

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
html {
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  background-color: var(--clr-bg-light);
  color: var(--clr-text-light);
  background-image: linear-gradient(135deg,
    rgba(52,152,219,0.2) 0%, rgba(255,154,80,0.2) 100%);
  background-size: 200% 200%;
  animation: bgShift 10s ease infinite;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  html {
    background-color: var(--clr-bg-dark);
    color: var(--clr-text-dark);
    background-image: linear-gradient(135deg,
      rgba(52,152,219,0.2) 0%, rgba(255,154,80,0.2) 100%);
  }
}

@keyframes bgShift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--spacing);
  overflow: hidden; /* Important for the decorative shapes */
}

/* Logo */
.waiting__logo {
  max-width: 200px;
  width: 50%;
  margin-bottom: 2rem;
}

/* Spinner */
.waiting__spinner {
  width: var(--spin-size);
  height: var(--spin-size);
  border: 6px solid var(--clr-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--spacing);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Messages */
.waiting__title {
  font-size: var(--fs-xxl);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.waiting__subtitle {
  font-size: var(--fs-md);
  color: var(--clr-primary);
  opacity: 0.85;
}