/* ProgressBar - flat horizontal bar with a colored fill.
   Tone classes swap only the fill color, never the track. The bar itself
   renders no numeric readout; consumers communicate meaning via :tone. */

.progress-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--color-border-subtle);
  border: var(--border-width) solid var(--color-border-subtle);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-text);
  transition: width var(--duration-base) var(--ease-default);
}

.progress-bar--warning .progress-bar__fill {
  background: var(--color-accent);
}

.progress-bar--error .progress-bar__fill {
  background: var(--color-error);
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar__fill {
    transition: none;
  }
}