/* The loading shell: index.html shows it before the app's code arrives, and LoadingScreen while a route loads. It
   renders before the bundle's stylesheets, so it can't use tokens.css. Its two colours copy --surface-page and --accent
   from each of tokens.css's mappings, under the same selectors; scripts/check-contrast.mjs fails when they drift. */
:root {
  color-scheme: dark;
  --shell-page: #1b2631;
  --shell-mark: #e3a94b;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --shell-page: #eae0cf;
    --shell-mark: #7c4c0b;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --shell-page: #eae0cf;
  --shell-mark: #7c4c0b;
}

html {
  background: var(--shell-page);
}

.hx-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.hx-shell-mark {
  stroke: var(--shell-mark);
  animation: hx-shell-pulse 1.6s ease-in-out infinite;
}

@keyframes hx-shell-pulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-shell-mark {
    animation: none;
  }
}