input {
  font-family: var(--font-family);
  font-size: var(--text-md);
  border-radius: var(--radius);
  border: var(--thickness) solid var(--accent-1);
  padding: var(--space-sm);
  background-color: var(--bg-2);
  color: var(--text-color);
  letter-spacing: var(--paragraph-letter-spacing);
  box-shadow: var(--elevation-1);
  transition: var(--transition);
}

input:hover,
input:focus {
  border-color: var(--accent-2);
  box-shadow: var(--elevation-3);
  transition: var(--transition);
}

input[type='color'] {
  width: 100%;
  padding: var(--space-md);
  border-radius: var(--radius);
  cursor: pointer;
}