/* Tokens scoped to the splash so they apply before the app CSS bundle.
   Keep in sync with `src/common/styles/themes`. */
#luma-boot-splash {
  --background: 211 38% 96%;
  --foreground: 214 22% 26%;
  --primary: 214 84% 56%;
  --muted-foreground: 214 12% 44%;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: ui-sans-serif, system-ui, sans-serif;
  /* Match Tailwind preflight from the first frame so copy does not jump when
     the app bundle loads (html line-height 1.5, text-sm / text-xs). */
  font-size: 16px;
  line-height: 1.5;
}

html:has(#luma-boot-splash) {
  overflow: hidden;
}

html.light #luma-boot-splash {
  --background: 211 38% 96%;
  --foreground: 214 22% 26%;
  --primary: 214 84% 56%;
  --muted-foreground: 214 12% 44%;
}

html.dark #luma-boot-splash {
  --background: 233 18% 15%;
  --foreground: 173 24% 93%;
  --primary: 211 100% 50%;
  --muted-foreground: 233 12% 73%;
}

html.teal #luma-boot-splash {
  --background: 240 23.58% 24.12%;
  --foreground: 173 24% 93%;
  --primary: 152.14 91.3% 63.92%;
  --muted-foreground: 233 12% 73%;
}

html.monokai-pro #luma-boot-splash {
  --background: 233 18% 15%;
  --foreground: 173 24% 93%;
  --primary: 44 100% 71%;
  --muted-foreground: 233 12% 73%;
}

html.monokai-purple-pro #luma-boot-splash {
  --background: 233 18% 15%;
  --foreground: 173 24% 93%;
  --primary: 258 100% 68%;
  --muted-foreground: 233 12% 73%;
}

html.mean-blue-cue #luma-boot-splash {
  --background: 225 30% 98%;
  --foreground: 225 71% 3%;
  --primary: 225 79% 74%;
  --muted-foreground: 225 2% 31%;
}

html.ocean-breeze-dark #luma-boot-splash {
  --background: 222.22 47.37% 11.18%;
  --foreground: 216 12.2% 83.92%;
  --primary: 158.11 64.37% 51.57%;
  --muted-foreground: 220 8.94% 46.08%;
}

html.sunset-horizon-dark #luma-boot-splash {
  --background: 336 13.51% 14.51%;
  --foreground: 21.43 35% 92.16%;
  --primary: 11.63 100% 68.63%;
  --muted-foreground: 22.22 25.23% 79.02%;
}

html.sunset-horizon-light #luma-boot-splash {
  --background: 24 100% 98.04%;
  --foreground: 346.67 7.96% 22.16%;
  --primary: 11.63 100% 68.63%;
  --muted-foreground: 6.32 18.81% 39.61%;
}

html.pastel-dreams-light #luma-boot-splash {
  --background: 280 33.33% 96.47%;
  --foreground: 216.92 19.12% 26.67%;
  --primary: 255.14 91.74% 76.27%;
  --muted-foreground: 220 8.94% 46.08%;
}

html.pastel-dreams-dark #luma-boot-splash {
  --background: 24 9.8% 10%;
  --foreground: 226.45 100% 93.92%;
  --primary: 255.9 95.4% 82.94%;
  --muted-foreground: 217.89 10.61% 64.9%;
}

html.pastel-dreams-blue-light #luma-boot-splash {
  --background: 215 33.33% 96.47%;
  --foreground: 216.92 19.12% 26.67%;
  --primary: 220 91.74% 76.27%;
  --muted-foreground: 220 8.94% 46.08%;
}

html.blue #luma-boot-splash {
  --background: 215 33.33% 96.47%;
  --foreground: 216.92 19.12% 26.67%;
  --primary: 238.99 76.77% 69.61%;
  --muted-foreground: 220 8.94% 46.08%;
}

html.mint-fresh-light #luma-boot-splash {
  --background: 160 25% 98%;
  --foreground: 160 40% 12%;
  --primary: 160 70% 45%;
  --muted-foreground: 160 30% 40%;
}

html.forest-garden-light #luma-boot-splash {
  --background: 120 25% 98%;
  --foreground: 140 60% 15%;
  --primary: 140 60% 45%;
  --muted-foreground: 140 30% 40%;
}

html.arctic-ice-light #luma-boot-splash {
  --background: 200 30% 98%;
  --foreground: 200 60% 15%;
  --primary: 200 80% 50%;
  --muted-foreground: 200 30% 40%;
}

html.cherry-blossom-light #luma-boot-splash {
  --background: 320 30% 98%;
  --foreground: 320 40% 15%;
  --primary: 320 60% 65%;
  --muted-foreground: 320 25% 40%;
}

html.cobalt-light #luma-boot-splash {
  --background: 214 36% 96%;
  --foreground: 216 22% 26%;
  --primary: 221 83% 53%;
  --muted-foreground: 216 12% 44%;
}

html.iris-light #luma-boot-splash {
  --background: 262 32% 96%;
  --foreground: 262 20% 26%;
  --primary: 262 83% 58%;
  --muted-foreground: 262 11% 44%;
}

html.periwinkle-light #luma-boot-splash {
  --background: 247 34% 96%;
  --foreground: 247 20% 26%;
  --primary: 251 80% 64%;
  --muted-foreground: 247 11% 44%;
}

html.amethyst-light #luma-boot-splash {
  --background: 270 32% 96%;
  --foreground: 270 20% 26%;
  --primary: 270 72% 60%;
  --muted-foreground: 270 11% 44%;
}

html.powder-sky-light #luma-boot-splash {
  --background: 199 42% 97%;
  --foreground: 204 23% 27%;
  --primary: 199 84% 66%;
  --muted-foreground: 204 12% 45%;
}

html.teal-zen-light #luma-boot-splash {
  --background: 174 30% 96%;
  --foreground: 176 22% 26%;
  --primary: 174 100% 30%;
  --muted-foreground: 176 12% 44%;
}

html.azure-pulse-light #luma-boot-splash {
  --background: 206 40% 97%;
  --foreground: 210 23% 27%;
  --primary: 207 90% 54%;
  --muted-foreground: 210 12% 45%;
}

html.midnight-sapphire-dark #luma-boot-splash {
  --background: 240 25% 6%;
  --foreground: 240 15% 90%;
  --primary: 240 60% 55%;
  --muted-foreground: 240 20% 85%;
}

html.tangerine-dark #luma-boot-splash {
  --background: 219 29% 15%;
  --foreground: 340 0% 90%;
  --primary: 13 73% 55%;
  --muted-foreground: 300 0% 64%;
}

html.violet-bloom-dark #luma-boot-splash {
  --background: 225 7% 11%;
  --foreground: 0 0% 96%;
  --primary: 258 100% 68%;
  --muted-foreground: 0 0% 71%;
}

.luma-boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.luma-boot-ring {
  position: relative;
  width: 144px;
  height: 144px;
}

.luma-boot-glow {
  position: absolute;
  inset: 1rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.25);
  filter: blur(24px);
  animation: luma-boot-pulse 2s ease-in-out infinite;
}

.luma-boot-track,
.luma-boot-progress,
.luma-boot-accent {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.luma-boot-track circle {
  fill: none;
  stroke: hsl(var(--primary) / 0.15);
  stroke-width: 8;
}

.luma-boot-progress {
  animation: luma-boot-spin 1.6s linear infinite;
}

.luma-boot-progress circle {
  fill: none;
  stroke: url(#luma-boot-grad);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 91.5 235.2;
}

.luma-boot-accent {
  animation: luma-boot-spin 2.4s linear infinite;
}

.luma-boot-accent circle {
  fill: none;
  stroke: hsl(var(--primary) / 0.6);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 26 345;
}

.luma-boot-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary));
}

.luma-boot-mark svg {
  display: block;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
}

.luma-boot-text {
  margin-top: 24px;
  text-align: center;
}

.luma-boot-title {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.luma-boot-description {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: hsl(var(--muted-foreground));
}

@keyframes luma-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes luma-boot-pulse {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luma-boot-glow,
  .luma-boot-progress,
  .luma-boot-accent {
    animation: none;
  }
}