button {
  cursor: pointer;
  background: var(--bg-1);
  color: var(--accent-1);
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  font-size: var(--text-md);
  font-family: var(--font-family);
  text-transform: uppercase;
  letter-spacing: var(--caps-letter-spacing);
  border: var(--thickness) solid var(--accent-1);
  border-radius: var(--radius);
  box-shadow: var(--elevation-1);
  transition: var(--transition);
  width: 100%;
}

button:hover,
button:focus {
  transition: var(--transition);
  color: var(--accent-2);
  border-color: var(--accent-2);
  box-shadow: inset var(--elevation-1);
}

button:disabled {
  background: var(--bg-2);
  border-color: var(--grey);
  color: var(--grey);
  opacity: var(--opacity);
  filter: var(--opacity);
  cursor: not-allowed;
}

button[type='submit'] {
  background: var(--accent-1);
  color: var(--bg-1);
  border: var(--thickness) solid var(--accent-1);
  box-shadow: var(--elevation-2);
}

button[type='submit']:hover,
button[type='submit']:focus {
  box-shadow: var(--elevation-1);
  background: var(--accent-2);
  border-color: var(--accent-2);
}

button[type='submit']:disabled {
  background: var(--grey);
  border-color: var(--grey);
  color: var(--bg-1);
  cursor: not-allowed;
}