/* =============================================================================
   Cobranzo brand · badges (status pills)
   ─────────────────────────────────────────────────────────────────────────────
   `.cob-badge` and variants — opt-in via the `cob-` prefix so they don't replace
   the legacy `.badge` in badges.css.
   ============================================================================= */

@layer components {
  .cob-badge {
    align-items: center;
    background: var(--cob-badge-background, var(--cob-cream-dark));
    border-radius: var(--cob-r-pill);
    color: var(--cob-badge-color, var(--cob-ink-2));
    display: inline-flex;
    font-family: var(--cob-font-body);
    font-size: var(--cob-fs-caption);
    font-weight: 600;
    gap: 0.5em;
    letter-spacing: 0;
    line-height: 1;
    padding-block: 0.4em;
    padding-inline: 0.85em;

    &::before {
      background: var(--cob-badge-dot, var(--cob-muted));
      block-size: 6px;
      border-radius: var(--cob-r-pill);
      content: "";
      inline-size: 6px;
    }
  }

  .cob-badge--paid {
    --cob-badge-background: var(--cob-success-bg);
    --cob-badge-color:      var(--cob-success);
    --cob-badge-dot:        var(--cob-success);
  }

  .cob-badge--scheduled {
    --cob-badge-background: var(--cob-info-bg);
    --cob-badge-color:      var(--cob-info-ink);
    --cob-badge-dot:        var(--cob-info);
  }

  .cob-badge--due {
    --cob-badge-background: var(--cob-warning-bg);
    --cob-badge-color:      var(--cob-warning-ink);
    --cob-badge-dot:        var(--cob-warning);
  }

  .cob-badge--overdue {
    --cob-badge-background: var(--cob-danger-bg);
    --cob-badge-color:      var(--cob-danger-ink);
    --cob-badge-dot:        var(--cob-danger);
  }

  .cob-badge--draft {
    --cob-badge-background: var(--cob-cream-dark);
    --cob-badge-color:      var(--cob-ink-2);
    --cob-badge-dot:        var(--cob-muted);
    border: 1px solid var(--cob-border);
  }

  .cob-badge--sent {
    --cob-badge-background: var(--cob-navy);
    --cob-badge-color:      var(--cob-cream);
    --cob-badge-dot:        var(--cob-terra);
  }

  .cob-badge--live {
    --cob-badge-background: var(--cob-success-bg);
    --cob-badge-color:      var(--cob-success);
    --cob-badge-dot:        var(--cob-success);
  }
}