/**
 * 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: var(--wa-state-neutral-fg, rgba(15, 23, 42, 0.7));
    --wapu-badge-surface: var(--wa-state-neutral-bg, rgba(15, 23, 42, 0.06));
    border-color: var(--wa-state-neutral-border, transparent);
}
.wapu-badge--accent {
    --wapu-badge-color: var(--wa-accent, #7C3AED);
    --wapu-badge-surface: var(--wa-accent-soft, rgba(124, 58, 237, 0.10));
    border-color: var(--wa-accent-border, transparent);
}
.wapu-badge--info {
    --wapu-badge-color: var(--wa-state-info-fg, var(--wa-info, #3B82F6));
    --wapu-badge-surface: var(--wa-state-info-bg, rgba(59, 130, 246, 0.10));
    border-color: var(--wa-state-info-border, transparent);
}
.wapu-badge--success {
    --wapu-badge-color: var(--wa-state-success-fg, var(--wa-success, #059669));
    --wapu-badge-surface: var(--wa-state-success-bg, rgba(5, 150, 105, 0.10));
    border-color: var(--wa-state-success-border, transparent);
}
.wapu-badge--warning {
    --wapu-badge-color: var(--wa-state-warning-fg, var(--wa-warning, #D97706));
    --wapu-badge-surface: var(--wa-state-warning-bg, rgba(217, 119, 6, 0.10));
    border-color: var(--wa-state-warning-border, transparent);
}
.wapu-badge--danger {
    --wapu-badge-color: var(--wa-state-error-fg, var(--wa-error, #D4183D));
    --wapu-badge-surface: var(--wa-state-error-bg, rgba(212, 24, 61, 0.10));
    border-color: var(--wa-state-error-border, transparent);
}

/* ── 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);
}