/* ============================================================================
 * components/forms.css — form controls
 * ============================================================================
 * Depends on: core/tokens.css
 * Authoritative source: ForceX_Typography_and_CSS_Catalog_Spec.md §"Forms and Inputs"
 *
 * Variants:
 *   .form-input--mono — for machine identifiers (invitation codes, API tokens, hashes)
 *
 * State classes (toggleable from JS):
 *   .is-valid    — field passed validation
 *   .is-invalid  — field failed validation
 * ========================================================================== */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.form-label__optional {
  color: var(--border2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

.form-input {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  height: 44px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  transition: border-color var(--motion-fast);
}
.form-input:focus { outline: none; border-color: var(--accent-lt); }
.form-input::placeholder { color: var(--muted); font-weight: var(--weight-regular); }
.form-input.is-invalid { border-color: var(--red); }
.form-input.is-valid   { border-color: var(--green); }

/* Mono input variant — only for machine identifiers (invitation codes,
 * API tokens, hashes, etc.) */
.form-input--mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

.form-textarea {
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  resize: vertical;
  transition: border-color var(--motion-fast);
}
.form-textarea:focus { outline: none; border-color: var(--accent-lt); }

.form-help {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--muted);
  line-height: var(--leading-normal);
}
.form-help--error { color: var(--red); }
.form-help--ok    { color: var(--green); }