/* ==========================================================================
   COMPONENT: pill
   --------------------------------------------------------------------------
   Small rounded label. Used as page badges (Lançamento), feature tags,
   live-status indicators, language pills (GlobalReach), etc.

   Variants control color family. .e-pill is neutral by default.
   ========================================================================== */

.e-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--e-space-xs);
    padding: 6px var(--e-space-sm);
    border-radius: var(--e-radius-2xl);
    font-size: var(--e-font-size-xs);
    font-weight: var(--e-font-weight-semibold);
    letter-spacing: var(--e-tracking-wide);
    background: var(--e-color-background);
    color: var(--e-color-muted);
    border: var(--e-border-light);
    line-height: 1;
}


/* COLOR VARIANTS */

.e-pill--primary {
    background: var(--e-color-primary-50);
    color: var(--e-color-primary);
    border-color: var(--e-color-primary-100);
}

.e-pill--accent {
    background: var(--e-color-accent-50);
    color: var(--e-color-accent);
    border-color: var(--e-color-accent-100);
}

.e-pill--secondary {
    background: var(--e-color-secondary-50);
    color: var(--e-color-primary-700);
    border-color: var(--e-color-secondary-100);
}

.e-pill--dark {
    background: rgba(255, 255, 255, 0.10);
    color: var(--e-text-on-dark);
    border-color: var(--e-border-on-dark);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.e-pill--success {
    background: rgba(16, 185, 129, 0.10);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.20);
}


/* LIVE INDICATOR DOT — pulsing colored dot used inside live pills. */

.e-pill__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: e-pulse 2s ease-in-out infinite;
}


/* SIZE MODIFIERS */

.e-pill--lg { padding: var(--e-space-xs) var(--e-space-md); font-size: var(--e-font-size-sm); }
.e-pill--sm { padding: 4px var(--e-space-xs); font-size: var(--e-font-size-xs); }