/* SpotlightCard.vanilla.css — SpotlightCard.css (original, kept alongside) re-skinned to the contractor-app tokens.
   Class names unchanged. The spotlight is a soft accent glow that works on light and dark grounds. */
.card-spotlight {
  position: relative;
  border-radius: var(--radius-lg);
  border: var(--border-w) solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  padding: var(--space-5);
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: color-mix(in srgb, var(--accent-fill) 40%, transparent);
}
.card-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
  opacity: 0;
  transition: opacity var(--dur-slow) ease;
  pointer-events: none;
}
.card-spotlight:hover::before,
.card-spotlight:focus-within::before { opacity: 0.6; }
.card-spotlight > * { position: relative; }  /* keep text above the glow */
.card-spotlight::before { z-index: 0; }
@media (prefers-reduced-motion: reduce) {
  .card-spotlight::before { transition: none; }
}