/* Critical pre-React shell styles. Served from public/ so Vite does not send
 * this plain CSS through the full Tailwind content scanner during builds. */
body {
  /* The literal copy of --font-sans (src/lib/design/tokens.css § Typography),
   * and one of only two in the repo. It cannot be `var(--font-sans)`: this
   * sheet is a plain <link> in index.html that paints the pre-React skeleton,
   * and tokens.css arrives later inside the bundled CSS — so the var would be
   * undefined for exactly the frames this file exists to style, and the
   * skeleton would flash in the browser default before the app took over.
   * Keep the two in step; see that section for why the Windows names are
   * where they are. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'SF Pro', 'SF Pro Arabic', 'SF Arabic', 'Geeza Pro', 'Segoe UI', Roboto, 'Noto Sans', system-ui, Arial, 'Helvetica Neue', sans-serif;
  margin: 0;
  /* Literal copies of --background (#F4F6F7 light / #0E1A22 dark, see
   * src/lib/design/tokens.css), for the same reason as the font stack above:
   * the tokens have not loaded when this paints, and a mismatch here is the
   * flash of the wrong colour on every cold load. Keep them in step. */
  background: #f4f6f7;
}

html.dark body {
  background: #0e1a22;
}

#root {
  min-height: 100vh;
}

.app-skeleton {
  position: fixed;
  inset: 0;
  background: #f4f6f7;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

html.dark .app-skeleton {
  background: #0e1a22;
}

.skeleton-header {
  height: 68px;
  background: linear-gradient(90deg, #e8eef0 0%, #dce3e6 50%, #e8eef0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

html.dark .skeleton-header {
  background: linear-gradient(90deg, #15242e 0%, #1b2b36 50%, #15242e 100%);
  background-size: 200% 100%;
}

.skeleton-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.skeleton-content {
  max-width: 600px;
  width: 100%;
}

.skeleton-line {
  height: 20px;
  background: linear-gradient(90deg, #e8eef0 0%, #dce3e6 50%, #e8eef0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 12px;
}

html.dark .skeleton-line {
  background: linear-gradient(90deg, #15242e 0%, #1b2b36 50%, #15242e 100%);
  background-size: 200% 100%;
}

.skeleton-line:first-child {
  width: 80%;
  height: 32px;
}

.skeleton-line:nth-child(2) {
  width: 60%;
}

.skeleton-line:nth-child(3) {
  width: 40%;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#root:not(:empty) + .app-skeleton {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-header,
  .skeleton-line {
    animation: none;
  }
}
/* Build-time page summary for crawlers that do not run JavaScript
 * (src/config/seo/prerender.ts). It sits under the fixed skeleton while the
 * bundle loads, and is removed from view the moment the app renders. */
.prerender {
  padding: 2rem 1rem;
  max-width: 64rem;
  margin: 0 auto;
}

#root:not(:empty) ~ .prerender {
  display: none;
}