/* Badge (Badge.jsx): etichetta a pillola. caps = maiuscolo («IN VENDITA»), unico caso di maiuscolo con gli eyebrow. */
@layer components {
  .badge {
    --badge-bg: var(--action-accent);
    --badge-fg: var(--text-brand);

    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--badge-bg);
    color: var(--badge-fg);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }

  .badge--caps {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .badge--purple { --badge-bg: var(--surface-brand); --badge-fg: var(--text-inverse); }
  .badge--white { --badge-bg: var(--surface-page); }
}