/* =================================================================
   DESIGN SYSTEM FINETIPS — Tags
   Arquivo: tags.css
   Descrição: Tags/badges em 4 variantes de cores (azul, laranja,
              roxo, verde) com estados hover e pressed.
   ================================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.tag:active {
  transform: scale(0.95);
}

/* ---- Tag não interativa (apenas visual) ---- */
.tag-non-interactive {
  cursor: default;
}

.tag-non-interactive:hover {
  background-color: var(--tag-blue-bg);
  border-color: var(--tag-blue-border);
}

.tag-non-interactive.tag-orange:hover {
  background-color: var(--tag-orange-bg);
  border-color: var(--tag-orange-border);
}

.tag-non-interactive.tag-purple:hover {
  background-color: var(--tag-purple-bg);
  border-color: var(--tag-purple-border);
}

.tag-non-interactive.tag-green:hover {
  background-color: var(--tag-green-bg);
  border-color: var(--tag-green-border);
}

.tag-non-interactive:active {
  transform: none;
}

/* ---- Blue Tag ---- */
.tag-blue {
  background-color: var(--tag-blue-bg);
  color: var(--tag-blue-text);
  border-color: var(--tag-blue-border);
}

.tag-blue:hover {
  background-color: var(--tag-blue-hover-bg);
  border-color: var(--tag-blue-border);
}

.tag-blue:active {
  background-color: var(--tag-blue-pressed-bg);
  color: #FFFFFF;
  border-color: var(--tag-blue-pressed-bg);
}

/* ---- Orange Tag ---- */
.tag-orange {
  background-color: var(--tag-orange-bg);
  color: var(--tag-orange-text);
  border-color: var(--tag-orange-border);
}

.tag-orange:hover {
  background-color: var(--tag-orange-hover-bg);
  border-color: var(--tag-orange-border);
}

.tag-orange:active {
  background-color: var(--tag-orange-pressed-bg);
  color: #FFFFFF;
  border-color: var(--tag-orange-pressed-bg);
}

/* Modo light: fundo #FF5D000F apenas em tags laranja não interativas */
body:not(.dark-mode) .tag-orange.tag-non-interactive {
  background-color: #FF5D000F;
}

/* ---- Purple Tag ---- */
.tag-purple {
  background-color: var(--tag-purple-bg);
  color: var(--tag-purple-text);
  border-color: var(--tag-purple-border);
}

.tag-purple:hover {
  background-color: var(--tag-purple-hover-bg);
  border-color: var(--tag-purple-border);
}

.tag-purple:active {
  background-color: var(--tag-purple-pressed-bg);
  color: #FFFFFF;
  border-color: var(--tag-purple-pressed-bg);
}

/* ---- Green Tag ---- */
.tag-green {
  background-color: var(--tag-green-bg);
  color: var(--tag-green-text);
  border-color: var(--tag-green-border);
}

.tag-green:hover {
  background-color: var(--tag-green-hover-bg);
  border-color: var(--tag-green-border);
}

.tag-green:active {
  background-color: var(--tag-green-pressed-bg);
  color: #FFFFFF;
  border-color: var(--tag-green-pressed-bg);
}