/* ============================================================================
 * tc-like-button - Reaktions-/Like-Button (Toggle)
 * ----------------------------------------------------------------------------
 * Pillen-Button mit Icon + Zaehler, der einen aktiven Zustand (is-liked)
 * anzeigt. Fuer Likes/Reaktionen auf Fotos, Kommentare, Chroniken usw.
 *
 * Struktur: <button class="tc-like-button [is-liked]">
 *             <span class="tc-like-button__icon">HEART</span><span>N</span>
 *           </button>
 * ASCII-safe.
 * ============================================================================ */

.tc-like-button {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-2) var(--tc-space-3);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-full);
  color: var(--tc-text-default);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  cursor: pointer;
  transition: background var(--tc-motion-fast), border-color var(--tc-motion-fast), color var(--tc-motion-fast), transform var(--tc-motion-fast);
}
.tc-like-button:hover { border-color: var(--tc-secondary); color: var(--tc-secondary-light); }
.tc-like-button:active { transform: scale(0.95); }
.tc-like-button.is-liked {
  background: rgba(var(--tc-secondary-rgb), 0.16);
  border-color: var(--tc-secondary);
  color: var(--tc-secondary-light);
}
.tc-like-button__icon { font-size: 1rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .tc-like-button:active { transform: none; }
}