/* TANGO — component interaction states (hover / active / focus).
 * Inline React styles can't express pseudo-states, so the interactive
 * layer for shipped components lives here. Base/static styling stays in the
 * component's inline styles; this only adds motion and state.
 */

/* ---- Button --------------------------------------------------------- */
.tango-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.tango-btn--primary:not(:disabled):hover {
  background: var(--accent-hover);
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 rgba(5, 5, 5, 0.9);
}
.tango-btn--primary:not(:disabled):active {
  background: var(--accent-press);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(5, 5, 5, 0.9);
}
.tango-btn--solidCream:not(:disabled):hover {
  background: var(--cream-100);
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 rgba(5, 5, 5, 0.9);
}
.tango-btn--solidCream:not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(5, 5, 5, 0.9);
}
.tango-btn--outline:not(:disabled):hover {
  background: var(--cream-200);
  color: var(--noir-900) !important;
}
.tango-btn--outlineRed:not(:disabled):hover {
  background: var(--tango-red);
  color: var(--cream-100) !important;
}
.tango-btn--ghost:not(:disabled):hover {
  color: var(--tango-red) !important;
}

/* ---- Card ----------------------------------------------------------- */
.tango-card--interactive {
  transition: transform var(--dur-base) var(--ease-tango),
    box-shadow var(--dur-base) var(--ease-tango);
}
.tango-card--interactive:hover {
  transform: translate(-2px, -3px);
  box-shadow: var(--shadow-hard-md);
}

/* ---- Input ---------------------------------------------------------- */
.tango-input:focus {
  outline: none;
  border-color: var(--tango-red);
}
.tango-input::placeholder {
  color: var(--grey-fog);
  opacity: 1;
}

/* ---- Tag ------------------------------------------------------------ */
.tango-tag { user-select: none; }