/* Before JavaScript, fallbacks mirror the canonical Workforce tokens in src/styles.css. */
body {
  margin: 0;
}
#wf-opening {
  --wf-opening-background: var(--background, oklch(0.975 0.004 262));
  --wf-opening-foreground: var(--foreground, oklch(0.22 0.04 262));
  --wf-opening-primary: var(--primary, oklch(0.27 0.06 262));
  --wf-opening-red: var(--brand-red, oklch(0.48 0.16 30));
  display: flex;
  min-height: 100dvh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  background: var(--wf-opening-background);
  color: var(--wf-opening-foreground);
  font:
    14px "Plus Jakarta Sans Variable",
    system-ui,
    sans-serif;
}
.dark #wf-opening {
  --wf-opening-background: var(--background, oklch(0.17 0.02 270));
  --wf-opening-foreground: var(--foreground, oklch(0.95 0.008 264));
  --wf-opening-primary: var(--primary, oklch(0.72 0.08 255));
  --wf-opening-red: var(--brand-red, oklch(0.62 0.17 30));
}
#wf-opening img {
  width: min(62vw, 240px);
  height: auto;
}
#wf-opening .wf-opening-dark,
.dark #wf-opening .wf-opening-light {
  display: none;
}
.dark #wf-opening .wf-opening-dark {
  display: block;
}
html:not([lang="en"]) #wf-opening [lang="en"],
html[lang="en"] #wf-opening [lang="fr"] {
  display: none;
}
.wf-loading-mark {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  color: var(--primary, var(--wf-opening-primary));
}
.wf-loading-mark > span {
  display: block;
  width: 5px;
  height: 24px;
  border-radius: 3px;
  background: currentColor;
  animation: wf-loading 1100ms ease-in-out infinite;
}
.wf-loading-mark > span:nth-child(2) {
  animation-delay: 130ms;
  background: var(--brand-red, var(--wf-opening-red));
}
.wf-loading-mark > span:nth-child(3) {
  animation-delay: 260ms;
}
@keyframes wf-loading {
  0%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-loading-mark > span {
    animation: none;
  }
  .wf-loading-mark > span:nth-child(2) {
    height: 30px;
  }
}