label {
  display: inline-block;
  font-family: var(--font-plaque);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-data);
  font-size: var(--fs-md);
  color: var(--color-phosphor);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-inset-deep);
  transition: border-color var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--color-phosphor) 40%, transparent);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-focus);
  box-shadow:
    var(--shadow-inset-deep),
    0 0 0 2px color-mix(in srgb, var(--color-focus) 40%, transparent);
  outline: none;
}

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