/**
 * Label und Badge: klein, eckig, auf Highlight-Fläche. Status-Badges tragen
 * den Zustand immer als Text, Farbe ist nur das zweite Merkmal.
 * Modifier folgen den Statuswerten: open, in_progress, done, overdue sowie den Berichtsstatus
 * on_track, at_risk, off_track (AP-43);
 * .badge--accent ist das „Neu“-Label.
 */
@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--theme-badge-bg);
    color: var(--theme-badge-text);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption);
    white-space: nowrap;
  }

  .badge--accent {
    background-color: var(--theme-badge-accent-bg);
    color: var(--theme-badge-accent-text);
  }

  .badge--open {
    background-color: var(--theme-badge-open-bg);
    color: var(--theme-badge-open-text);
  }

  .badge--in_progress {
    background-color: var(--theme-badge-in-progress-bg);
    color: var(--theme-badge-in-progress-text);
  }

  .badge--done {
    background-color: var(--theme-badge-done-bg);
    color: var(--theme-badge-done-text);
  }

  .badge--overdue {
    background-color: var(--theme-badge-overdue-bg);
    color: var(--theme-badge-overdue-text);
  }

  .badge--on_track {
    background-color: var(--theme-badge-on-track-bg);
    color: var(--theme-badge-on-track-text);
  }

  .badge--at_risk {
    background-color: var(--theme-badge-at-risk-bg);
    color: var(--theme-badge-at-risk-text);
  }

  .badge--off_track {
    background-color: var(--theme-badge-off-track-bg);
    color: var(--theme-badge-off-track-text);
  }
}