/* ============================================================
 * farpa DS · component · input · v1.0.0
 * ------------------------------------------------------------
 * Cobre <input> · <textarea> · <select>
 * Estados: :hover · :focus · :disabled · [aria-invalid]
 * ============================================================ */

.farpa-input,
.farpa-textarea,
.farpa-select {
  display: block;
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--input-fg);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}

.farpa-input::placeholder,
.farpa-textarea::placeholder { color: var(--fg-muted); }

.farpa-input:hover,
.farpa-textarea:hover,
.farpa-select:hover { border-color: var(--border-strong); }

.farpa-input:focus-visible,
.farpa-textarea:focus-visible,
.farpa-select:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.farpa-input:disabled,
.farpa-textarea:disabled,
.farpa-select:disabled {
  background: var(--bg-subtle);
  color: var(--fg-muted);
  cursor: not-allowed;
}

.farpa-input[aria-invalid="true"],
.farpa-textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.farpa-textarea {
  min-height: 6rem;
  resize: vertical;
}

/* Label + help text wrapper */
.farpa-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.farpa-field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg);
}
.farpa-field__help {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.farpa-field__error {
  font-size: var(--fs-xs);
  color: var(--error);
}