/*
  Yuzuctus - Desert Vivant Forms
  Input fields with defined borders. 2px solid for contrast.
*/

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.form-label {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--fg);
}

.form-input {
  padding: 0.65em 0.9em;
  min-height: 2.75rem;
  font-size: var(--text-md);
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-swish),
              box-shadow var(--dur-fast) var(--ease-swish);
  width: 100%;
}

.form-input:focus {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px rgba(166, 233, 209, 0.3);
  outline: none;
}

[data-theme="night"] .form-input:focus {
  box-shadow: 0 0 0 4px rgba(125, 212, 184, 0.25);
}

.form-input::placeholder {
  color: var(--fg-quiet);
}

.form-input--error {
  border-color: var(--danger);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--danger);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--fg-quiet);
}

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

.form-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.form-row > .form-group {
  flex: 1;
  min-width: 12rem;
}

.form-shell {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  box-shadow: var(--shadow-soft);
}

.form-shell-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.form-shell-subtitle {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  text-align: center;
  margin-bottom: var(--space-lg);
}

.form-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  margin-top: var(--space-lg);
}