.form {
  display: grid;
  gap: var(--s-3);
}

.field {
  display: grid;
  gap: var(--s-2);
}

.field > span,
.field label {
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="file"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  padding: 11px 12px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-brand) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent);
}