/**
 * .ww-badge — base for LicenseBadge, CountryBadge, PaymentBadge,
 * VerifiedBadge, ComplaintStatus. Color communicates meaning but is never
 * the only signal — every badge pairs color with text or an icon, per
 * docs/DESIGN-SYSTEM.md's accessibility rule (no color-only meaning).
 */

.ww-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--ww-radius-pill);
    font-size: var(--wp--preset--font-size--caption);
    font-weight: 600;
    line-height: 1.4;
    border: var(--ww-border-width) solid transparent;
    white-space: nowrap;
}

.ww-badge--neutral  { background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--body); border-color: var(--ww-border-color); }
.ww-badge--success  { background: color-mix(in srgb, var(--wp--preset--color--success) 12%, white); color: var(--wp--preset--color--success); }
.ww-badge--warning  { background: color-mix(in srgb, var(--wp--preset--color--warning) 12%, white); color: var(--wp--preset--color--warning); }
.ww-badge--danger   { background: color-mix(in srgb, var(--wp--preset--color--danger) 12%, white); color: var(--wp--preset--color--danger); }
.ww-badge--info     { background: color-mix(in srgb, var(--wp--preset--color--info) 12%, white); color: var(--wp--preset--color--info); }

/* VerifiedBadge: always icon + text, never a bare checkmark, so meaning
   survives for screen-reader users and colorblind users alike. */
.ww-badge--verified::before {
    content: "\2713";
    font-weight: 700;
}

/* AI-suggested / unverified content — distinct from VerifiedBadge on
   purpose, see docs/DESIGN-SYSTEM.md's AIFieldBadge and
   docs/ARCHITECTURE.md §8. Admin-context only; never rendered publicly. */
.ww-badge--ai-unverified {
    background: color-mix(in srgb, var(--wp--preset--color--info) 10%, white);
    color: var(--wp--preset--color--info);
    border-style: dashed;
    border-color: var(--wp--preset--color--info);
}

.ww-badge--sponsored {
    background: var(--wp--preset--color--surface-alt);
    color: var(--wp--preset--color--muted);
    border-color: var(--ww-border-color);
}