/**
 * Badge & Tag Components — v3.2
 *
 * Consome tokens --badge-* (Camada 3) e --color-* (Camada 2).
 * Usado em: sec-services.php, sec-features-grid.php, sec-products.php.
 *
 * REGRAS:
 *   - Todos os valores vêm de tokens
 *   - Nenhum valor hardcoded
 *
 * @package FocofyFactory
 * @version 3.2
 */

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  padding:        var(--badge-padding-y) var(--badge-padding-x);
  font-size:      var(--badge-font-size);
  font-weight:    var(--badge-fw);
  line-height:    1;
  border-radius:  var(--badge-radius);
  white-space:    nowrap;
  border:         1px solid transparent;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTS — semânticos
   ══════════════════════════════════════════════════════════════════════════ */

/* Default — neutro */
.focofy-badge--default {
  background:   var(--color-surface-3);
  color:        var(--color-text-muted);
  border-color: var(--color-border-subtle);
}

/* Primary — destaque de marca */
.focofy-badge--primary {
  background:   color-mix(in srgb, var(--color-accent) 12%, transparent);
  color:        var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* Success */
.focofy-badge--success {
  background:   color-mix(in srgb, var(--color-success) 12%, transparent);
  color:        var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}

/* Warning */
.focofy-badge--warning {
  background:   color-mix(in srgb, var(--color-warning) 12%, transparent);
  color:        var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
}

/* Danger */
.focofy-badge--danger {
  background:   color-mix(in srgb, var(--color-danger) 12%, transparent);
  color:        var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

/* Info */
.focofy-badge--info {
  background:   color-mix(in srgb, var(--color-info) 12%, transparent);
  color:        var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 20%, transparent);
}

/* Dark — sobre fundos claros */
.focofy-badge--dark {
  background:   var(--color-surface-dark);
  color:        var(--color-text-inverse);
  border-color: transparent;
}

/* Outline */
.focofy-badge--outline {
  background:   transparent;
  color:        var(--color-text);
  border-color: var(--color-border-strong);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODIFICADORES
   ══════════════════════════════════════════════════════════════════════════ */

/* Filled — sem borda, fundo sólido */
.focofy-badge--filled {
  border-color: transparent;
  background:   var(--color-accent);
  color:        var(--color-text-inverse);
}

/* Dot — com indicador circular */
.focofy-badge--dot::before {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TAG — variante quadrada (radius menor)
   Usada em taxonomias, categorias e filtros
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-1);
  padding:       var(--space-1) var(--space-3);
  font-size:     var(--badge-font-size);
  font-weight:   var(--fw-normal);
  border-radius: var(--radius-sm);
  background:    var(--color-surface-3);
  color:         var(--color-text-muted);
  border:        1px solid var(--color-border-subtle);
  white-space:   nowrap;
  cursor:        default;
  transition:
    background   var(--transition-fast),
    color        var(--transition-fast),
    border-color var(--transition-fast);
}

/* Tag interativa */
.focofy-tag--interactive {
  cursor: pointer;
}

.focofy-tag--interactive:hover {
  background:   var(--color-surface-2);
  color:        var(--color-text);
  border-color: var(--color-border-strong);
}

/* Tag ativa — filtro selecionado */
.focofy-tag--active {
  background:   color-mix(in srgb, var(--color-accent) 12%, transparent);
  color:        var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  font-weight:  var(--fw-medium);
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGE GROUP — linha de badges
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-badge-group {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-2);
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   NOVO / DESTAQUE — badge especial para features
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-badge--new {
  background:    var(--color-accent);
  color:         var(--color-text-inverse);
  border-color:  transparent;
  font-weight:   var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.focofy-badge--popular {
  background:    color-mix(in srgb, var(--color-accent-2) 15%, transparent);
  color:         var(--color-accent-2);
  border-color:  color-mix(in srgb, var(--color-accent-2) 25%, transparent);
  font-weight:   var(--fw-semibold);
}