@layer occ.components {
  .occ-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding-inline: var(--occ-space-3);
    border-radius: var(--occ-radius-round);
    border: 1px solid transparent;
    font-size: .6875rem;
    font-weight: var(--occ-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .occ-badge--gold { color:#111; background:var(--occ-accent); }
  .occ-badge--neutral { color:var(--occ-fg); background:var(--occ-bg-subtle); }
  .occ-badge--outline { color:var(--occ-fg); background:transparent; border-color:var(--occ-border); }
  .occ-badge--success { color:var(--occ-fg-inverse); background:var(--occ-success); }
  .occ-badge--warning { color:var(--occ-fg-inverse); background:var(--occ-warning); }
  .occ-badge--danger { color:var(--occ-fg-inverse); background:var(--occ-danger); }
}