/* DS §05.05 — Forms (web) · token-only */

.ds-form { display: flex; flex-direction: column; gap: var(--sp-3); }

.ds-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg1);
}

.ds-form input,
.ds-form select,
.ds-form textarea {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--form-field-padding);
  border: 1px solid var(--form-field-border);
  border-radius: var(--form-field-radius);
  font-family: inherit;
  font-size: var(--text-sm);
  background: var(--form-field-bg);
  color: var(--fg1);
  transition: border-color var(--dur-fast) var(--ease-smooth),
              box-shadow var(--dur-fast) var(--ease-smooth);
}

.ds-form input:focus,
.ds-form select:focus,
.ds-form textarea:focus {
  outline: none;
  border-color: var(--form-field-border-focus);
  box-shadow: var(--focus-ring-web);
}

.ds-form input[aria-invalid="true"] {
  border-color: var(--status-danger);
  box-shadow: 0 0 0 3px var(--status-danger-bg);
}

.ds-form .form-error {
  font-size: var(--text-xs);
  color: var(--status-danger-text);
  display: none;
  margin-top: var(--sp-1);
}

.ds-form .form-success {
  text-align: center;
  padding: var(--sp-8);
  color: var(--status-clean-text);
}

.ds-form .form-toast-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--toast-radius);
  font-size: var(--text-sm);
}

.ds-form-fine {
  font-size: var(--text-xs);
  color: var(--fg3);
  margin: var(--sp-1) 0 0;
}