/* =============================================================================
   KINKO DESIGN SYSTEM — Progress Bar Component
   Spec: components/progress-bar.md
   Figma: node 2586:14 (Progress Bar component set, Progress Bar 🟡 page)
   Variants: Default · Disabled

   3-TIER TOKEN ARCHITECTURE:
   Layer 1 (Primitive) → Layer 2 (Semantic) → Layer 3 (--progress-*) → styles
   Never use --color-* or --surface-* directly below the :root block.
   ============================================================================= */

/* =============================================================================
   LAYER 3 — Progress Bar component tokens (alias semantic tokens)
   ============================================================================= */

:root {
  /* Track (background rail) */
  --progress-track:           var(--surface-brand);
  --progress-track-disabled:  var(--surface-disabled);

  /* Fill (progress indicator) */
  --progress-fill:            var(--action-primary);
  --progress-fill-disabled:   var(--action-disabled);

  /* Dimensions */
  --progress-height:          var(--spacing-8);
  --progress-radius:          var(--radius-pill);
}

/* =============================================================================
   COMPONENT STYLES — use only --progress-* vars below this line
   ============================================================================= */

.progress {
  display: block;
  width: 100%;
  height: var(--progress-height);
  background-color: var(--progress-track);
  border-radius: var(--progress-radius);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0%;
  background-color: var(--progress-fill);
  border-radius: var(--progress-radius);
  transition: width 0.3s ease;
}

/* ── Disabled ── */
.progress--disabled {
  background-color: var(--progress-track-disabled);
}

.progress--disabled .progress__fill {
  background-color: var(--progress-fill-disabled);
}