/* Progress Dots
 * Onboarding step indicator. Three states: inactive, active (glow), done (green).
 */

@layer components {
  .progress-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-block: 16px;
  }

  .progress-dots__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: oklch(38% 0.02 278);
    transition: background 200ms ease, box-shadow 200ms ease;
  }

  /* Active step — Flare with glow ring */
  .progress-dots__dot--active {
    background: oklch(var(--lch-flare));
    box-shadow: 0 0 0 3px oklch(var(--lch-flare) / 0.25);
  }

  /* Completed step — Laser green */
  .progress-dots__dot--done {
    background: oklch(var(--lch-laser));
  }
}