/**
 * Wapu UI Kit · wapu-badge
 *
 * Componente badge/pill/chip canónico compartido editor↔front.
 * Estilo editorial premium: pill por default, soft fill, sin gamer-colors.
 *
 * Variantes BEM: --soft (default), --filled, --outline
 * Tones:         --neutral (default), --accent, --info, --success, --warning, --danger
 * Tamaños:       --sm (default), --md
 *
 * Tokens del drop via custom props:
 *   --wapu-badge-color   (texto del badge)
 *   --wapu-badge-surface (fondo del badge en filled/soft)
 *
 * @package WapuCore
 * @since   5.3.2
 */

/* ── Base ───────────────────────────────────────────────────────── */
.wapu-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--wapu-badge-surface, rgba(15, 23, 42, 0.06));
    color: var(--wapu-badge-color, rgba(15, 23, 42, 0.7));
    white-space: nowrap;
    user-select: none;
}

/* ── Sizes ──────────────────────────────────────────────────────── */
.wapu-badge--sm { font-size: 9px;  padding: 2px 7px; }
.wapu-badge--md { font-size: 10px; padding: 3px 9px; }

/* ── Tones · soft (default) ─────────────────────────────────────── */
.wapu-badge--neutral { --wapu-badge-color: rgba(15, 23, 42, 0.7);  --wapu-badge-surface: rgba(15, 23, 42, 0.06); }
.wapu-badge--accent  { --wapu-badge-color: #9B1D4D;                --wapu-badge-surface: rgba(155, 29, 77, 0.10); }
.wapu-badge--info    { --wapu-badge-color: #075985;                --wapu-badge-surface: rgba(14, 165, 233, 0.12); }
.wapu-badge--success { --wapu-badge-color: #166534;                --wapu-badge-surface: rgba(34, 197, 94, 0.12); }
.wapu-badge--warning { --wapu-badge-color: #92400E;                --wapu-badge-surface: rgba(245, 158, 11, 0.14); }
.wapu-badge--danger  { --wapu-badge-color: #9F1239;                --wapu-badge-surface: rgba(225, 29, 72, 0.12); }

/* ── Variant: filled (fondo sólido del tone) ────────────────────── */
.wapu-badge--filled {
    background: var(--wapu-badge-color, #1a1a1a);
    color: #ffffff;
    border-color: var(--wapu-badge-color, #1a1a1a);
}

/* ── Variant: outline (solo borde) ──────────────────────────────── */
.wapu-badge--outline {
    background: transparent;
    color: var(--wapu-badge-color, currentColor);
    border-color: var(--wapu-badge-color, currentColor);
}

/* ── Soft (default · sin clase necesaria) ──────────────────────── */
.wapu-badge--soft {
    /* alias explícito al default */
    background: var(--wapu-badge-surface);
    color: var(--wapu-badge-color);
}

/* ── Dot prefix (opcional) ──────────────────────────────────────── */
.wapu-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wapu-badge-color, currentColor);
}