/* ==================== SOCIALS ==================== */

.socials__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social-link {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

@media (hover: hover) {
  .social-link:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
    color: var(--color-text);
    transform: translateY(-1px);
  }
}